0

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ズームを停止する必要があります。

どこが間違っていたのか、誰かが私を導くことができますか?

4

2 に答える 2

2

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;
...
于 2015-06-12T08:22:57.783 に答える