我想这更像是一个数学问题或者可能是一个 SVG 问题。我正在考虑修改在 raphael.js 网站上找到的一些示例代码。我已经将其修改为具有自定义中心点。现在我想修改它,以便我可以指定圆弧从哪个 Angular 开始。 (类似于 d3.js,所以我可以用它来制作类似中间缺失的条形图之类的东西)。
但是我不知道从哪里开始或如何开始。我的数学很糟糕,我不知道 alpha 是什么,a 变量的作用是什么。或者为什么 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
最佳答案
我认为该示例的作者正在尝试创建一个自定义属性,以便轻松创建基于时钟旋转的弧。
基本上,自定义属性的 total
参数表示时钟的总移动量(60 秒),而 value
(在您的情况下为 3)表示时钟的长度(以秒为单位)。您正在尝试绘制的弧线。所以基本上你的弧度是 3 秒。
现在进行数学计算:
alpha
:圆弧的 Angular (以度为单位)。您注意到从秒到度的转换:3 秒 -> 18 度a
:以弧度为单位的 Angular 。三 Angular 公式使用弧度而不是度数,因此您需要进行此转换。由于某种我不明白的原因,这是补 Angular (90 - alpha
)
编辑:补 Angular (可能)用于补偿三 Angular 函数中 y 轴指向上方而在 svg Canvas 上指向下方的事实。x, y
:您正在绘制的路径(弧)的终点。这些是使用初等三 Angular 学计算的(抱歉..您在这里没有得到任何帮助)。
svg 弧线的参数描述如下:http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
关于javascript - SVG、Raphael.js、绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10439903/