添加图片形状：圆角/方形

slince-zero · Apr 30, 2024 · 5c0398d · 5c0398d
1 parent 3894980
commit 5c0398d
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 34 deletions.
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -38,6 +38,9 @@ export default function ImgContextProvider({
   // 图片比例
   const [proportionValue, setProportionValue] = useState('aspect-[16/9]')
 
+  // 图片形状（圆角或者方形）
+  const [isCircle, setIsCircle] = useState(true)
+
   // 作者标签值
   const [authorValue, setAuthorValue] = useState('@IMker')
 
@@ -130,6 +133,11 @@ export default function ImgContextProvider({
     setProportionValue(e.target.value)
   }
 
+  // 选择形状
+  function handleIsCircle() {
+    setIsCircle(!isCircle)
+  }
+
   // 切换字体
   function handleChangeFont(e: React.ChangeEvent<HTMLSelectElement>) {
     setFontValue(e.target.value)
@@ -258,6 +266,8 @@ export default function ImgContextProvider({
         handlePenSize,
         board_pen_color,
         handleChangeBoardPenColor,
+        isCircle,
+        handleIsCircle,
       }}>
       {children}
     </ImgContext.Provider>

diff --git a/src/page/center/index.tsx b/src/page/center/index.tsx
@@ -16,6 +16,7 @@ export default function CenterBoard() {
     hexColor,
     opacityValue,
     proportionValue,
+    isCircle,
   } = useContext(ImgContext)
 
   const { imageContainerRef } = useContext(ImageDownloadContext)
@@ -52,7 +53,12 @@ export default function CenterBoard() {
             <img
               src={uploadCurrentImage?.urls?.regular}
               onLoad={() => setIsLoading(false)}
-              className='rounded-3xl object-cover h-full w-full'
+              style={{
+                objectFit: 'cover',
+                height: '100%',
+                width: '100%',
+              }}
+              className={!isCircle ? '' : 'rounded-3xl'}
             />
           )}
         </div>
@@ -65,7 +71,12 @@ export default function CenterBoard() {
               src={imgInfo?.urls?.regular}
               alt={imgInfo?.alt_description}
               onLoad={() => setIsLoading(false)}
-              className='rounded-3xl object-cover h-full w-full'
+              style={{
+                objectFit: 'cover',
+                height: '100%',
+                width: '100%',
+              }}
+              className={!isCircle ? '' : 'rounded-3xl'}
             />
           )}
         </div>

diff --git a/src/page/right/index.tsx b/src/page/right/index.tsx
@@ -57,6 +57,8 @@ export default function RightBoard() {
     handlePenSize,
     board_pen_color,
     handleChangeBoardPenColor,
+    isCircle,
+    handleIsCircle,
   } = useContext(ImgContext)
   const { handleDownloadImage } = useContext(ImageDownloadContext)
 
@@ -176,10 +178,6 @@ export default function RightBoard() {
                 variant='flat'
                 target='_blank'
                 href='https://github.com/slince-zero/img-maker'>
-                {/* github logo */}
-                {/* <i
-                  className={`devicon-github-plain text-[#2F6EE7] dev-icon text-xl`}
-                /> */}
                 GitHub
               </Button>
             </NavbarItem>
@@ -189,34 +187,47 @@ export default function RightBoard() {
 
       <div className='flex-grow overflow-y-scroll overflow-x-hidden justify-center flex flex-wrap p-2'>
         {/* 比例，控制图片大小 */}
-        <Select
-          label='比例'
-          defaultSelectedKeys={[proportionValue]}
-          onChange={handleProportionValue}
-          className='max-w-xs py-2'>
-          <SelectSection
-            showDivider
-            title='横屏'>
-            {img_aspect_x_list.map((item) => (
-              <SelectItem
-                key={item.value}
-                value={item.value}>
-                {item.label}
-              </SelectItem>
-            ))}
-          </SelectSection>
-          <SelectSection
-            showDivider
-            title='竖屏'>
-            {img_aspect_y_list.map((item) => (
-              <SelectItem
-                key={item.value}
-                value={item.value}>
-                {item.label}
-              </SelectItem>
-            ))}
-          </SelectSection>
-        </Select>
+        <div className='flex flex-row w-full items-center'>
+          <Select
+            label='比例'
+            defaultSelectedKeys={[proportionValue]}
+            onChange={handleProportionValue}
+            className='max-w-xs py-2'>
+            <SelectSection
+              showDivider
+              title='横屏'>
+              {img_aspect_x_list.map((item) => (
+                <SelectItem
+                  key={item.value}
+                  value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectSection>
+            <SelectSection
+              showDivider
+              title='竖屏'>
+              {img_aspect_y_list.map((item) => (
+                <SelectItem
+                  key={item.value}
+                  value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectSection>
+          </Select>
+
+          <Select
+            label='形状'
+            defaultSelectedKeys={[isCircle ? 'circle' : 'square']}
+            onChange={handleIsCircle}
+            className='max-w-xs ml-2 py-2'>
+            <SelectSection>
+              <SelectItem key='circle'>圆角</SelectItem>
+              <SelectItem key='square'>方形</SelectItem>
+            </SelectSection>
+          </Select>
+        </div>
         <Divider />
 
         {/* 遮罩+颜色选择 */}