我正在尝试制作一个画布绘制应用程序与固定大小的画布-但有能力在画布上滚动绘制不同的点,根据用户的屏幕大小可能不可见。
它像我希望的那样在桌面上滚动,但我正试图在移动设备上实现两指滚动。
http://jsbin.com/qugabuh/edit在我的触摸绘制函数中,我尝试了以下操作:
const startTouch = function(e) {
if (e.targetTouches.length < 2) {
ctx.beginPath();
x = e.changedTouches[0].pageX + content.scrollLeft;
y = e.changedTouches[0].pageY - 34 + content.scrollTop;
ctx.moveTo(x, y);
}
};
const moveTouch = function(e) {
if (e.targetTouches.length < 2) {
e.preventDefault();
x = e.changedTouches[0].pageX + content.scrollLeft;
y = e.changedTouches[0].pageY - 34 + content.scrollTop;
ctx.lineTo(x, y);
ctx.stroke();
}
};
这似乎在我的Android平板电脑上工作得很好(虽然有时如果我不同时抬起两个手指会画出线条),但在我的iPhone上根本不行。
尝试使用标志来控制启动事件触摸。
const startTouch = function(e) {
if (e.target === canvas && e.touches.length === 1) {
ctx.beginPath();
x = e.changedTouches[0].pageX + content.scrollLeft;
y = e.changedTouches[0].pageY - 34 + content.scrollTop;
ctx.moveTo(x, y);
drawable = true;
}else{
drawable = false;
}
};
看:https://codepen.io/Luis4raujo/pen/RwoZVXE