HTML Canvas使用滚动条触摸事件

Question

您好，

我正在使用2 HTML Canvas创建启用触控的签名应用。在下面附带的屏幕截图中，我可以在第一个画布上和第二个画布上的平板电脑上签名，而无需滚动右侧的滚动条。如果我滚动并将第二个画布完全对焦，那么我的签名将停止在第二个画布上工作。似乎在滚动时我没有很好地计算坐标。

这是我用来获取坐标并将其传递给我的Drawer方法的代码。

                   var coors = {
                        x: event.targetTouches[0].pageX ,
                        y: event.targetTouches[0].pageY 
                    };

                    // Now we need to get the offset of the canvas location
                    var obj = signCanvas;

                    if (obj.offsetParent) {

                        do {
                            coors.x -= obj.offsetLeft;
                            coors.y -= obj.offsetTop;
                        }

                        while ((obj = obj.offsetParent) != null);
                    }

Answer 1

请尝试以下方法：

   var rect = signCanvas.getBoundingClientRect();  // absolute position of canvas
   var coors = {
        x: event.targetTouches[0].clientX - rect.left,
        y: event.targetTouches[0].clientY - rect.top
    };

当然，注释掉/删除坐标的其余调整代码。