我需要使用单个图像创建具有缩放功能的平面图。我正在使用此示例,因为这可以达到我的全部目的 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);
但没有评估。在不缩放的情况下可以正常工作,但在缩放时却不能。有人可以帮我吗?