Question

我正在尝试使用snap.svg。我创建了一个圆形，一个矩形和一个图像。我可以拖动圆圈而不是其他任何东西。我不知道出了什么问题。最近1小时一直在拍摄问题。

var s = Snap(400,400);
var img_src = "http://static.jsbin.com/images/dave.min.svg";
var rectangle = s.rect(160, 190, 150,150);
var bigCircle = s.circle(100, 100, 100);
var image = s.image(img_src, 10, 10, 80, 80);

var moveFunc = function (dx, dy, posx, posy) {      
  this.attr( { cx: posx , cy: posy } );
};

bigCircle.drag( moveFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

rectangle.drag( moveFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

我使用的工作代码： http://jsbin.com/vanequ/edit?html,js,output

更新当我没有将移动功能传递给矩形和图像时，它似乎有效。然而，当函数处于圆形时，它可以工作。我不知道为什么。因为我还没有完全理解snap.svg，这可能与我的无知有关。

这有效：

rectangle.drag();
image.drag();

Answer 1

您的moveFunc正在设置cx / cy属性。圆形元素使用cx / cy属性定位，但rect和image元素使用x / y属性定位。因此，moveFunc仅适用于circle元素。一种可能的解决方案是具有两个移动函数：一个用于设置cx / cy的圆的函数和一个用于设置x / y的rect / image的函数。例如......

var s = Snap(400,400);
var img_src = "http://static.jsbin.com/images/dave.min.svg";
var rectangle = s.rect(160, 190, 150,150);
var bigCircle = s.circle(100, 100, 100);
var image = s.image(img_src, 10, 10, 80, 80);

var moveCircleFunc = function (dx, dy, posx, posy) {      
  this.attr( { cx: posx , cy: posy } );
};
var moveRectFunc = function (dx, dy, posx, posy) {      
  this.attr( { x: posx , y: posy } );
};

bigCircle.drag( moveCircleFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

rectangle.drag( moveRectFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );
image.drag( moveRectFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

只能使用snap.svg在svg中拖动圆圈

1 个答案: