cc

后台管理/src/pages/A4screen/A4look/index.tsx

@@ -19,15 +19,15 @@ type Props = {
   name: string
   url: string
   txtMoveTemp: any
-  setTxtMove: any
+  setTxtMove: (val: any, key: '1' | '2') => void
 }
 
 function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
   const [cut, setCut] = useState('短屏侧')
 
   const txtMove = useMemo(() => {
-    let obj = txtMoveTemp['1']
-    if (name === '户外裸眼3D') obj = txtMoveTemp[cut === '短屏侧' ? '1' : '']
+    let obj = { ...txtMoveTemp['1'] }
+    if (name === '户外裸眼3D' && cut !== '短屏侧') obj = { ...txtMoveTemp['2'] }
     return obj
   }, [cut, name, txtMoveTemp])
 
@@ -101,7 +101,7 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
         const percentY = (deltaY / page[1]) * 100 * (1 / domSize)
         const newLeft = Math.max(0, Math.min(100, txtDragRef.current.startLeft + percentX))
         const newTop = Math.max(0, Math.min(100, txtDragRef.current.startTop + percentY))
-        setTxtMove((prev: any) => ({ ...prev, left: newLeft, top: newTop }))
+        setTxtMove({ left: newLeft, top: newTop }, cut === '短屏侧' ? '1' : '2')
       }
       // 滑块拖动
       if (scaleDragRef.current.isDragging && scaleBarRef.current) {
@@ -112,7 +112,7 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
           1,
           Math.min(100, scaleDragRef.current.startScale + deltaX * percentPerPixel)
         )
-        setTxtMove((prev: any) => ({ ...prev, scale: newScale }))
+        setTxtMove({ scale: newScale }, cut === '短屏侧' ? '1' : '2')
       }
     }
 
@@ -128,7 +128,7 @@ function A4look({ html, closeFu, name, url, txtMoveTemp, setTxtMove }: Props) {
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('mouseup', handleMouseUp)
     }
-  }, [page, domSize, setTxtMove])
+  }, [page, domSize, setTxtMove, cut])
 
   return (
     <div className={styles.A4look}>

后台管理/src/pages/A4screen/A4set/index.tsx

@@ -104,6 +104,13 @@ function A4set({ id, closeFu }: Props) {
       if (info.rtf) {
         const txtObj = JSON.parse(info.rtf || '{}')
         if (txtObj.html) txtRef.current.ritxtShowFu(txtObj.html)
+
+        // 回显文字位置和大小
+        const txtSize = {
+          1: txtObj['1'] || { left: 10, top: 10, scale: 5 },
+          2: txtObj['2'] || { left: 10, top: 10, scale: 5 }
+        }
+        setTxtMove(txtSize)
       }
 
       // 回显底图选中
@@ -198,6 +205,13 @@ function A4set({ id, closeFu }: Props) {
     2: { left: 10, top: 10, scale: 5 }
   })
 
+  const setTxtMoveFu = useCallback(
+    (val: any, key: '1' | '2') => {
+      setTxtMove({ ...txtMove, [key]: { ...txtMove[key], ...val } })
+    },
+    [txtMove]
+  )
+
   // 点击提交
   const btnOk = useCallback(async () => {
     if (info.type === 'video') {
@@ -417,7 +431,7 @@ function A4set({ id, closeFu }: Props) {
           closeFu={() => setLookHtml('')}
           url={imgAc.thumbPc}
           txtMoveTemp={txtMove}
-          setTxtMove={setTxtMove}
+          setTxtMove={(val, key) => setTxtMoveFu(val, key)}
         />
       ) : null}
     </div>