我正在尝试使用固定大小的 Canvas 制作 Canvas 绘图应用程序 - 但能够在 Canvas 上滚动以绘制根据用户的屏幕尺寸可能不可见的不同点。
它可以在桌面上滚动,但我正在尝试在移动设备上实现两指滚动。
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
关于javascript - 如何在允许单指绘图的同时允许两指滚动 HTML Canvas 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40443283/