Question

我是Snap.svg的新手，我一直在尝试制作一个可以使用鼠标移动和调整大小的矩形。我用过Snap.svg element.drag（）;移动，我使用本教程进行缩放： http://svg.dabbles.info/snaptut-dragscale

点击＆amp;可以拖动它。保持。要缩放，请双击rect一次，然后拖动。我的问题是它移动得很好，直到我决定调整它。当我这样做时，它永远不会退出缩放模式，我再也无法回到原点。我试图摆弄代码，但无法正确使用它。如何在双击后停止缩放？谢谢你的阅读！

这是我的javascript代码：

                      createRect();
                      function createRect(){
                        var r = Snap('#svg');
                        var newRect = r.rect(100,100,80,60);
                        newRect.attr({                            
                            fill:'#afe5ff',
                            stroke:'#000',
                            strokeWidth: 2
                        });   


                         newRect.dblclick( addHandleFunc );

                         var dragging = 0;
                         var handleGroup;

                         function addHandleFunc() {
                            if( dragging === 0 ) {
                                dragging = 1;
                                var bb = this.getBBox();                                    
                                this.drag(move,start,stop);


                            } else {

                                dragging = 0;                                    
                                r.append(this);    

                              }             


                        }

                        function start() {
                        this.data('origTransform', this.transform().local);
                        }

                        function move(dx,dy) {
                             var scale = 1 + dx / 50;
                             this.attr({
                             transform: this.data('origTransform') + (this.data('origTransform') ? "S" : "s") + scale                                 
                             });

                        }

                        function stop() {}

                        newRect.drag(); 

                      }

example

Answer 1

第二次双击时，需要通过将拖动功能重置为默认值来“关闭”缩放模式。为此，只需再次拨打drag()，无需参数。

if ( dragging === 0 ) {
  dragging = 1;
  var bb = this.getBBox();                                    
  this.drag(move,start,stop);
} else {
  dragging = 0;                                    
  this.undrag();
  this.drag();
}

Snap SVG拖动和缩放：我的矩形不会停止缩放？

1 个答案: