首页 > 编程语言> 文章详细

如何通过javascript确定触摸事件(或鼠标事件)中的真实x y坐标？

2019-10-31 11:36:41 阅读：235 来源： 互联网

标签：offset html5 touch coordinates javascript

我一直在处理触摸事件,并且有些代码工作得很好,直到画布不在左上角开始.只要在其之前添加任何内容,报告的事件就会被画布的位置抵消.

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

看一下触摸启动事件,我可以看到有一个pageY(在chrome中,使用usb调试).但是当我用Google搜索它时,它似乎不是标准的一部分,并且似乎有人争论它可能会贬值(尽管我找不到一种方法或另一种方法).

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

对于鼠标事件,我创建了一个JSFiddle of the problem,也会发生相同的问题.但是,我不确定鼠标事件和触摸事件是否可以使用相同的属性.

我应该注意,我知道我可以对偏移量进行硬编码,并且可以解决问题,但是,我正在寻找一种解决方案,该解决方案可以使用手头的信息,而无需任何特定于我的html的硬编码.

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

<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：

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

$(function () {
    document.getElementById('myCanvas').addEventListener('mousedown', onm ouseDown, 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的值,然后再打开.这就是recursiveOffsetLeftAndTop函数为您处理的.

标签：offset,html5,touch,coordinates,javascript
来源： https://codeday.me/bug/20191031/1975272.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何通过javascript确定触摸事件(或鼠标事件)中的真实x y坐标？