画布在移动网络上获得触摸位置

Question

我有一个代码,它将(x,y)坐标中的一条线拖到新的鼠标(x,y)坐标上.这在桌面浏览器中运行良好,但由于某种原因,它在移动浏览器中不起作用.我添加了触摸事件监听器,但我想坐标是一些如何变得不正确.继承我的代码:

   function getMouse(e) {
     var element = canvas, offsetX = 0, offsetY = 0;
     if (element.offsetParent) {
       do {
         offsetX += element.offsetLeft;
         offsetY += element.offsetTop;
       } while ((element = element.offsetParent));
     }

     mx = (e.pageX - offsetX) - LINE_WIDTH;
     my =( e.pageY - offsetY )- LINE_WIDTH;
   }
   function mouseDown(e){
     getMouse(e);
     clear(fctx);
     var l = lines.length;
     for (var i = l-1; i >= 0; i--) {
       draw(fctx,lines[i]);
       var imageData = fctx.getImageData(mx, my, 1, 1);
       if (imageData.data[3] > 0) {
         selectedObject = lines[i];
         isDrag = true;
         canvas.onmousemove = drag;
         clear(fctx);
       }
     }
   }
   function mouseUp(){
     isDrag = false;
   }
   canvas.onmousedown = mouseDown;
   canvas.onmouseup = mouseUp;
   canvas.addEventListener('touchstart', mouseDown, false);
   canvas.addEventListener('touchend', mouseUp, false);

你可以在这里看到工作部分:http://codepen.io/nirajmchauhan/pen/yYdMJR

Answer 1

从触摸事件生成鼠标事件

好了一段时间以来，我在这里看到了这个问题，没有人提出我要给出的答案。

与鼠标事件不同，触摸事件涉及与UI的许多接触点。为了适应这种情况，触摸事件提供了一系列的接触点。由于鼠标不能同时位于两个位置，因此应该真正分别处理两种交互方法，以获得最佳的用户体验。OP，因为您不询问要检测设备是触摸屏还是鼠标驱动的设备，所以我将其留给其他人询问。

两者都处理

鼠标和触摸事件可以共存。在没有其他设备的设备上添加鼠标或触摸事件的侦听器不是问题。缺少的输入接口根本不会生成任何事件。这样可以轻松为您的页面实施透明的解决方案。

它取决于您喜欢的接口，并在其硬件不可用时模拟该接口。在这种情况下，我将从创建的任何触摸事件中模拟鼠标。

以编程方式创建事件。

该代码使用MouseEvent对象创建和调度事件。它使用简单，并且事件与真实的鼠标事件没有区别。有关MouseEvent的详细说明，请转到MDN MouseEvent

最基本的。

创建鼠标单击事件并将其分派到文档

  var event = new MouseEvent( "click", {'view': window, 'bubbles': true,'cancelable': true});
  document.dispatchEvent(event);

您还可以将事件调度到各个元素。

  document.getElementById("someButton").dispatchEvent(event);

监听事件与监听实际鼠标相同。

  document.getElementById("someButton").addEventListener(function(event){
        // your code
  ));

函数中的第二个参数MouseEvent是您可以在其中添加有关事件的其他信息的位置。说，例如clientX与clientY鼠标的位置，或which或buttons用于哪个按钮/ S是被按压。

如果您曾经看过，mouseEvent就会知道这里有很多属性。因此，您在鼠标事件中发送的确切信息将取决于事件侦听器使用的内容。

触摸事件。

触摸事件类似于鼠标。还有touchstart，touchmove和touchend。它们的区别在于它们提供了一系列位置，每个接触点都有一个位置。不确定最大值是多少，但是对于此答案，我们只感兴趣一个。有关完整的详细信息，请参见MDN touchEvent。

我们需要做的是仅涉及一个接触点的触摸事件，我们希望在同一位置生成相应的鼠标事件。如果触摸事件返回的接触点不止一个，我们将无法知道它们的预期焦点是哪个，因此我们将忽略它们。

function touchEventHandler(event){
    if (event.touches.length > 1){  // Ignor multi touch events
        return;
    }
}

因此，现在我们知道触摸是单个联系人，我们可以根据触摸事件中的信息来创建鼠标事件。

最基本的

touch = event.changedTouches[0]; // get the position information
if(type === "touchmove"){        
    mouseEventType = "mousemove";   // get the name of the mouse event
                                    // this touch will emulate   
}else
if(type === "touchstart"){  
    mouseEventType = "mousedown";     // mouse event to create
}else
if(type === "touchend"){ 
    mouseEventType = "mouseup";     // ignore mouse up if click only
}

var mouseEvent = new MouseEvent( // create event
    mouseEventType,   // type of event
    {
        'view': event.target.ownerDocument.defaultView,
        'bubbles': true,
        'cancelable': true,
        'screenX':touch.screenX,  // get the touch coords 
        'screenY':touch.screenY,  // and add them to the 
        'clientX':touch.clientX,  // mouse event
        'clientY':touch.clientY,
});
// send it to the same target as the touch event contact point.
touch.target.dispatchEvent(mouseEvent);

现在，当用户仅在一个位置触摸设备时mousedown，鼠标侦听器将接收，事件。mousemovemouseup

错过点击

到目前为止一切都很好，但是还缺少一个鼠标事件。“ onClick”我不确定是否存在同等的触摸事件，就像我看到的一个练习一样，我们必须决定要确定是否可以将一组触摸事件视为点击的足够信息。

这将取决于开始和结束触摸事件相距多远，超过几个像素及其拖曳。这也取决于多长时间。（尽管与鼠标不一样）我发现人们倾向于点击以单击，而可以握住鼠标来代替释放的构造，或者拖动鼠标来取消，这不是人们使用触摸界面的方式。

因此，我记录了touchStart事件发生的时间。event.timeStamp以及它从哪里开始。然后在touchEnd事件中，我找到了它已经移动的距离以及之后的时间。如果它们都在我设置的限制范围内，则还会生成一个鼠标单击事件以及鼠标向上事件。

因此，这是将触摸事件转换为鼠标事件的基本方法。

一些代码

下面是一个名为mouseTouch的微型API，它可以完成我刚才解释的工作。它涵盖了简单绘图应用程序中所需的最基本的鼠标交互。

  var event = new MouseEvent( "click", {'view': window, 'bubbles': true,'cancelable': true});
  document.dispatchEvent(event);

因此，希望对您的代码有所帮助。