Merge pull request #10 from Kujiale-Mobile/canvas2d

Canvas2d

painter.js

@@ -46,7 +46,7 @@ Component({
     dancePalette: {
       type: Object,
       observer: function (newVal, oldVal) {
-        if (!this.isEmpty(newVal)) {
+        if (!this.isEmpty(newVal) && !this.properties.use2D) {
           this.initDancePalette(newVal);
         }
       },
@@ -72,7 +72,7 @@ Component({
     action: {
       type: Object,
       observer: function (newVal, oldVal) {
-        if (newVal && !this.isEmpty(newVal)) {
+        if (newVal && !this.isEmpty(newVal) && !this.properties.use2D) {
           this.doAction(newVal, (callbackInfo) => {
             this.movingCache = callbackInfo
           }, false, true)
@@ -232,6 +232,9 @@ Component({
     },
 
     doAction(action, callback, isMoving, overwrite) {
+      if (this.properties.use2D) {
+        return;
+      }
       let newVal = null
       if (action) {
         newVal = action.view
@@ -622,6 +625,9 @@ Component({
     },
 
     initDancePalette() {
+      if (this.properties.use2D) {
+        return;
+      }
       this.isDisabled = true;
       this.initScreenK();
       this.downloadImages(this.properties.dancePalette).then(async (palette) => {
@@ -656,36 +662,50 @@ Component({
 
     startPaint() {
       this.initScreenK();
-
-      this.downloadImages(this.properties.palette).then(async (palette) => {
       const {
         width,
         height
-        } = palette;
+      } = this.properties.palette;
 
       if (!width || !height) {
         console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
         return;
       }
 
+      let needScale = false;
       // 生成图片时，根据设置的像素值重新绘制
+      if (width.toPx() !== this.canvasWidthInPx) {
         this.canvasWidthInPx = width.toPx();
+        needScale = this.properties.use2D;
+      }
       if (this.properties.widthPixels) {
         setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx)
         this.canvasWidthInPx = this.properties.widthPixels
       }
 
+      if (this.canvasHeightInPx !== height.toPx()) {
         this.canvasHeightInPx = height.toPx();
+        needScale = needScale || this.properties.use2D;
+      }
       this.setData({
         photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
-        });
-        this.photoContext || (this.photoContext = await this.getCanvasContext(this.properties.use2D, 'photo'));
-
+      }, function () {
+        this.downloadImages(this.properties.palette).then(async palette => {
+          if (!this.photoContext) {
+            this.photoContext = await this.getCanvasContext(this.properties.use2D, 'photo');
+          }
+          if (needScale) {
+            const scale = getApp().systemInfo.pixelRatio;
+            this.photoContext.width = this.canvasWidthInPx * scale;
+            this.photoContext.height = this.canvasHeightInPx * scale;
+            this.photoContext.scale(scale, scale);
+          }
           new Pen(this.photoContext, palette).paint(() => {
             this.saveImgToLocal();
           });
           setStringPrototype(this.screenK, this.properties.scaleRatio);
         });
+      });
     },
 
     downloadImages(palette) {
@@ -784,10 +804,6 @@ Component({
             that.canvasNode = res[0].node;
             const ctx = that.canvasNode.getContext('2d');
             const wxCanvas = new WxCanvas('2d', ctx, id, true, that.canvasNode);
-            const dpr = Math.min(2, getApp().systemInfo.pixelRatio)
-            wxCanvas.width = res[0].width * dpr
-            wxCanvas.height = res[0].height * dpr
-            wxCanvas.scale(dpr, dpr)
             resolve(wxCanvas);
           });
         } else {

painter.wxml

@@ -14,8 +14,8 @@
       disable-scroll="{{true}}" />
   </block>
   <block wx:if="{{use2D}}">
-    <canvas type="2d" id="photo" style="{{photoStyle}};position: absolute; left: -9999px; top: -9999rpx;" />
-    <canvas type="2d" id="bottom" style="{{painterStyle}};position: absolute;" />
+    <canvas type="2d" id="photo" style="{{photoStyle}};" />
+    <!-- <canvas type="2d" id="bottom" style="{{painterStyle}};position: absolute;" />
     <canvas type="2d" id="k-canvas" style="{{painterStyle}};position: absolute;" />
     <canvas type="2d" id="top" style="{{painterStyle}};position: absolute;" />
     <canvas 
@@ -26,6 +26,6 @@
       bindtouchmove="onTouchMove"
       bindtouchend="onTouchEnd"
       bindtouchcancel="onTouchCancel"
-      disable-scroll="{{true}}" />
+      disable-scroll="{{true}}" /> -->
   </block>
 </view>