Question

所以，我正在使用snap.svg，我想随着时间的推移动态旋转一个对象。像这样：

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

问题是我不知道如何访问我的显示对象的旋转值（或者如果它们甚至存在！）所以考虑到一些简单的东西，让我们说一个像这样声明的圆圈：

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

我知道我可以像这样访问x和y值：

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

我需要帮助的是：

是否有某种旋转属性可用于旋转此对象？
如果没有，如何使用snap.svg旋转对象？

Answer 1

使用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'
                });

也许这对某些人有用。

Answer 2

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

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'）'看到'结果转换，但我可能会在开始时离开它。

如何使用snap.svg获取svg对象的旋转值？

2 个答案: