Raphael JS - 旋转整个组合导致奇怪的旋转

时间:2014-04-21 08:52:15

标签: javascript raphael

[已编辑,因为我取得了进展]

我的这个轮子的文字线性跨越。

这是JS小提琴,用于显示视觉和我的代码:

http://jsfiddle.net/DarcFiddle/F3gsD/10/

所以我创建了一个集合:

paper.setStart();
// draw draw draw
var set = paper.setFinish();

然后这是旋转它的方法:

var degree = 0;
function rotateSet() {
  degree = degree + 90;
  set.animate({ transform: ["R", degree, canvasCenter, canvasCenter]}, 500 );
}

您可以通过单击JSFiddle中的“旋转”按钮来尝试此操作。

但正如您所看到的,元素也会在其自身的中心旋转,从而破坏结构。

我该怎么做才能防止这种情况发生?

由于

1 个答案:

答案 0 :(得分:1)

我用双重旋转

http://jsfiddle.net/DarcFiddle/F3gsD/12/

所以,我循环设置并进行两次r转换。第一个是圆圈的中心,第二个是仅回转上面评论中 Ian 建议的文字。

set.forEach(function(e) {
    var textDegree = Math.round( Raphael.angle(e.attr("x"), e.attr("y"), x, y) );

    if(e.attr("text-anchor") === "end") {
      textDegree = textDegree - 180;
    }

    e.animate({
      transform: ["r", degree, x, y, "r", textDegree, e.attr("x"), e.attr("y")]
    }, 500);
});