feat: 完善水印 hooks

FightingDesign · Sep 22, 2023 · 98aef1e · 98aef1e
1 parent 018815a
commit 98aef1e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/packages/fighting-design/_hooks/use-watermark/index.ts b/packages/fighting-design/_hooks/use-watermark/index.ts
@@ -1,7 +1,20 @@
 import { computed } from 'vue'
+import type { WatermarkProps } from '../../watermark'
+import type { ComputedRef } from 'vue'
 
-export const useWatermark = (prop) => {
-  return computed(() => {
+export type UseWatermarkReturn = ComputedRef<{
+  base64: string
+  size: number
+}>
+
+/**
+ * 生成水印图片
+ * 
+ * @param { Object } prop prop 参数
+ * @returns 
+ */
+export const useWatermark = (prop: WatermarkProps): UseWatermarkReturn => {
+  return computed((): { base64: string; size: number } => {
     /**
     * 创建一个 canvas
     *
@@ -30,10 +43,24 @@ export const useWatermark = (prop) => {
 
     ctx.font = font
 
-    const { width } = ctx.measureText(prop.text)
+    const { width } = ctx.measureText(prop.content)
+
+    const cavasSize = Math.max(100, width) * prop.gap * devicePixeRatio
 
-    // const cavasSize = Math.
+    canvas.width = cavasSize
+    canvas.height = cavasSize
+
+    ctx.translate(canvas.width / 2, canvas.height / 2)
+    ctx.rotate((Math.PI / 190) * -45)
+    ctx.fillStyle = '#111'
+    ctx.font = font
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(prop.content, 0, 0)
 
-    return {}
+    return {
+      base64: canvas.toDataURL(),
+      size: cavasSize / devicePixeRatio
+    } as const
   })
 }
diff --git a/packages/fighting-design/watermark/src/props.ts b/packages/fighting-design/watermark/src/props.ts
@@ -1,7 +1,6 @@
 import {
   setBooleanProp,
   setStringProp,
-  setStringNumberProp,
   setNumberProp
 } from '../../_utils'
 import type { ExtractPropTypes } from 'vue'
@@ -13,8 +12,9 @@ export const Props = {
   width: setNumberProp(280),
   /** 水印的高度 */
   height: setNumberProp(200),
+  gap: setNumberProp(20),
   /** 文字大小 */
-  fontSize: setStringNumberProp('30px'),
+  fontSize: setNumberProp(24),
   /** 文字颜色 */
   fontColor: setStringProp<string>('#333'),
   /** 自定义图片水印 */