在<canvas>上将鼠标悬停在图像上

Question

我有一个画布,我在上面画了一个图像:

var imageObj = new Image();
imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://localhost:8080/apache_pb2.png';

但是我希望将scale鼠标悬停在图像上.所以我尝试了这段代码:

imageObj.onmouseover = function() {
    context.scale(2, 2);
}

以为我可能会幸运 - 但​​是没有去 - 甚至没有开火.

然而,为了增加对伤害的侮辱我似乎无法在HTML5画布上找到明确的参考,因此很难确定Image对象上可用的内容.

我怎样才能参加onmouseover活动？甚至有onmouseover活动吗？

Answer 1

作为使用库的选项,这里有一个vanilla Javascript实现.

基本上,我们只需要听两个事件,mousemove并且mouseout,无论是canvas元素上.我们只是在开始和开启时将图像的一半大小绘制到画布上mouseout.当鼠标位于鼠标位置的负位置时,我们绘制图像"缩放"(全尺寸):

如上面的链接所示 -

获取并绘制图像:

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);
}

在mousemove四处走动:

function move(e) {
    var pos = getMousePos(canvas, e);
    ctx.drawImage(img, -pos.x, -pos.y, img.width, img.height);
}

在mouseout我们刚刚通过调用复位doCanvas().

这样可以在没有任何复杂缩放的情况下工作,因为图像以50%显示,因此当鼠标位置位于与图像的另一半(四分之一)对应的右下角时.

如果您想说,最初将图像显示为全尺寸的25%,则需要按比例因子缩放鼠标坐标.

演示使用其他缩放因子超过50%.