javascript - svg中的鼠标滚轮缩放效果-移动到中心点并在到达极限时停止缩放

Question

svg 中的鼠标滚轮缩放效果 - 如何缩放到工作区域的中心点，以及如何在达到最小和最大缩放级别时停止缩放级别。在哪里设置最小和最大缩放值？

下面是我的代码，我在 zoomChanged 中重置了缩放级别svgedit.compiled.js的功能

           if (zoomlevel < 0.4) {                   
                 //changeZoom({value: 0.4});
                 var zoomlevel = 0.4;
                return;
            }

             if (zoomlevel > 9.5) {                 
                // changeZoom({value: 9.5});    
                var zoomlevel = 9.5;                    
                return;
            } 

以及ext-grid.js我已经放置了以下代码

zoomChanged: function(zoom) {
        if (showGrid)
        {           
            if(zoom > 0.4 & zoom < 9.5)
            {
                updateGrid(zoom);
            }           
        }
    },

当鼠标滚轮滚动到0.4或9.5时，网格停止缩放，但缩放级别仍然变化，并缩放到鼠标放置的点。

我需要工作区域应该缩放到中心，无论鼠标放在哪里，当它到达 minimum 0.4 时或maximum 9.5应停止缩放。

谁能指导我，我哪里出了问题？

Answer 1

在 svg-editor.js 文件中有这个函数:

var zoomChanged = svgCanvas.zoomChanged = function(win, bbox, autoCenter)

如果将 autoCenter 变量设置为 true，您可以强制缩放到工作区域的中心。所以:

var zoomChanged = svgCanvas.zoomChanged = function(win, bbox, autoCenter) {
    autoCenter = true;
    var scrbar = 15,
    ....

要限制缩放级别，请打开 svgcanvas.js 并搜索:

this.setZoom = function(zoomlevel)

您可以在此处设置最小/最大缩放级别。 例如，如果您希望允许最小值为 100%，最大值为 400%，您可以编写:

this.setZoom = function(zoomlevel) {
    if (zoomlevel<1) zoomlevel=1;
    if (zoomlevel>4) zoomlevel=4;
...