代码如下
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'> </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系统无法签字,没有轨迹
手机端效果
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。