Question

我对以下演示有疑问 - http://raphaeljs.com/hand.html。

以下是示例代码......

var r = Raphael("holder", 640, 480), angle = 0;
while (angle < 360) {
    var color = Raphael.getColor();
    (function(t, c) {
        r.circle(320, 450, 20).attr({
            stroke : c,
            fill : c,
            transform : t,
            "fill-opacity" : .4
        }).click(function() {
            s.animate({
                transform : t,
                stroke : c
            }, 2000, "bounce");
        }).mouseover(function() {
            this.animate({
                "fill-opacity" : .75
            }, 500);
        }).mouseout(function() {
            this.animate({
                "fill-opacity" : .4
            }, 500);
        });
    })("r" + angle + " 320 240", color);
    angle += 30;
}
Raphael.getColor.reset();
var s = r.set();
s.push(r.path("M320,240c-50,100,50,110,0,190").attr({
    fill : "none",
    "stroke-width" : 2
}));
s.push(r.circle(320, 450, 20).attr({
    fill : "none",
    "stroke-width" : 2
}));
s.push(r.circle(320, 240, 5).attr({
    fill : "none",
    "stroke-width" : 10
}));
s.attr({
    stroke : Raphael.getColor()
});

我的问题是关于以下代码行......

("r" + angle + " 320 240", color);

在匿名函数中，圆最初绘制在320,450，半径为20.然后应用变换，例如（“r30 320 240”），当角度为30时。

这种转变如何运作？我读取此变换的方式是将圆圈旋转30度左右，然后向左移动320度，然后向下移动320（向右），向下移动240度。

但我显然错误地认为这种转变是错误的，因为这不是正在发生的事情。

我缺少什么？

由于

Answer 1

变换"r30 320 240" 设置对象绕点（320,240）旋转30度。 它不会添加到旋转中。它会覆盖以前的任何转换。

如果你看一下这个例子：

http://jsfiddle.net/jZyyy/1/

你可以看到我正在围绕点（0,0）设置圆的旋转。如果您将点（0,0）视为时钟的中心，则圆圈从3点开始。如果我使用变换"r90 0 0"，圆圈将从3点钟旋转到6点钟。如果我稍后将变换设置为"r30 0 0"，则圆圈将位于4点钟位置，从原始3点钟位置绕点（0,0）旋转30度。

RaphaelJS - 我需要帮助理解变换

1 个答案: