反应一个bug,在ios上clearRect只执行第一次,后面的没有效果,在安卓和开发者工具上正常
附上代码
that.getClipArea = (e) =>{
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
return {
x: x,
y: y
}
}
that.eraserstart = (e) => {
var area = that.getClipArea(e);
x1 = area.x - that.data.eraserData.left;
y1 = area.y - that.data.eraserData.top;
that.erasermove(e);
}
that.erasermove = (e) => {
var area = that.getClipArea(e);
var x2 = area.x - that.data.eraserData.left;
var y2 = area.y - that.data.eraserData.top;
var asin = a * Math.sin(Math.atan((y2 - y1) / (x2 - x1)));
var acos = a * Math.cos(Math.atan((y2 - y1) / (x2 - x1)));
var x3 = x1 + asin;
var y3 = y1 - acos;
var x4 = x1 - asin;
var y4 = y1 + acos;
var x5 = x2 + asin;
var y5 = y2 - acos;
var x6 = x2 - asin;
var y6 = y2 + acos;
ctxEraser.save();
ctxEraser.beginPath();
ctxEraser.arc(x2, y2, a, 0, 2 * Math.PI);
ctxEraser.closePath();
ctxEraser.clip();
ctxEraser.clearRect(0, 0, that.data.eraserChangableData.scaleSize.width, that.data.eraserChangableData.scaleSize.height);
ctxEraser.restore();
ctxEraser.save();
ctxEraser.beginPath();
ctxEraser.moveTo(x3, y3);
ctxEraser.lineTo(x5, y5);
ctxEraser.lineTo(x6, y6);
ctxEraser.lineTo(x4, y4);
ctxEraser.closePath();
ctxEraser.clip();
ctxEraser.clearRect(0, 0, that.data.eraserChangableData.scaleSize.width, that.data.eraserChangableData.scaleSize.height);
ctxEraser.restore();
ctxEraser.draw(true)
x1 = x2;
y1 = y2;
console.log(5);
}