javascript中画布上的触摸事件具有错误的坐标_Javascript_Event Handling_Html5 Canvas_Touchscreen

javascript中画布上的触摸事件具有错误的坐标

javascript html5-canvas

javascript中画布上的触摸事件具有错误的坐标,javascript,event-handling,html5-canvas,touchscreen,Javascript,Event Handling,Html5 Canvas,Touchscreen,我有一个html5画布游戏，用于使用键盘的桌面浏览器，我正试图通过添加触摸屏控件来为智能手机创造兼容性当前的问题是触摸输入事件返回的X和Y坐标与我触摸的位置不匹配上图中的紫色点是我添加的诊断测试。游戏在每个检测到触摸事件的位置放置一个圆圈。在本例中，我追踪了手机屏幕的边框。点的位置说明了我的屏幕实际位置和游戏似乎认为的位置之间的差异 <body onload="html_init()"> <div class="canvas_div" id="canvas_div"&

我有一个html5画布游戏，用于使用键盘的桌面浏览器，我正试图通过添加触摸屏控件来为智能手机创造兼容性

当前的问题是触摸输入事件返回的X和Y坐标与我触摸的位置不匹配

上图中的紫色点是我添加的诊断测试。游戏在每个检测到触摸事件的位置放置一个圆圈。在本例中，我追踪了手机屏幕的边框。点的位置说明了我的屏幕实际位置和游戏似乎认为的位置之间的差异

<body onload="html_init()">
  <div class="canvas_div" id="canvas_div">
    <canvas width="1050" height="600" id="canvas"></canvas>
  </div>
</body>

function html_init()
  {
  canvas_html = document.getElementById ("canvas");
  window.addEventListener ("resize", resize_canvas, false);
  canvas_html.addEventListener ("touchstart",  function(event) {touch_start (event)},  false);
  }

function resize_canvas ()
  {
  // Scale to fit window, decide which scaling reaches edge first.

  canvas_2d.restore();
  canvas_2d.save();

  var game_ratio = canvas_2d.canvas.width / canvas_2d.canvas.height;
  var window_ratio = window.innerWidth / window.innerHeight;
  var xratio = window.innerWidth / canvas_2d.canvas.width;
  var yratio = window.innerHeight / canvas_2d.canvas.height;

  var ratio;
  if (game_ratio > window_ratio) ratio = xratio;
  else ratio = yratio;
  if (ratio > 1) ratio = 1;

  canvas_2d.scale (ratio, ratio);
  }

function touch_start (event)
  {
  var touch = event.changedTouches;
  var x = touch[0].pageX;
  var y = touch[0].pageY;

  // this goes on to add the purple test sprite to the screen at that location.
  }


函数html_init（）
{
canvas_html=document.getElementById（“canvas”）；
window.addEventListener（“resize”，resize_canvas，false）；
canvas_html.addEventListener（“touchstart”，函数（事件）{touch_start（事件）}，false）；
}
函数调整画布大小（）
{
//缩放以适应窗口，决定哪个缩放首先到达边缘。
canvas_2d.restore（）；
canvas_2d.save（）；
var game_ratio=canvas_2d.canvas.width/canvas_2d.canvas.height；
var window_比率=window.innerWidth/window.innerHeight；
var xratio=window.innerWidth/canvas_2d.canvas.width；
var yratio=window.innerHeight/canvas_2d.canvas.height；
var比率；
如果（游戏比率>窗口比率）比率=X比率；
else比率=yratio；
如果（比率>1）比率=1；
画布二维比例（比率、比率）；
}
功能触摸启动（事件）
{
var touch=event.changedtouchs；
var x=触摸[0]。pageX；
var y=touch[0]。页面；
//这将继续向该位置的屏幕添加紫色测试精灵。
}

我尝试过引用pageX、clientX和screenX，但它们都没有正确的值。尽管我的画布设置为1050 x 600，这是我的游戏运行的地方，但触摸屏似乎认为它在650 x 350左右。如果有必要的话，测试手机是iphone6

我不确定在这一点上要检查什么。欢迎提出任何意见

更新：我已将问题缩小为两个事实-画布大小大于所显示网页的显示区域，并且我正在使用resize_canvas（）设置比例。看起来我要么缩小画布的整体尺寸以适合手机，要么根据比例对坐标进行公式化调整

canvas_html.addEventListener ("touchstart", touch_start,  false);

function resize_canvas ()
  {
  // Scale to fit window, decide which scaling reaches edge first.

  canvas_2d.restore();
  canvas_2d.save();

  var current_ratio = canvas_2d.canvas.width / canvas_2d.canvas.height;
  var new_ratio = window.innerWidth / window.innerHeight;
  var xratio = window.innerWidth / canvas_2d.canvas.width;
  var yratio = window.innerHeight / canvas_2d.canvas.height;

  if (current_ratio > new_ratio) screen_size_ratio = xratio;
  else screen_size_ratio = yratio;
  if (screen_size_ratio > 1) screen_size_ratio = 1;

  canvas_2d.scale (screen_size_ratio, screen_size_ratio);
  }

function touch_start (event)
  {
  var touch = event.changedTouches;
  var x = Math.floor (touch[0].clientX / screen_size_ratio);
  var y = Math.floor (touch[0].clientY / screen_size_ratio);
  }

由于我在画布上执行scale（），因此必须使用我在canvas_resize（）中计算的比率取消实际坐标的缩放

我还必须更改我的“touchstart”事件处理程序，使其不使用匿名函数。无论出于何种原因，这导致手机浏览器默认返回使用“鼠标向下”进行单击。

请粘贴HTML。画布通常具有描述其大小的高度和宽度属性。你能检查一下吗？你没有提供错误的值吗？@MartinChaov:我已经粘贴了我的html。在我看来，那个里的一切都是正确的。和触摸事件一起使用。@K3N:这是个好主意，但我的画布总是在（0，0）。我使用了绝对定位。@噩梦中它也覆盖了缩放的画布