Question

我想这更像是一个数学问题，也可能是一个SVG问题。我正在修改我在raphael.js网站上找到的一些示例代码。我已将其修改为具有自定义中心点。现在我想修改它，以便我可以指定弧的起始角度。（类似于d3.js，所以我可以用它来制作一个中间缺失的条形图）。

但是我不知道在哪里或如何开始。我的数学很可怕，我不知道alpha是什么，变量是什么。或者为什么x和y以这种方式计算。我一直在阅读SVG规范，但我遗漏了一些重要的基础知识，我不知道。

有人能指出我正确的方向，所以我可以开始理解这些东西吗？

window.onload = function () {
    var r = Raphael("holder", 600, 600),
        R = 200,
        init = true,
        param = {stroke: "#fff", "stroke-width": 30};
    // Custom Attribute
    r.customAttributes.arc = function (xPos, yPos, value, total, R) {
        var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = xPos + R * Math.cos(a),
        y = yPos - R * Math.sin(a),
        var path = [["M", xPos, yPos - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
        return {path: path};
    };
    var sec = r.path().attr(param).attr({arc: [300, 300, 3, 60, R]});
};

运行代码会产生：

<svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
    <path style="" fill="none" stroke="#bfb5b5" d="M300,100A200,200,0,0,1,361.8033988749895,109.7886967409693" stroke-width="30">
</svg>

此外，我不知道弧参数如何协同工作以绘制他们正在绘制的内容。

对于缺乏对问题的关注而道歉。

编辑：它基于极地时钟示例。 http://raphaeljs.com/polar-clock.html

Answer 1

我认为该示例的作者正在尝试创建自定义属性，以便根据时钟旋转轻松创建弧。基本上，自定义属性的total参数表示时钟的总移动（60秒），而value（在您的情况下为3）表示您尝试绘制的弧的长度（以秒为单位）。所以基本上你的弧度为3秒。

现在进行数学运算：

alpha：弧的角度（以度为单位）。您注意到从秒到度的转换：3秒 - ＆gt; 18度
a：以弧度表示的角度。三角公式使用弧度而非度数，因此您需要此转换。由于某些我不明白的原因，这是互补角度（90 - alpha）
编辑：互补角度（可能）用于补偿这样一个事实：在三角学中，y轴指向上方，而在svg画布上则指向下方。
x, y：您正在绘制的路径（弧）的结束点。这些是使用基本三角法计算的（抱歉......你在这里没有得到任何帮助）。

svg弧的参数在此处描述：http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

SVG，Raphael.js，绘画

1 个答案: