Question

我使用https://github.com/dimxasnewfrozen/Panning-Zooming-Canvas-Demos/blob/master/demo12/main.js中的一些代码（http://dayobject.me/canvas/demo12/演示）使用Canvas元素放大图像。

但是，当缩放一个缩放级别和下一个缩放级别之间的跳转太大时，我需要添加一个缩放参数。

我将如何做到这一点？

Answer 1

它接近我，好像算法总是占用缩放的一半尺寸。在代码的最后，您可以在 main.js mouseWheel 函数中看到它：

initialImageWidth = initialImageWidth * 2;

宽度除以2，因此只需更改使用的值。

你说用于放大和缩小的步骤太大了。

因此，我建议您使用要缩放的图像尺寸生成新值。例如，您可以获取当前图像最大尺寸的百分比。

这就是如何实现根据图像尺寸缩放的缩放功能

Answer 2

在main.js中，您可以在此处更改缩放级别，

mouseWheel: function (e) {
    e.preventDefault() // Please add this, coz the scroll event bubbles up to document.
    var zoomLevel = 2;

    ...

    if (delta > 0) 
    {   
        // ZOOMING IN
        var zoomedX = canvasPos.deltaX - (canvasZoomX - canvasPos.deltaX);
        var zoomedY = canvasPos.deltaY - (canvasZoomY - canvasPos.deltaY);

        // scale the image up by 2
        initialImageWidth = initialImageWidth * zoomLevel;
    }
    else
    {   
        // ZOOMING OUT
        var zoomedX = (canvasPos.deltaX + canvasZoomX);
        var zoomedY = (canvasPos.deltaY + canvasZoomY);

        // scale the image down by 2
        initialImageWidth = initialImageWidth / zoomLevel;

    }
}

免责声明：这会破坏zoomedX和zoomedY值。你必须解决它们：）

将缩放添加到画布图像缩放

2 个答案: