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

作为使用库的选项， here is a vanilla Javascript implementation 。

基本上我们只需要在canvas元素上听两个事件mousemove和mouseout。我们只是在开始时和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％，则需要按比例因子缩放鼠标坐标。

<强> Demo using other zoom factors than 50%

Answer 2

“缩放”的关键是向用户显示半分辨率的图像。

然后要“放大”，您会弹出一个辅助画布，在较小的“视口”中显示全分辨率图像的一部分。

您可以将此作为起点。

它是使用KineticJS构建的，但代码在直接Canvas / JS中是相同的。

Kinetic JS image Magnifier

Answer 3

Canvas没有“场景图”。它完成后会忘记你做的事情。它只是像素，所以画布不知道有任何图像悬停或缩放。

context.scale()不会影响以前的任何操作。它只会更改以后绘图命令的坐标/大小。

您无法将鼠标处理程序附加到画布上的内容或在绘制后修改它们。你必须自己处理鼠标并自己重绘画布。

如果你没有做比这更复杂的事情，那么<canvas>对于这项任务来说是一个糟糕的工具。您可能最好使用<img>和CSS :hover或更改style.width的JS。

您也可以使用SVG实现这一点，SVG具有场景图和鼠标事件处理程序。

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

3 个答案: