From fe27d0b64dc7506cffa72ef4cfc083539f6180ff Mon Sep 17 00:00:00 2001
From: luhuadong <luhuadong@163.com>
Date: Wed, 22 May 2024 16:41:14 +0800
Subject: [PATCH] feat: support text rotation

---
 build/script.js   | 17 +++++++++--------
 index.html        |  3 +++
 src/script.coffee | 13 ++++++++-----
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/build/script.js b/build/script.js
index 8a94865..30b596d 100644
--- a/build/script.js
+++ b/build/script.js
@@ -6,7 +6,7 @@
     return document.querySelector(sel);
   };
 
-  inputItems = ['text', 'color', 'alpha', 'space', 'size'];
+  inputItems = ['text', 'color', 'alpha', 'angle', 'space', 'size'];
 
   input = {};
 
@@ -70,10 +70,8 @@
         ctx = canvas.getContext('2d');
         ctx.drawImage(img, 0, 0);
         redraw = function() {
-          ctx.rotate(315 * Math.PI / 180);
           ctx.clearRect(0, 0, canvas.width, canvas.height);
-          ctx.drawImage(img, 0, 0);
-          return ctx.rotate(45 * Math.PI / 180);
+          return ctx.drawImage(img, 0, 0);
         };
         drawText();
         graph.innerHTML = '';
@@ -104,7 +102,7 @@
   };
 
   drawText = function() {
-    var i, j, k, l, margin, ref, ref1, ref2, step, textSize, width, x, y;
+    var i, j, k, l, margin, ref, ref1, ref2, ref3, step, textSize, width, x, y;
     if (canvas == null) {
       return;
     }
@@ -113,8 +111,10 @@
       redraw();
     } else {
       textCtx = canvas.getContext('2d');
-      textCtx.rotate(45 * Math.PI / 180);
     }
+    textCtx.save();
+    textCtx.translate(canvas.width / 2, canvas.height / 2);
+    textCtx.rotate(input.angle.value * Math.PI / 180);
     textCtx.fillStyle = makeStyle();
     textCtx.font = 'bold ' + textSize + 'px -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif';
     width = (textCtx.measureText(input.text.value)).width;
@@ -122,11 +122,12 @@
     margin = (textCtx.measureText('啊')).width;
     x = Math.ceil(step / (width + margin));
     y = Math.ceil((step / (input.space.value * textSize)) / 2);
-    for (i = k = 0, ref = x; (0 <= ref ? k <= ref : k >= ref); i = 0 <= ref ? ++k : --k) {
-      for (j = l = ref1 = -y, ref2 = y; (ref1 <= ref2 ? l <= ref2 : l >= ref2); j = ref1 <= ref2 ? ++l : --l) {
+    for (i = k = ref = -x, ref1 = x; (ref <= ref1 ? k <= ref1 : k >= ref1); i = ref <= ref1 ? ++k : --k) {
+      for (j = l = ref2 = -y, ref3 = y; (ref2 <= ref3 ? l <= ref3 : l >= ref3); j = ref2 <= ref3 ? ++l : --l) {
         textCtx.fillText(input.text.value, (width + margin) * i, input.space.value * textSize * j);
       }
     }
+    textCtx.restore();
   };
 
   image.addEventListener('change', function() {
diff --git a/index.html b/index.html
index 9a76149..cf9615b 100644
--- a/index.html
+++ b/index.html
@@ -42,6 +42,9 @@ <h1>图片水印打码工具</h1>
         <label for="alpha">透明度</label>
         <input type="range" id="alpha" min="0" max="1" step="0.05" autocomplete="off" value="0.15"><br>
         
+        <label for="angle">角度</label>
+        <input type="range" id="angle" min="-90" max="90" step="3" autocomplete="off" value="45"><br>
+
         <label for="space">间隔</label>
         <input type="range" id="space" min="1" max="8" step="0.2" autocomplete="off" value="4"><br>
         
diff --git a/src/script.coffee b/src/script.coffee
index 85f2a46..16ee9ba 100644
--- a/src/script.coffee
+++ b/src/script.coffee
@@ -1,6 +1,6 @@
 $ = (sel) -> document.querySelector sel
 
-inputItems = ['text', 'color', 'alpha', 'space', 'size']
+inputItems = ['text', 'color', 'alpha', 'angle', 'space', 'size']
 input = {}
 
 image = $ '#image'
@@ -47,10 +47,8 @@ readFile = ->
             ctx.drawImage img, 0, 0
 
             redraw = ->
-                ctx.rotate 315 * Math.PI / 180
                 ctx.clearRect 0, 0, canvas.width, canvas.height
                 ctx.drawImage img, 0, 0
-                ctx.rotate 45 * Math.PI / 180
             
             drawText()
 
@@ -92,8 +90,11 @@ drawText = ->
         redraw()
     else
         textCtx = canvas.getContext '2d'
-        textCtx.rotate 45 * Math.PI / 180
     
+    textCtx.save()
+    textCtx.translate(canvas.width / 2, canvas.height / 2)
+    textCtx.rotate (input.angle.value) * Math.PI / 180
+
     textCtx.fillStyle = makeStyle()
     textCtx.font = 'bold ' + textSize + 'px -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif'
     
@@ -104,9 +105,11 @@ drawText = ->
     x = Math.ceil step / (width + margin)
     y = Math.ceil (step / (input.space.value * textSize)) / 2
 
-    for i in [0..x]
+    for i in [-x..x]
         for j in [-y..y]
             textCtx.fillText input.text.value, (width + margin) * i, input.space.value * textSize * j
+    
+    textCtx.restore()
     return