clearRect在ios真机只执行一次
发布于 7 年前 作者 wangjing 15065 次浏览 来自 问答

反应一个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);

}

回到顶部