Javascript 使用Raphaë；l JS和SVG？

我第一次使用svg时几乎没有什么经验，我需要一个真正熟悉这两个方面的人来帮助我

我创建了一个带有动态扇区的饼图。通过拖动圆形按钮，可以调整扇区的大小。看见我只测试了Chrome和Safari，这是唯一需要的浏览器

饼图尚未完成扇区可以重叠。请暂时忽略此问题。

当扇形的起始角大于结束角时，我面临着一些问题。当结束角超过0/360°标记时，就是这种情况。为了解决这个问题，我使用了path-rotation-参数。我向前移动扇区，同时向后移动角度，直到末端角度为360度。您可以在该函数的小提琴中看到：

function sector_update(cx, cy, r, startAngle, endAngle, sec) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);


    var rotation = 0;

    // This is the part that I have the feeling could be improved.
    // Remove the entire if-clause and let "rotation" equal 0 to see what happens
    if (startAngle > endAngle) {
        rotation = endAngle;
        startAngle = startAngle - endAngle;
        endAngle = 360;
    }

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, rotation, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]);
}

---

虽然效果不错，但我还是有点怀疑。在不旋转路径的情况下可以解决此问题吗？非常感谢您的帮助和指点。

如果不旋转路径，是否可以解决此问题？

回答：是的，可以。您根本不必更改路径的旋转。除非我遗漏了什么，否则以下代码的工作原理似乎与您在小提琴中的代码相同：

function sector_update(cx, cy, r, startAngle, endAngle, sec) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);

    //notice there is no "roation" variable
    if (startAngle > endAngle) {
        startAngle -= endAngle;
        endAngle = 360;
    }

    sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, 0, 
    +(endAngle - startAngle > 180), 0, x2, y2, "z"]);
}

解释：对于我的解释，我将在 和。也就是说，当您使用

cx

、

cy

和

rotation

时，它们分别使用

rx

、

ry

和

x轴旋转

简而言之，只要

rx

等于

ry

，那么

x轴旋转

就没有意义了。

看。使用浏览器的开发工具，或者将SVG保存到计算机，然后使用文件编辑器对其进行编辑。具体来说，请查看最后一个

路径
元素，其中有四个圆弧。尝试修改每个圆弧上的
x轴旋转
值。您将注意到，当您更新
x轴旋转
值时，第一个圆弧（其中
rx
和
ry
均为“25”）从未改变

为什么？这是因为你有一个圆弧。无论你把一个圆旋转多少圈，它仍然是同一个圆。例如，在你面前举起一个玻璃杯，使玻璃杯与地面水平，你可以直接向下看。现在用手腕旋转/扭转玻璃。你看到你看到的圆形是如何保持不变的吗？现在将玻璃杯正常地放在桌子上（这样它是垂直的，可以盛放液体）。现在把杯子倒过来。你可以看到明显的视角变化；它本来是指向上的，但现在它是平放的。这就是x轴旋转的作用

也许一个更好的例子是使用前面提到的SVG文件。在最后一个
路径
元素中的圆弧上玩
x轴旋转
。您将看到圆弧正在旋转。这就是x轴旋转的作用

回到您的代码：因为您只处理圆形对象，
x轴旋转
对最终输出没有影响。只要您只处理循环对象，就可以将其值硬编码为零，而无需担心。您真正需要做的就是修改角度，这是您正确完成的

性能：我尝试使用JavaScript对
扇区更新
函数计时，包括修改
x轴旋转
变量和不修改
x轴旋转
变量。结果如何？我看不出性能有什么不同。大部分时间都花在实际绘制SVG上，而不是决定SVG值的数学上。事实上，在JavaScript中真正要做的就是更新代码，以设置
path
元素中的值。此时，浏览器将接管其渲染引擎，以实际绘制SVG对象。我想这是每个浏览器的问题，因为每个浏览器具有不同的渲染性能。但是关于
x轴旋转
值是否有任何影响，我的猜测是否定的。如果性能受到影响（因为浏览器可能需要执行额外的浮点操作），这是非常没有意义的，因为绝大多数时间都花在绘制对象上，而不是计算对象的值。所以我想说不要担心

我希望这能有所帮助，如果我遗漏了什么或解释得不够好，请告诉我。
不管怎样，你的解决方案对我来说很好。似乎这个问题的格式更适合我。试着在那里发帖。@EliranMalka谢谢你的提示。嘿，谢谢你的时间和详尽的回答。关于旋转，你是对的。我不知道我为什么要那样做，但这不是必须的。我希望其他人能从这次问答中获益。