如何在允许单指绘图的同时允许双指滚动HTML画布元素?

时间:2016-11-05 21:15:19

标签: javascript canvas html5-canvas touch

我正在尝试使用固定大小的画布制作画布绘图应用程序 - 但能够在画布上滚动以根据用户的屏幕尺寸在不同的点上绘制。

它按照我希望的方式滚动到桌面上,但我试图在手机上实现两个手指滚动。

http://jsbin.com/qugabuh/edit

在我的触摸绘图功能中,我尝试了以下内容:

java.lang.ClassNotFoundException

这似乎在我的Android平板电脑上运行正常(虽然如果我不能在同一时间将两根手指抬起,有时会划线),但在我的iPhone上根本没有。

1 个答案:

答案 0 :(得分:0)

尝试使用标志来控制开始事件触摸。

    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