HTML 5响应式Canvas中的鼠标位置 [英] Mouse position within HTML 5 responsive Canvas

问题描述

我搜索了其他问题，但没有一个适合我的情况.

I've searched through other questions but none of them fit my case.

我有一个canvas元素:

I have a canvas element:

<canvas id="linear-synoptic-map" width="1053px" height="1000px" ng-click="linearSynopticCtrl.canvasClicked($event)" ng-mousemove="linearSynopticCtrl.mouseMovedOverCanvas($event)">
</canvas>

我正在使用此功能:

linearSynopticCtrl.getPositionFromEvent = function (event) {
  var rect = linearSynopticCtrl.canvas.getBoundingClientRect();
  var x = event.x - rect.left;
  var y = event.y - rect.top;
  return new Point(x,y);
};

问题是画布需要响应，因此我添加了以下css规则:

The problem is that the canvas needs to be responsive so I've added the following css rule:

canvas#linear-synoptic-map {
  width: 100%;
}

调整大小时(画布尺寸超出定义范围缩小或超出定义范围放大:1053x1000)，在正确的鼠标位置和函数返回的位置之间开始显示间隙.

When the resizing happens (when the canvas dimension is shrinked over definition or enlarged over definition: 1053x1000) a gap starts to show between the correct mouse position and the returned position by the function.

我也尝试过通过这种方法获得职位:

I have also tried obtaining the position with this approach:

linearSynopticCtrl.getPositionFromEvent = function (event) {
  var x = event.x - linearSynopticCtrl.canvas.offsetLeft;
  var y = event.y - linearSynopticCtrl.canvas.offsetTop;
  return new Point(x,y);
};

但是我得到的结果要差得多.

But I get much worse results.

有人知道如何解决此问题吗?

Does anyone know how to fix this problem?

推荐答案

鼠标坐标永远不会缩放.

Mouse coordinates are never scaled.

因此，您必须为它们缩放鼠标坐标以反映缩放后的画布.

Therefore, you must scale the mouse coordinates for them to reflect the scaled canvas.

这是使画布响应并获得缩放的鼠标坐标的一种方法:

Here's one way to make your canvas responsive and get scaled mouse coordinates:

// handle responsively resizing the canvas   
var scale=1.00;
var originalWindowWidth=window.innerWidth;
var originalCanvasWidth=document.getElementById('canvas').width;
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};
var resizeCanvas = debounce(function() {
  scale=window.innerWidth/originalWindowWidth;
  $('#canvas').css('width',originalCanvasWidth*scale);
}, 250);
window.addEventListener('resize', resizeCanvas);

// now, do normal app stuff

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

$("#canvas").mousemove(function(e){handleMouseMove(e);});

ctx.fillRect(50,50,100,100);
ctx.fillText('Rect drawn at [50,50]',50,35);

function handleMouseMove(e){

  var rect = canvas.getBoundingClientRect();
  var x = parseInt((event.x - rect.left)/scale);
  var y = parseInt((event.y - rect.top)/scale);

  $('#mouse').text(x+'/'+y);

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Mouse will report rect corner at<br>[50,50] even after resizing window</h4>
<h4 id=mouse>mouse</h4>
<canvas id="canvas" width=300 height=300></canvas>

这篇关于HTML 5响应式Canvas中的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！