带有滚动条的 HTML Canvas 触摸事件答案

【问题标题】：HTML Canvas Touch events with Scrollbar带有滚动条的 HTML Canvas 触摸事件
【发布时间】：2015-01-29 11:46:57
【问题描述】：

嗨，

我正在使用 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);
                    }

【问题讨论】：

标签： javascript android html canvas

【解决方案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
    };

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

【讨论】：