使用RaphaëlJS和SVG调整扇区路径的更优雅的方法是什么？

Question

我第一次使用Raphaël只有很少的svg经验,我需要一个真正了解这两个人的人来帮助我.

我创建了一个包含动态扇区的饼图.可以通过拖动圆形按钮来调整扇区的大小.看到这个小提琴.我只在Chrome和Safari中测试过,这是唯一需要的浏览器.

饼图尚未完成.这些部门可以重叠.请暂时忽略这一点.

当扇区的起始角度大于结束角度时,我遇到了问题.当结束角度超过0/360°标记时就是这种情况.为了解决这个问题,我使用了path- rotation -parameter.我向后移动扇区,同时向后移动角度,直到结束角度为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"]);
}

虽然它很好用,但我有点怀疑.这可以在没有路径旋转的情况下解决吗？我感谢任何帮助或指点.

Answer 1

Can this be solved without the rotation of the path?

答：可以。您根本不必更改路径的旋转。除非我遗漏了一些东西，否则以下代码似乎与您在小提琴中的代码的工作方式相同：

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"]);
}

说明：为了进行解释，我将使用W3 Spec和Raphael Reference Library 中的 SVG 术语 。也就是说，当您使用cx、cy和 时，它们分别rotation使用rx、ry和。x-axis-rotation

简而言之，每当rxequal时ry，thenx-axis-rotation就毫无意义。

看看这个 SVG。使用浏览器的开发工具，或将 SVG 保存到计算机并使用文件编辑器进行编辑。具体来说，查看最后一个path元素，其中有四个弧线。尝试修改x-axis-rotation每个弧上的值。您会注意到，当您更新值时，第一条弧（其中rx和ry均为“25”）永远不会改变x-axis-rotation。

为什么？ 这是因为你有一个圆弧。不管你把一个圆旋转多少圈，它仍然是同一个圆。例如，在您面前举起一个玻璃杯，使玻璃杯与地面水平，而您则直接向下看玻璃杯。现在用手腕旋转/扭转玻璃。你看到你看到的圆形形状如何保持相同的圆形形状吗？现在将玻璃杯正常地放在桌子上（这样它是垂直的并且可以容纳液体）。现在把玻璃杯翻过来。可以看到明显的视角变化；它原本是朝上的，但现在是平放的。就是这样x-axis-rotation。

也许更好的例子是使用前面提到的 SVG 文件。玩弄x-axis-rotation最后一个元素中的弧线path。您将看到弧线正在旋转。就是这样x-axis-rotation。

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

性能： 我尝试使用 JavaScriptsector_update在修改和不修改x-axis-rotation变量的情况下对函数进行计时。结果？我没有看到性能上的差异。大部分时间都花在实际绘制 SVG 上，而不是花在确定其值的数学上。事实上，您在 JavaScript 中真正要做的就是更新代码以设置path元素中的值。此时，浏览器将接管其渲染引擎来实际绘制 SVG 对象。我想这是每个浏览器的问题，因为每个浏览器都有不同的渲染性能。但至于这个x-axis-rotation值有没有影响，我的猜测是没有。如果性能受到影响（因为浏览器可能必须执行额外的浮点运算），那么它就毫无意义，因为绝大多数时间都花在绘制对象上，而不是计算它的值上。所以我想说不用担心。

我希望这有帮助，如果我错过了什么或者没有解释得足够好，请告诉我。