SVG，Raphael.js，绘图

这我猜是更多的数学问题或SVG问题。我正在修改我在raphael.js网站上找到的一些示例代码。我已经将其修改为具有自定义中心点。现在我想修改它，以便我可以指定圆弧从哪个角度开始。（类似于d3.js，所以我可以用它来创建类似于中间缺失的条形图）。SVG，Raphael.js，绘图

但是我不知道在哪里，如何开始。我的数学很糟糕，我不知道什么是α和变量。或者为什么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

来源

2012-05-03 guided1

请解释为什么会被否决。这都是关于学习。无论是学习代码还是学习如何发布问题。 – guided1

你可以发布一个链接到原始的例子吗？ – mihai

对我来说好像是个好问题+1。这不是微不足道的，并且表现出了良好的事前尝试。 @引导1 - 未声明的downvotes是一个偶尔的事实StackOverflow生活。不要太担心'：'' – halfer

我认为，例如笔者试图以可以很容易地创建基于时钟旋转的弧创建一个自定义属性。基本上total放慢参数自定义属性代表了时钟（60秒）的总运动，同时value（你的情况3）代表您要画圆弧的长度（秒）。所以基本上你有一个3秒的弧。

现在的数学：

alpha：所述角（度）的圆弧。您注意到从秒到度的转换：3秒 - > 18度
a：以弧度表示的角度。三角函数公式使用弧度而不是度数，所以你需要这种转换。出于某种原因，我不明白，这是互补的角度（90 - alpha）
编辑：余角是（可能）用于补偿的事实，三角y轴指向上方，而在SVG画布向下指向。
x, y：结束您绘制的路径（ARC）的点。这些都是使用基本的三角学计算的（对不起......你在这里没有得到任何帮助）。

为SVG弧参数描述如下：http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands

来源

2012-05-03 22:42:01 mihai

谢谢。谢谢。谢谢。我很惭愧地承认我的基本动机也是缺乏的。关闭http://www.khanacademy.org/我去。 – guided1

SVG，Raphael.js，绘图

回答

相关问题