如何在画布中获取图像的坐标x y

Question

我必须开发一个功能＆＃34; onMouseClick＆＃34;获取画布中画面的坐标（x，y），那么如何在画布（javascript）中获取可拖动和可缩放图像的坐标x，y？

这是我的代码：

onMouseClick: function(iEvent){
    var rect = this.elements.container.getBoundingClientRect();
    var x = iEvent.pageX - rect.left;
    var y = iEvent.pageY - rect.top;

    var coord = "X: " +x+ " , Y: " +y;
    console.log(coord);

},

即使我放大或拖动它，我想在画布中得到我的照片的坐标x，y。

Answer 1

x: iEvent.clientX - rect.left,
y: iEvent.clientY - rect.top

这应该为你工作。 资料来源：http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

Answer 2

您只需使用offsetX和offsetY来处理相对于画布的坐标。

//>>Class<<
var CanvasImage = (function() {
  function CanvasImage(image, scale, position) {
    if (scale === void 0) {
      scale = 1;
    }
    if (position === void 0) {
      position = {
        x: 0,
        y: 0
      };
    }
    this.image = image;
    this.scale = scale;
    this.position = position;
  }
  return CanvasImage;
}());
//>>Simulation<<
//Generate elements
var img = document.createElement("img");
img.src = "https://placeholdit.imgix.net/~text?txtsize=600&txt=Box&w=200&h=200";
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1000;
canvas.height = canvas.width;
canvas.style.borderStyle = "solid";
canvas.style.marginTop = Math.round(Math.random() * 50) + "px";
canvas.style.marginLeft = Math.round(Math.random() * 50) + "px";
canvas.draggable = true;
var ctx = canvas.getContext("2d");
//Instantiate
var CanvasImages = [
  new CanvasImage(img, 0.25, {
    x: 100,
    y: 100
  }),
  new CanvasImage(img, 0.5, {
    x: 150,
    y: 150
  })
];
//The variable for selected elements
var selectedImage = null;
//Handle input
function findBoxByCoordinates(x, y) {
  for (var i = 0; i < CanvasImages.length; i++) {
    var canvasimage = CanvasImages[CanvasImages.length - 1 - i];
    var width = canvasimage.image.naturalWidth * canvasimage.scale;
    var height = canvasimage.image.naturalHeight * canvasimage.scale;
    if (x > canvasimage.position.x - (width / 2) &&
      x < canvasimage.position.x + (width / 2) &&
      y > canvasimage.position.y - (height / 2) &&
      y < canvasimage.position.y + (height / 2)) {
      return canvasimage;
    }
  }
  return null;
}

function selectDeselect(evt) {
  if (selectedImage == null) {
    selectedImage = findBoxByCoordinates(evt.offsetX, evt.offsetY);
  } else {
    selectedImage = null;
  }
  requestAnimationFrame(draw);
}
canvas.onmousedown = selectDeselect;
canvas.onmouseup = selectDeselect;
canvas.ondblclick = function(evt) {
  selectedImage = findBoxByCoordinates(evt.offsetX, evt.offsetY);
  if (selectedImage != null) {
    draw();
    var newScale = parseFloat(prompt("Set a new scale factor", selectedImage.scale.toString()));
    if (isFinite(newScale) && !isNaN(newScale)) {
      selectedImage.scale = newScale;
      selectedImage = null;
      requestAnimationFrame(draw);
    }
  }
};
canvas.onmousemove = function(evt) {
  if (selectedImage != null) {
    selectedImage.position.x = evt.offsetX;
    selectedImage.position.y = evt.offsetY;
    requestAnimationFrame(draw);
  }
};
//draw
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < CanvasImages.length; i++) {
    var canvasimage = CanvasImages[i];
    var width = canvasimage.image.naturalWidth * canvasimage.scale;
    var height = canvasimage.image.naturalHeight * canvasimage.scale;
    ctx.drawImage(canvasimage.image, canvasimage.position.x - (width / 2), canvasimage.position.y - (height / 2), width, height);
    ctx.strokeStyle = (selectedImage == canvasimage ? 'red' : 'black');
    ctx.strokeRect(canvasimage.position.x - (width / 2), canvasimage.position.y - (height / 2), width, height);
  }
}
img.onload = draw;
setTimeout(function() {
  draw();
}, 1500);

<强>说明：

1. 拖放以移动框。
2. 双击以更改比例。