如何在画布翻译后获得鼠标点击图像的x和y像素值。规模?事件x和y所需的计算是什么?
我正在使用平移和放大器从this answer缩放代码:
var zoom = function(clicks) {
var pt = ctx.transformedPoint(lastX,lastY);
ctx.translate(pt.x,pt.y);
var factor = Math.pow(scaleFactor,clicks);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);
redraw();
}
var handleScroll = function(evt) {
var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
if (delta) zoom(delta);
return evt.preventDefault() && false;
};
答案 0 :(得分:0)
如果您只是在点击后尝试获取鼠标X和Y位置,那么您应该在Javascript中将函数附加到mousedown
事件。这称为事件绑定。简而言之,在DOM中,您可以将事件绑定到页面中的元素。 Here's an example I made,显示绑定到#box
元素的事件。
document.getElementById("box").onmousedown = function() {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
alert("Mouse x: " + posx + "\nMouse y: " + posy);
};
此代码查找ID为box
的元素,并告诉每次按下鼠标后函数中的代码都会运行。在这个例子中,我们也回退到旧系统,以确保它可以跨平台和跨浏览器工作。如果您想将此事件绑定到整个网页而不仅仅是一个元素,那么您可以将document.getElementById("box")
替换为window
。
然而,这并不计算DOM元素中的相对位置。有多种方法可以做到这一点,我在这里不会详细介绍,但我将在下面介绍几种方法。祝你好运!
<强>资源强>