使用鼠标滚轮放大、缩小画布

Question

我正在尝试使我的 <canvas> 可缩放（放大、缩小）。

我正在尝试使用以下代码来处理缩放功能，但是，它没有按预期工作，因为一旦我尝试放大/缩小，画布就会变空/空白。

这让我相信 mousewheel 函数正在工作，但由于它“删除”了画布绘图，因此出现了问题。

function drawZoom() {
var startScale = 1;
var scale = startScale;
var floor = $("#floorplan")[0].getContext("2d")
var width = floor.canvas.width;
var height = floor.canvas.height;
var intervalId;

var imageData = floor.getImageData(0, 0, width, height);
var canvas = $("<canvas>").attr("width", width).attr("height", height)[0];
canvas.getContext("2d").putImageData(imageData, 0, 0);

function drawContents(){
    var newWidth = width * scale;
    var newHeight = height * scale;

    floor.save();
    floor.translate(-((newWidth-width)/2), -((newHeight-height)/2));
    floor.scale(scale, scale);
    floor.clearRect(0, 0, width, height);
    floor.drawImage(canvas, 0, 0);
    floor.restore();
}

 $("#test").on('DOMMouseScroll mousewheel',function(e) {

        var e =  e || window.event; // old IE support
        var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1;
        if(theEvent / 120 > 0) {
            zoomin();
        } else {
            zoomout();
        }
        if (e.preventDefault)
            e.preventDefault();
    });

    function zoomin()
    {
         scale = scale + 0.01;
         drawContents();
    }
    function zoomout()
    {
         scale = scale - 0.01;
         drawContents();
    }
}

CodePen Live Example

我在这里做错了什么？我该如何解决这个问题？

Answer 1

我可以像这样在你的 drawSettings 中添加车轮把手：

//Drag settings start
        function drawSettings() {
           //snip....

            if (canvas.addEventListener) {
                // IE9, Chrome, Safari, Opera
                canvas.addEventListener("mousewheel", MouseWheelHandler, false);
                // Firefox
                canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
            }
            // IE 6/7/8
            else canvas.attachEvent("onmousewheel", MouseWheelHandler);

//剩下的代码...

需要使用 delta 的值为您的示例量身定制放大和缩小功能。添加我从这里找到的这个函数：https://www.sitepoint.com/html5-javascript-mouse-wheel/ 并根据需要更改画布大小。

function MouseWheelHandler(e) {

            // cross-browser wheel delta
            var e = window.event || e; // old IE support
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

            canvas.style.width = Math.max(50, Math.min(800, canvas.width + (30 * delta))) + "px";
            canvas.style.height = Math.max(50, Math.min(800, canvas.width + (30 * delta))) + "px"; 
            return false;
        }