Skip to content

Commit

Permalink
feat: support text rotation
Browse files Browse the repository at this point in the history
  • Loading branch information
luhuadong committed May 22, 2024
1 parent 3d84eea commit fe27d0b
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 13 deletions.
17 changes: 9 additions & 8 deletions build/script.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
13 changes: 8 additions & 5 deletions src/script.coffee
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
$ = (sel) -> document.querySelector sel

inputItems = ['text', 'color', 'alpha', 'space', 'size']
inputItems = ['text', 'color', 'alpha', 'angle', 'space', 'size']
input = {}

image = $ '#image'
Expand Down Expand Up @@ -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()

Expand Down Expand Up @@ -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'

Expand All @@ -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


Expand Down

0 comments on commit fe27d0b

Please sign in to comment.