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

我正在尝试使我的

可缩放（放大、缩小）

我正在尝试下面的代码来处理缩放功能，但是，它并没有像预期的那样工作，因为一旦我尝试放大/缩小，画布就会变为空/空白

这让我相信，

mouseweel

功能正在工作，但在“删除”画布图形时，有些东西关闭了

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

函数drawZoom（）{
var startScale=1；
var标度=startScale；
变量floor=$（“#floorplan”）[0]。getContext（“2d”）
var width=floor.canvas.width；
var height=floor.canvas.height；
var有效期；
var imageData=floor.getImageData（0，0，宽度，高度）；
var canvas=$（“”）.attr（“宽度”，宽度）.attr（“高度”，高度）[0]；
canvas.getContext（“2d”）.putImageData（imageData，0,0）；
函数drawContents（）{
var newWidth=宽度*比例；
var newHeight=高度*刻度；
floor.save（）；
地板。平移（-（新宽度/2），-（（新高度/2））；
地秤（秤，秤）；
地板.clearRect（0，0，宽度，高度）；
floor.drawImage（画布，0,0）；
地板。恢复（）；
}
$（“#测试”）。在（'DOMMouseScroll mousewheel'，函数（e）上{
var e=e | | window.event；//旧IE支持
var theEvent=e.OriginaleEvent.wheelDelta | | e.OriginaleEvent.详图*-1；
如果（事件/120>0）{
zoomin（）；
}否则{
zoomout（）；
}
如果（如默认）
e、 预防默认值（）；
});
函数zoomin（）
{
比例=比例+0.01；
提取内容（）；
}
函数zoomout（）
{
比例=比例-0.01；
提取内容（）；
}
}

---

我做错了什么？如何解决此问题？

我可以在您的绘图设置中添加车轮支架，如下所示：

//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值进行定制。添加我在这里找到的函数：并根据需要更改画布大小

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

---

它有调整大小的功能，但是当放大/缩小时，图形仍然会消失。你必须使用从控制盘接收到的增量来调整图像的大小。我用我的第一个代码解决了这个问题…结果我没有更改

var

名称，它把一切都搞乱了