实现拖拽功能

slince-zero · May 13, 2024 · d0a6da5 · d0a6da5
1 parent b2fb509
commit d0a6da5
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 11 deletions.
diff --git a/src/page/center/dragScreenShot.tsx b/src/page/center/dragScreenShot.tsx
@@ -1,23 +1,98 @@
-// 用来实现拖拽截图功能
-// import { useRef } from 'react'
-// import domtoimage from 'dom-to-image'
+import { useState, useContext } from 'react'
 import { ImgContext } from '@/context'
-import { useContext } from 'react'
 
 const ScreenCapture = () => {
   const { isOpenSelectArea } = useContext(ImgContext)
+  const [isDragging, setIsDragging] = useState(false)
+  const [isResizing, setIsResizing] = useState(false)
+  const [position, setPosition] = useState({
+    left: 0,
+    top: 0,
+    width: 200,
+    height: 200,
+    x: 0,
+    y: 0,
+  })
+
+  const onMouseDown = (e: any) => {
+    setIsDragging(true)
+    setPosition({
+      ...position,
+      x: e.clientX,
+      y: e.clientY,
+    })
+  }
+
+  const onMouseMove = (e: any) => {
+    if (isDragging) {
+      const dx = e.clientX - position.x
+      const dy = e.clientY - position.y
+      setPosition({
+        ...position,
+        left: position.left + dx,
+        top: position.top + dy,
+        x: e.clientX,
+        y: e.clientY,
+      })
+    } else if (isResizing) {
+      const newWidth = e.clientX - position.left
+      const newHeight = e.clientY - position.top
+      if (newWidth > 0 && newHeight > 0) {
+        setPosition({
+          ...position,
+          width: newWidth,
+          height: newHeight,
+        })
+      }
+    }
+  }
+
+  const onMouseUp = () => {
+    setIsDragging(false)
+    setIsResizing(false)
+  }
+
+  const onResizeMouseDown = (e: any) => {
+    e.stopPropagation() // 阻止mousedown事件冒泡到父元素
+    setIsResizing(true)
+    setPosition({
+      ...position,
+      x: e.clientX,
+      y: e.clientY,
+    })
+  }
+
   return (
-    <div>
-      {isOpenSelectArea === true ? (
+    <div
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}>
+      {isOpenSelectArea && (
         <div
           style={{
-            height: '200px',
-            width: '200px',
-            backgroundColor: 'red',
-          }}>
+            height: `${position.height}px`,
+            width: `${position.width}px`,
+            backgroundColor: 'blue',
+            position: 'absolute',
+            left: `${position.left}px`,
+            top: `${position.top}px`,
+            cursor: isDragging ? 'grabbing' : 'grab',
+          }}
+          onMouseDown={onMouseDown}>
           拖拽截图
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '0',
+              right: '0',
+              width: '10px',
+              height: '10px',
+              backgroundColor: 'red',
+              cursor: 'nwse-resize',
+            }}
+            onMouseDown={onResizeMouseDown}
+          />
         </div>
-      ) : null}
+      )}
     </div>
   )
 }

diff --git a/src/page/center/index.tsx b/src/page/center/index.tsx
@@ -18,6 +18,7 @@ export default function CenterBoard() {
     opacityValue,
     proportionValue,
     isCircle,
+    isOpenSelectArea,
   } = useContext(ImgContext)
 
   const { imageContainerRef } = useContext(ImageDownloadContext)
@@ -91,6 +92,8 @@ export default function CenterBoard() {
           height: '100%',
           top: '0',
           left: '0',
+          zIndex: 2,
+          display: isOpenSelectArea ? 'block' : 'none',
         }}>
         <ScreenCapture />
       </div>