乐趣区

关于canvas:支付宝小程序-横屏电子版签字-canvas实现

jiezi

背景形容：业务须要在支付宝小程序横屏签字，然而目前支付宝不反对横屏，所以只能用款式疏导用户
实现成果：

思路：
应用 transform 和 translate 去旋转页面，这样就能满足款式的需要，看着是没啥问题，然而当在 canvas 上绘画的时候，就会看到，我写的是一横，展现确实是一竖
起因：页面是旋转了，然而坐标零碎没有扭转

解决方案：调整坐标零碎
可借由 rotate 逆向旋转 90°，而后由 translate 平移坐标系。

context.rotate((degree * Math.PI) / 180);
switch (degree) {
  // 页面顺时针旋转 90°后，画布左上角的原点地位落到了屏幕的右上角（此时宽高调换），围绕原点逆时针旋转 90°后，画布与原地位垂直，居于屏幕右侧，须要向左平移画布以后高度雷同的间隔。case -90:
    context.translate(-height, 0);
    break;
  // 页面逆时针旋转 90°后，画布左上角的原点地位落到了屏幕的左下角（此时宽高调换），围绕原点顺时针旋转 90°后，画布与原地位垂直，居于屏幕下侧，须要向上平移画布以后宽度雷同的间隔。case 90:
    context.translate(0, -width);
    break;
  // 页面顺逆时针旋转 180°回到了同一个地位（即页面倒立），画布左上角的原点地位落到了屏幕的右下角（此时宽高不变），围绕原点反方向旋转 180°后，画布与原地位平行，居于屏幕右侧的下侧，须要向左平移画布宽度雷同的间隔，向右平移画布高度的间隔。case -180:
  case 180:
    context.translate(-width, -height);
}

上面是我的代码：

<canvas ref="cxt" id="xfCanvas" class="xfcanvas" :style="{height: canvasw -52+'px', width:'100%'}"
      @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :disable-scroll="true">
    </canvas>
    <view class="btn">
      <view @click="resetImg"> 重签 </view>
      <view @click="goSignDate"> 下一步签日期 </view>
    </view>
    mounted() {
      let that = this;
      uni.getSystemInfo({success: function(res) {
          that.canvasw = res.windowWidth;
          that.canvash = res.windowHeight;
          console.log(that.canvasw, that.canvash, '画布尺寸');
          that.$nextTick(() => {that.ctx = uni.createCanvasContext('xfCanvas');
//======== 重点在这里  扭转坐标零碎，52 的高度是我操作按钮的高度 =============
            that.ctx.rotate((-90 * Math.PI) / 180); 
            that.ctx.translate(-that.canvash + that.canvasw + 52, 0)
            that.ctx.setStrokeStyle('#000'); // 色彩
            that.ctx.setLineWidth(8); // 粗细
            that.ctx.setLineCap('round'); // 线头形态
            that.ctx.setLineJoin('round'); // 交叉处形态
          });
        },
      });
    },

methods：{touchStart(e) {console.log('+++++++++++ 刚开始触摸');
        this.startX = e.changedTouches[0].x;
        this.startY = e.changedTouches[0].y;
        this.ctx.beginPath();
        this.ctx.moveTo(this.startX, this.startY); // 找到终点
      },
      touchMove(e) {console.log('+++++++++++ 触摸进行中');
        this.isSign = true
        let moveX = e.changedTouches[0].x;
        let moveY = e.changedTouches[0].y;
        this.ctx.lineTo(moveX, moveY); // 找到起点
        this.ctx.stroke(); // 描述门路
        this.ctx.draw(true, function(ret) {});
      },
      touchEnd() {
        this.isSign = true
        console.log('+++++ 完结啦', this.ctx);
      },}

最初实现成果


折腾了好一会，参考了大佬的文档，受益匪浅，原文链接：https://segmentfault.com/a/11…

退出移动版