キャンバス内の画像の座標（x、y）を取得する関数 "onMouseClick"を開発する必要があります。ドラッグアンドズーム可能な画像をキャンバス（javascript）で表示できますか？ここでキャンバス内の画像の座標xyを取得する方法
は私のコードです：
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を取得したいです。
x: iEvent.clientX - rect.left,
y: iEvent.clientY - rect.top
これはあなたのための仕事です。 ソース：http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
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);指示：