问题描述
我有一个画布,我在上面画了一个图像:
I have a canvas, and I've drawn an image on it:
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://localhost:8080/apache_pb2.png';
但我希望 scale
图片上鼠标移到。所以我尝试了这段代码:
but I want to scale
the image on mouse over. So I tried this code:
imageObj.onmouseover = function() {
context.scale(2, 2);
}
以为我可能会幸运 - 但是没有去 - 甚至没有开火。
thinking I might get lucky -but no go -it doesn't even fire.
然而,为了增加对伤害的侮辱我似乎无法在HTML5画布上找到明确的参考,因此很难确定<$ c上的可用内容$ c>图像对象。
However, to add insult to injury I can't seem to find a definitive reference on the HTML5 canvas so it's pretty difficult to determine what's available on the Image
object.
如何附加到 onmouseover
事件?是否有 onmouseover
事件?
How can I attach to the onmouseover
event? Is there even an onmouseover
event?
推荐答案
作为使用选项图书馆, 。
As an option to use a library, here is a vanilla Javascript implementation.
基本上我们只需要听两个事件, mousemove
和 mouseout
,两者都在canvas元素上。我们只是在开始时和#code> mouseout 上将图像的一半大小绘制到画布上。当鼠标位于鼠标位置的负位置时,我们绘制图像缩放(全尺寸):
Basically we only need to listen to two events, mousemove
and mouseout
, both on the canvas element. We just draw the image at half size to the canvas on start and on mouseout
. We draw the image "zoomed" (full size) when mouse is over at location negative to mouse position:
如上面的链接所示 -
As shown on the link above -
获取并绘制图像:
var img = document.createElement('img');
img.onload = function() {
//init geometry
canvas.width = img.width>>1; //we'll show image at half size
canvas.height = img.height>>1;
//drawimage
doCanvas();
//add event listener we need
canvas.addEventListener('mouseout', doCanvas, false);
canvas.addEventListener('mousemove', move, false);
}
//some image...
img.src ="http://i.imgur.com/pULaM45.jpg";
function doCanvas() {
ctx.drawImage(img, 0, 0, img.width>>1, img.height>>1);
}
On mousemove
move周围:
On mousemove
move around:
function move(e) {
var pos = getMousePos(canvas, e);
ctx.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}
在 mouseout
我们只需通过调用 doCanvas()
重置。
On mouseout
we just reset by calling doCanvas()
.
这样可以在没有任何复杂缩放的情况下工作,因为图像显示为50%所以当鼠标位置在右下角与图像的另一半(四分之一)对应时。
This works without any complex scaling as the image is shown at 50% so when mouse position is at the bottom right corner that corresponds with the other half (quarter) of the image.
如果你想说,最初显示图像25%的全尺寸,您需要按比例因子缩放鼠标坐标。
If you want to lets say, show the image initially by 25% of full size, you need to scale the mouse coordinates by a scale-factor.
。
Demo using other zoom factors than 50%.
这篇关于在< canvas>上鼠标悬停时缩放图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!