Question

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

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

这是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中的“旋转”按钮来尝试此操作。

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

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

由于

Answer 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);
});

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

1 个答案: