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

Mouse wheel zooming effect in svg - to move to the center point and stop zooming when it reaches the limit

本文关键字：缩放 中心点 极限 鼠标 svg 移动      更新时间：2023-09-26

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

下面是我的代码，我重置了svgedit.compiled.js

的zoomChanged函数中的缩放级别
           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时，缩放应该停止。

谁能指点我，我到底错在哪里?

在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;
...

注意这里使用的是局部变量

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

将var zoomlevel = 0.4;改为zoomlevel = 0.4;

那么它可能会起作用

相关文章：