增加旋转角度

index/drawCanvas.js

@@ -6,6 +6,7 @@ class DrawCanvas {
     this._executionArr = []
     this._pathArr = []
     this._style = null
+    this._matrix = null
   }
 
   _init({ width, height, canvas, dicTypePath = '' }) {
@@ -15,6 +16,7 @@ class DrawCanvas {
     canvas.height = height
     this._canvas = canvas
     this._ctx = ctx
+    this._matrix = ctx.getTransform() //矩阵
     this._executionArr = [] //每移动一笔的数据
     this._pathArr = [] //抬起落下为一笔
     if (dicTypePath) {
@@ -66,16 +68,17 @@ class DrawCanvas {
   }
 
   // 切换画笔
-  changeBrush(url = '', w = 10, h = 10) {
+  changeBrush(url = '', w = 10, h = 10, angle = 0) {
     if (!url) return
     const img = this._canvas.createImage()
     img.onload = () => {
       const fillStyle = this._ctx.createPattern(img, 'repeat')
-      // 矩阵变化
-      const matrix = this._ctx.getTransform()
-      matrix.rotateSelf(-45)
-      console.log(11111,matrix);
-      fillStyle.setTransform(matrix)
+      // 旋转 + 矩阵变化
+      if (angle && this._matrix) {
+        this._matrix.rotateSelf(angle)
+        fillStyle.setTransform(this._matrix)
+      }
+
       this._style = { fillStyle, w, h }
     }
     img.src = url

index/index.js

@@ -20,7 +20,8 @@ Page({
       2: 'M174.562965,0.513209692 C221.690071,-0.00711210434 258.74832,14.9447077 286.260378,35.6782336 C324.994127,64.8686054 344.820323,105.514125 347.165866,130.556406 C351.169981,173.306492 350.923005,204.505495 338.863366,216.40901 C332.465594,222.723955 293.34237,247.50004 156.505785,247.50004 C124.380762,247.273198 88.5993566,242.423806 60.1185245,235.625016 C31.7537688,228.853934 10.5049705,220.211836 7.77411598,212.201523 C0.968039201,195.148672 -3.37568328,153.116559 5.40190246,119.570011 C11.4412002,98.8625327 30.5685051,60.0564728 69.9004626,32.3721832 C95.541554,14.3243807 129.772401,1.00773417 174.562965,0.513209692 Z',
       1: 'M69.4545878,34.6718448 C96.0319839,14.5464002 130.907219,-0.146079872 174.56443,0.522007913 C220.382312,1.22316053 255.607386,15.5063115 281.851378,35.1514114 C318.898628,62.8833568 338.052622,101.292047 343.850748,127.226896 C348.964999,150.102793 350.773132,170.630546 348.624737,186.798399 C346.628206,201.8234 341.223483,213.080679 331.813382,218.873688 C331.442887,219.101769 331.054704,219.344664 330.644655,219.601247 C319.902715,226.322867 294.07793,242.444674 177.407992,247.500112 C92.0383303,246.776789 19.7179823,226.018176 9.91797058,212.791135 C-0.632619328,198.551039 -1.84542038,163.783447 3.98419444,129.673937 C7.51590663,109.009626 28.7726098,65.4778309 69.4545878,34.6718448 Z',
       0: 'M175.000036,0.5 C222.664535,0.5 265.865535,21.1909654 297.358963,54.7296453 C328.90593,88.3253418 348.705559,134.812441 349.476653,186.303442 L349.490723,188.280824 L349.5,247.5 L0.5,247.5 L0.5,188.283766 C0.787224943,136.359137 20.4197058,89.3998566 51.9881066,55.4283849 C83.5364037,21.4785471 127.005458,0.5 175.000036,0.5 Z'
-    }
+    },
+    angle: 0
   },
   drawCanvas: new DrawCanvas(),
   onLoad() {
@@ -66,7 +67,7 @@ Page({
   changeTool(e) {
     const { url, w, h } = e.target.dataset.item
     if (!url) return
-    this.drawCanvas.changeBrush(url, w, h)
+    this.drawCanvas.changeBrush(url, w, h, this.data.angle)
   },
 
   save() {

index/index.wxml

@@ -1,11 +1,14 @@
-<canvas type="2d" id="canvas" disable-scroll bindtouchmove="move" bindtouchend="end"  bindtouchstart="start"></canvas>
+<canvas type="2d" id="canvas" disable-scroll bindtouchmove="move" bindtouchend="end" bindtouchstart="start"></canvas>
 
 <view class="tool">
   <block wx:for="{{list}}" wx:key="item">
     <image src="{{item.url}}" mode="aspectFit" data-item="{{item}}" bind:tap="changeTool" />
   </block>
 </view>
-<view>
+<view class="btns">
+  <view>
+    旋转角度： <input type="text" model:value="{{angle}}"/>
+  </view>
   <button bind:tap="back">撤销</button>
   <button bind:tap="clear">清空</button>
   <button bind:tap="save">保存</button>

index/index.wxss

@@ -13,4 +13,9 @@ canvas{
   width: 100rpx;
   height: 100rpx;
   margin: 0 10rpx;
+}
+.btns>view:first-child{
+  display: flex;
+  align-items: center;
+  padding: 10rpx 0;
 }