fix: 修复水印展示不全 (#385)

nihaojob · May 12, 2024 · 92ca197 · 92ca197
1 parent caf9378
commit 92ca197
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/packages/core/plugin/WaterMarkPlugin.ts b/packages/core/plugin/WaterMarkPlugin.ts
@@ -118,22 +118,28 @@ class WaterMarkPlugin {
       ctx = null;
     },
     [POSITION.full]: (width: number, height: number, cb: (imgString: string) => void) => {
+      const angle = -30; // 按逆时针30度算
+      const R = (angle * Math.PI) / 180;
+      const font = `${this.drawOps.size}px ${this.drawOps.fontFamily}`;
       let waterCanvas: HTMLCanvasElement | null = this.createCanvas(width, height);
       let ctx: CanvasRenderingContext2D | null = waterCanvas.getContext('2d')!;
+      ctx.font = font;
       const textW = ctx.measureText(this.drawOps.text).width + 40;
       let patternCanvas: HTMLCanvasElement | null = this.createCanvas(
-        this.drawOps.isRotate ? textW * 2 : textW, // 若有倾斜，那么斜边都会大于直角边 按30度算2倍(简单)
-        this.drawOps.isRotate ? textW + 20 : this.drawOps.size + 20
+        this.drawOps.isRotate ? textW * Math.abs(Math.cos(R)) + this.drawOps.size : textW,
+        this.drawOps.isRotate
+          ? textW * Math.abs(Math.sin(R)) + this.drawOps.size
+          : this.drawOps.size + 20
       );
       document.body.appendChild(patternCanvas);
       let ctxWater: CanvasRenderingContext2D | null = patternCanvas.getContext('2d')!;
       ctxWater.textAlign = 'left';
       ctxWater.textBaseline = 'top';
-      ctxWater.font = `${this.drawOps.size}px ${this.drawOps.fontFamily}`;
+      ctxWater.font = font;
       ctxWater.fillStyle = `${this.drawOps.color}`;
       if (this.drawOps.isRotate) {
-        ctxWater.translate(0, textW - 10);
-        ctxWater.rotate((-30 * Math.PI) / 180); // 简单例子 按30度算
+        ctxWater.translate(0, textW * Math.abs(Math.sin(R)));
+        ctxWater.rotate(R);
         ctxWater.fillText(this.drawOps.text, 0, 0);
       } else {
         ctxWater.fillText(this.drawOps.text, 10, 10);