收藏
回答

小程序canvas轨迹PC上的效果为什么与手机的效果不一致?

代码如下

showSignBoard(){ 
     wx.createSelectorQuery().select('#signCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        this.data.signCtx = ctx
        console.log(res)
        //const dpr = wx.getSystemInfoSync().pixelRatio
        this.data.signCanvasWidth = res[0].width
        this.data.signCanvasHeight = res[0].height
        canvas.width = this.data.signCanvasWidth
        canvas.height = this.data.signCanvasHeight
        this.data.signCtx.clearRect(0, 0, this.data.signCanvasWidth + 4, this.data.signCanvasHeight + 4)
        this.data.signCtx.imageSmoothingEnabled = false
        this.data.signCtx.lineWidth = 8;
        this.data.signCtx.strokeStyle = "#000";
        this.data.signCtx.lineCap = 'round'
      })


},
 signTouchStart: function (e) {
      this.data.signCtx.beginPath()
      this.data.signCtx.lineCap = 'round'
      this.data.signCtx.setLineDash([0,0])
      this.data.signCtx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    }


    /**
   * 记录移动点,刷新绘制
   * @param {*} e 
   */
  signTouchMove: function (e) {
    
    this.data.signCtx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
    this.data.signCtx.stroke();
    this.data.signCtx.setLineDash([0,0]);
    this.data.signCtx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);


},

wxml代码

<view style="width:60vh;height:60vh;"> 
        <text decode='true'>&nbsp;</text>
        <canvas type="2d" id="fontCanvas" canvas-id="fontCanvas" class="canvasCom" style="width:{{canvasWidth}};height:{{canvasHeight}};"></canvas>
        <canvas type="2d" bindtouchstart="riskCanvasOnTouchStart" 
        bindtouchmove="riskCanvasOnTouchMove"
        bindtouchend="riskCanvasOnTouchUp" 
        id="writeCanvas" canvas-id="writeCanvas" class="canvasCom" style="width:{{canvasWidth}};height:{{canvasHeight}};"></canvas>
      </view>


mac PC端签字的效果带虚线,有的甚至只有点没有轨迹,windows系统无法签字,没有轨迹

   手机端效果

回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容