小程序画布 在iphone15promax上不能画出连续的线
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html [图片] iphone15promax不能画出连续的线,只能一段一段的。 [图片]iphone13 可以画出连续的线。 代码如下: //wxml
<canvas canvas-id="signCanvas" class="canvasStyle"
bindtouchstart="onTouchStart"
bindtouchmove="onTouchMove"
bindtouchend="onTouchEnd"></canvas>
//script
Page({
startX: 0, // Starting X coordinate
startY: 0, // Starting Y coordinate
isDrawing: false, // Flag to check if drawing is happening
ctx: null, // Canvas context
onLoad: function() {
this.ctx = wx.createCanvasContext('signCanvas', this);
},
onTouchStart: function(e) {
this.isDrawing = true;
this.startX = e.touches[0].x;
this.startY = e.touches[0].y;
},
onTouchMove: function(e) {
if (!this.isDrawing) return;
let x = e.touches[0].x;
let y = e.touches[0].y;
this.ctx.moveTo(this.startX, this.startY);
this.ctx.lineTo(x, y);
this.ctx.stroke();
this.startX = x;
this.startY = y;
this.ctx.draw(true); // Add true to keep drawing on the same canvas without clearing previous content
},
onTouchEnd: function(e) {
this.isDrawing = false;
},
clearCanvas: function() {
this.ctx.clearRect(0, 0, 300, 200);
this.ctx.draw();
},
saveCanvas: function() {
wx.canvasToTempFilePath({
canvasId: 'signCanvas',
success: function(res) {
// res.tempFilePath is the temporary file path of the canvas image
console.log(res.tempFilePath);
// You can save this path or upload the image as needed
}
}, this);
}
});
//css
.canvasStyle {
border: 1px solid #000; /* Basic border for visibility */
width: 300px; /* Width of the canvas */
height: 200px; /* Height of the canvas */
}