如何通过javascript确定触摸事件（或鼠标事件）中的真实x-co-ord？ [英] How to determine the true x y co-ord in a touch event (or mouse event) via javascript?

问题描述

我一直在处理触摸事件并且有一些代码工作得非常好，直到画布没有从左上角开始。只要我在它之前添加任何内容，报告的事件就会被画布的位置所抵消。

I've been working on touch events and have some code working quite nicely, until the canvas doesn't start at the top left corner. As soon as I add anything before it, the reported event is offset by the position of the canvas.

我通过在触摸的位置周围画一个圆圈来确定这一点。圆圈始终偏离画布从屏幕左上角的偏移量。

I determine this by drawing a circle around where the touch was. The circle is always offset by the offset of the canvas from top left corner of the screen.

看一下触摸开始的事件，我可以看到有一个pageY可用（在chrome中，使用usb调试）。但是当我谷歌它时，似乎它不是标准的一部分，并且似乎有一些争论它可能被折旧（虽然我无法找到一种方式或另一种方式）。

Looking at the event for on touch start, I can see that there is a pageY available (within chrome, using usb debugging). But when I google it, it seems that it's not a part of the standard and there appears to be some contention that it may be depreciated (though I cannot find out one way or the other).

所以我的问题是什么是最好的跨浏览器方法来解决这个问题（主要关注的是safari和chrome，即webkit，firefox是个不错的选择）？

So my question is what is the best cross browser method to deal with this (main concerns are safari and chrome, ie webkit, firefox is a nice to have)?

鼠标事件也出现同样的问题，我为此创建了一个 JSFiddle问题。但是我不确定鼠标事件和触摸事件是否有相同的属性。

The same issue occurs for mouse events, for which I created a JSFiddle of the problem. However I' not sure if the same attributes are available for mouse events and touch events.

我应该注意，我知道我可以对偏移进行硬编码并解决问题，但是我正在寻找一种使用手头信息的解决方案需要任何特定于我的html的硬连线代码。

I should note, I am aware that I can hard code the offset and the problem is solved, however I'm looking for a solution that uses the information at hand without requiring any hard wired code specific to my html.

要重新创建JSFiddle，HTML，CSS和Javascript如下：

To recreate the JSFiddle, the HTML, CSS and Javascript are as follows:

<div class="title"></div>
<div class="container">
  <canvas id="myCanvas"></canvas>
</div>

CSS：

body {
  background-color: #ff0000;
  margin: 0px;
}

canvas {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background-color:#000;
}

.title {
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 40px;
  background-color: #888;
}

.container {
  width:auto;
  text-align:center;
  background-color:#777;
  width:100%;
  position:absolute;
  top:40px;
  left:0px;
  bottom:0px;
}

Javascript：

Javascript:

var onMouseDown = function(e) {
    draw(document.getElementById('myCanvas').getContext('2d'), e.clientX, e.clientY);
}

$(function () {
    document.getElementById('myCanvas').addEventListener('mousedown', onMouseDown, false);
});


function draw(ctx, x, y) {
ctx.canvas.width = ctx.canvas.offsetWidth; 
ctx.canvas.height = ctx.canvas.offsetHeight;      

  var radius = 50;
  var lineWidth = 15;
  var r = 255;
  var g = 75;
  var b = 75;
  var a75 = 0.05;

  var adj = Math.abs(lineWidth / 2);

  rad = radius + adj;

  var stop1 = (rad - lineWidth) / rad;
  var stop2 = 0;
  var stop3 = stop1 + (1 - stop1) / 2;
  var stop4 = 0;
  var stop5 = 1;

  stop2 = stop3 - (stop3 - stop1) / 2;
  stop4 = stop3 + (stop5 - stop3) / 2;

  var radgrad = ctx.createRadialGradient(x, y, 0, x, y, rad);

  radgrad.addColorStop(stop1, 'rgba(' + r + ',' + g + ',' + b + ', 0)');
  radgrad.addColorStop(stop2, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop3, 'rgba(' + r + ',' + g + ',' + b + ', 1)');
  radgrad.addColorStop(stop4, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop5, 'rgba(' + r + ',' + g + ',' + b + ', 0)');

  ctx.fillStyle = radgrad;
  ctx.arc(x, y, rad, 0, 2 * Math.PI, true);
  ctx.fill();
}

推荐答案

这应该有效： http://jsfiddle.net/DG4fb/3/

你画布的上边和下边不是 clientX == 0; clientY == 0; 所以你需要计算偏移量。你的画布的左上角在哪里？这是 offsetLeft 和 offsetTop 加上其 offsetParent 的值及其 offsetParent.offsetParent 的值，以及on和on。这就是 recursiveOffsetLeftAndTop 函数为你处理的。

You canvas's top and left is not clientX == 0; clientY == 0; so you need to calculate the offset. Where is your canvas's top left corner? It's its offsetLeft and offsetTop plus its offsetParent's value and its offsetParent.offsetParent's value, and on and on. That's what the recursiveOffsetLeftAndTop function handles for you.

这篇关于如何通过javascript确定触摸事件（或鼠标事件）中的真实x-co-ord？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！