如何获取画布中图像的坐标xy

Question

我必须开发一个功能“ onMouseClick”，该功能获取画布中图片的坐标（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. 双击以更改比例。