修改样式，点击截选按钮，centerBoard组件出现框框

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

Hide file tree

Showing 4 changed files with 46 additions and 15 deletions.
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -78,6 +78,9 @@ export default function ImgContextProvider({
   // 设置铅笔颜色
   const [board_pen_color, setBoardPenColor] = useState('#e23922')
 
+  // 是否开启截图选区
+  const [isOpenSelectArea, setIsOpenSelectArea] = useState(false)
+
   // 获取图片
   async function getImage(searchText: string = '') {
     try {
@@ -91,7 +94,9 @@ export default function ImgContextProvider({
         ? `&query=${encodeURIComponent(searchText)}`
         : ''
       const res = await fetch(
-        `${endpoint}?per_page=30&page=${Math.floor(100 * Math.random())}${queryParam}&client_id=${accessKey}`
+        `${endpoint}?per_page=30&page=${Math.floor(
+          100 * Math.random()
+        )}${queryParam}&client_id=${accessKey}`
       )
       const data = await res.json()
 
@@ -328,6 +333,8 @@ export default function ImgContextProvider({
         loadingAIImage,
         handleGenerateAIImage,
         handleSubmitAIImage,
+        isOpenSelectArea,
+        setIsOpenSelectArea,
       }}>
       {children}
     </ImgContext.Provider>

diff --git a/src/page/center/dragScreenShot.tsx b/src/page/center/dragScreenShot.tsx
@@ -1,20 +1,24 @@
 // 用来实现拖拽截图功能
 // import { useRef } from 'react'
 // import domtoimage from 'dom-to-image'
-
-import { Button } from '@nextui-org/button'
-import { SnipScreenShotLogo } from '@/page/right/write-logo'
+import { ImgContext } from '@/context'
+import { useContext } from 'react'
 
 const ScreenCapture = () => {
+  const { isOpenSelectArea } = useContext(ImgContext)
   return (
-    <>
-      <Button isIconOnly
-        onClick={() => {
-          console.log('ddddddd')
-        }}>
-        <SnipScreenShotLogo />
-      </Button>
-    </>
+    <div>
+      {isOpenSelectArea === true ? (
+        <div
+          style={{
+            height: '200px',
+            width: '200px',
+            backgroundColor: 'red',
+          }}>
+          拖拽截图
+        </div>
+      ) : null}
+    </div>
   )
 }
 

diff --git a/src/page/center/index.tsx b/src/page/center/index.tsx
@@ -3,6 +3,7 @@ import { ImgContext } from '@/context'
 import { ImageDownloadContext } from '@/context/imageDownload'
 import { Spinner } from '@nextui-org/react'
 import HandWriting from '@/page/right/hand-writing'
+import ScreenCapture from './dragScreenShot'
 export default function CenterBoard() {
   const {
     imgInfo,
@@ -40,7 +41,7 @@ export default function CenterBoard() {
   //     centerBoardElement.style.cursor = 'url(/rubber.svg),auto'
   //   }
   // }, [boardTool])
-console.log(proportionValue,'proportionValue');
+  console.log(proportionValue, 'proportionValue')
 
   return (
     <div
@@ -83,6 +84,17 @@ console.log(proportionValue,'proportionValue');
         </div>
       )}
 
+      <div
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: '0',
+          left: '0',
+        }}>
+        <ScreenCapture />
+      </div>
+
       <div
         style={{
           position: 'absolute',

diff --git a/src/page/right/index.tsx b/src/page/right/index.tsx
@@ -32,8 +32,8 @@ import {
   PenSizeLogo,
   PenColorLogo,
   WhiteBoardLogo,
+  SnipScreenShotLogo,
 } from './write-logo'
-import ScreenCapture from '../center/dragScreenShot'
 export default function RightBoard() {
   const {
     authorValue,
@@ -61,6 +61,8 @@ export default function RightBoard() {
     isCircle,
     handleIsCircle,
     setHexColor,
+    isOpenSelectArea,
+    setIsOpenSelectArea,
   } = useContext(ImgContext)
   const { handleDownloadImage } = useContext(ImageDownloadContext)
 
@@ -430,7 +432,13 @@ export default function RightBoard() {
               </Dropdown>
 
               {/* 截图选区 */}
-              <ScreenCapture/>
+              {/* isOpenSelectArea, setIsOpenSelectArea */}
+              <Button
+                isIconOnly
+                className={isOpenSelectArea !== false ? ' bg-gray-400' : ''}
+                onClick={() => setIsOpenSelectArea(!isOpenSelectArea)}>
+                <SnipScreenShotLogo />
+              </Button>
             </div>
           </CardBody>
         </Card>