使用的是Canvas 2D 接口
安卓上应该正常,同事的iphone14上得第二次按才能出笔画
代码片段:https://developers.weixin.qq.com/s/Lo7WbemB7LI2
下面是bindtouchstart bindtouchmove的函数
// 开始签名
_start(e) {
this.setData({
canvasPosX: e.changedTouches[0].x,
canvasPosY: e.changedTouches[0].y,
});
this.data.canvasContext.lineWidth = 5;
this.data.canvasContext.moveTo(
this.data.canvasPosX,
this.data.canvasPosY
);
},
// 开始移动
_move(e) {
const { canvasContext, canvasPosX, canvasPosY } = this.data;
const { x: curX, y: curY } = e.changedTouches[0];
const deltaX = Math.abs(canvasPosX - curX);
const deltaY = Math.abs(canvasPosY - curY);
// 相差大于3像素的时候作二阶贝塞尔曲线
if (deltaX >= 3 || deltaY >= 3) {
// 前后两点中心点
const centerX = (canvasPosX + curX) / 2;
const centerY = (canvasPosY + curY) / 2;
//这里以前一点作为控制点,中心点作为终点,起始点为上一次的中点,很流畅啊!
canvasContext.quadraticCurveTo(
canvasPosX,
canvasPosY,
centerX,
centerY
);
canvasContext.stroke();
this.setData({
canvasPosX: curX,
canvasPosY: curY,
});
}
this.setData({
canvasPosX: e.changedTouches[0].x,
canvasPosY: e.changedTouches[0].y,
});
canvasContext.lineTo(canvasPosX, canvasPosY);
canvasContext.stroke();
},
我这边根据代码片段无法复现可以提供一下复现视频吗