Question

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

以下是我的代码，我在zoomChanged的{{1}}函数中重置了缩放级别

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

当滚动鼠标滚轮并且当它达到0.4或9.5时，网格停止缩放，但缩放级别仍然会改变，并且它会缩放到放置鼠标的位置。

我需要将工作区域放大到放置鼠标的中心，当它到达zoomChanged: function(zoom) { if (showGrid) { if(zoom > 0.4 & zoom < 9.5) { updateGrid(zoom); } } },或minimum 0.4时，应停止缩放。

任何人都可以指导我，我哪里出错了？

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

Answer 2

请注意您使用的是本地变量

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

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

然后它可能会起作用

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

2 个答案: