使用形状上的单击事件来缩放画布

时间:2018-08-15 07:36:13

标签: html5 canvas html5-canvas zoom image-zoom

我需要使用单个图像创建具有缩放功能的平面图。我正在使用此示例,因为这可以达到我的全部目的  http://phrogz.net/tmp/canvas_zoom_to_cursor.html 除了形状上的一次单击事件(如给定示例中x -438.5和y-223上的事件)或耳环或护目镜之类的图像。

我也尝试过这种方法(毕达哥拉斯定理)

canvas.addEventListener('mousedown', function(evt) {
  document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
  lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
  lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);

  var dx = lastX - 438.5;
  var dy = lastY - 223;
  var shapesClicked = (dx * dx + dy * dy) < (10 * 10);
  if (shapesClicked) {
    alert("You clicked in the ");
    return;
  }

  dragStart = ctx.transformedPoint(lastX, lastY);
  dragged = false;
}, false);

但没有评估。在不缩放的情况下可以正常工作,但在缩放时却不能。有人可以帮我吗?

0 个答案:

没有答案