完成修改铅笔颜色

slince-zero · Apr 28, 2024 · 3c59206 · 3c59206
1 parent e86cde6
commit 3c59206
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 12 deletions.
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -64,6 +64,9 @@ export default function ImgContextProvider({
   // 设置铅笔大小
   const [penSize, setPenSize] = useState<number>(1)
 
+  // 设置铅笔颜色
+  const [board_pen_color, setBoardPenColor] = useState('#e23922')
+
   // 获取图片
   async function getImage(searchText: string = '') {
     try {
@@ -210,6 +213,10 @@ export default function ImgContextProvider({
     setPenSize(newArr[0])
   }
 
+  // 设置铅笔颜色
+  function handleChangeBoardPenColor(color: any) {
+    setBoardPenColor(color.hex.toUpperCase())
+  }
   return (
     <ImgContext.Provider
       value={{
@@ -249,6 +256,8 @@ export default function ImgContextProvider({
         setBoardTool,
         penSize,
         handlePenSize,
+        board_pen_color,
+        handleChangeBoardPenColor,
       }}>
       {children}
     </ImgContext.Provider>

diff --git a/src/page/right/hand-writing.tsx b/src/page/right/hand-writing.tsx
@@ -10,10 +10,12 @@ interface LineInfo {
 interface ContextProp {
   boardTool: string
   penSize: number
+  board_pen_color: string
 }
 
 function HandWriting() {
-  const { boardTool, penSize } = useContext<ContextProp>(ImgContext)
+  const { boardTool, penSize, board_pen_color } =
+    useContext<ContextProp>(ImgContext)
   const [lines, setLines] = useState<LineInfo[]>([])
   const isDrawing = useRef<boolean>(false)
 
@@ -55,7 +57,7 @@ function HandWriting() {
             <Line
               key={i}
               points={line.points}
-              stroke='#df4b26'
+              stroke={board_pen_color}
               strokeWidth={Number(penSize)}
               tension={0.5}
               lineCap='round'

diff --git a/src/page/right/index.tsx b/src/page/right/index.tsx
@@ -48,6 +48,8 @@ export default function RightBoard() {
     boardTool,
     setBoardTool,
     handlePenSize,
+    board_pen_color,
+    handleChangeBoardPenColor,
   } = useContext(ImgContext)
   const { handleDownloadImage } = useContext(ImageDownloadContext)
 
@@ -366,7 +368,7 @@ export default function RightBoard() {
                   </Button>
                 </DropdownTrigger>
                 <DropdownMenu
-                  aria-label='Single a penSize'
+                  aria-label='Select a penSize'
                   variant='shadow'
                   disallowEmptySelection
                   selectionMode='single'
@@ -382,15 +384,47 @@ export default function RightBoard() {
               </Dropdown>
 
               {/* 画笔颜色 */}
-              <Button
-                isIconOnly
-                className='ml-2'>
-                <img
-                  src='/src/assets/images/penColor.svg'
-                  alt='rubber'
-                  className='w-6 h-6'
-                />
-              </Button>
+              <Dropdown>
+                <DropdownTrigger>
+                  <Button
+                    isIconOnly
+                    className='ml-2'
+                    style={{ backgroundColor: board_pen_color }}>
+                    <img
+                      src='/src/assets/images/penColor.svg'
+                      alt='rubber'
+                      className='w-6 h-6'
+                    />
+                  </Button>
+                </DropdownTrigger>
+                <DropdownMenu
+                  aria-label='Select a color'
+                  variant='flat'
+                  disallowEmptySelection
+                  selectionMode='single'>
+                  <DropdownItem textValue='color'>
+                    <div className='m-2'>
+                      <CirclePicker
+                        colors={[
+                          '#1f2937',
+                          '#e23922',
+                          '#9c27b0',
+                          '#673ab7',
+                          '#3f51b5',
+                          '#2196f3',
+                          '#03a9f4',
+                          '#00bcd4',
+                          '#009688',
+                          '#4caf50',
+                          '#8bc34a',
+                          '#cddc39',
+                        ]}
+                        onChangeComplete={handleChangeBoardPenColor}
+                      />
+                    </div>
+                  </DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
             </div>
           </CardBody>
         </Card>