4

So, I'm using snap.svg and I'd like to dynamically rotate an object over time. Something like this:

function rotateObject()
{
    myObject.rotation += value;
}

The problem is I don't know how to access the rotation values for my display objects (or if they even exist!) So given something simple, let's say a circle declared like this:

snap = Snap(800,600);   
circle = snap.circle(400,300,50);

I know I can access the x and y values like so:

circle.attr("cx");
circle.attr("cy");

What I need help with is:

  1. Is there a rotation property of some sort that I can use to rotate this object?
  2. If not, how do I rotate an object with snap.svg?
4

2 回答 2

6

使用Snap.Matrix()更好地旋转对象

Ian建议的方式非常适合我使用 Chrome 版本 < 36.0 当我将 Chrome 更新到 36.0.1985.125 时，我看到了文本旋转的错误。

所以，解决方案是使用

var matrix = new Snap.Matrix();
matrix.rotate(-90, x, y);    
Paper.text(x, y, 'Text').attr({
                    fontWeight: 'bold',
                    fill: '#434343',
                    transform: matrix
                });

代替

Paper.text(x, y, 'Text').attr({
                    fontWeight: 'bold',
                    fill: '#434343',
                    transform: 'r-90'
                });

也许它对某人有用。

于 2014-07-17T12:09:26.443 回答
5

理想情况下，您将自己控制旋转（而不是从可能但更复杂的属性中找出它）。动画可以更容易，这取决于您的需要。这是一个示例，显示了一些带有矩形的基本动画（因为如果围绕中心，圆形旋转就是它本身）...

s = Snap(400, 620);

var myRect = s.rect(100, 100, 100, 200).attr({
    fill : 'white',
    stroke : 'black'
});
var myRotate = 45;

// if you wanted to rotate manually using your own adjust variable then this
// myRect.transform("r" + myRotate);
// but simpler in most cases to use the animate method


myRect.animate( { transform: "r" + myRotate + ",150,200" }, 1000 ); //rotate around centre of 150,200

小提琴http://jsfiddle.net/XG7ks/6/

实际上，最好对使用 SVG 进行转换（以及平移、旋转、缩放）有一个基本的了解，以使其更有意义。您可以使用 myRect.attr('transform') '看到' 生成的转换，但我可能会一开始就离开它。

于 2013-11-21T22:56:16.007 回答