您想使用elliptical Arc command . 不幸的是,这需要你指定起点和终点的笛卡尔坐标(x,y)而不是你拥有的极坐标(半径,角度),所以你必须做一些数学运算 . 这里's a JavaScript function which should work (though I haven' t测试了它,我希望这是相当不言自明的:
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = angleInDegrees * Math.PI / 180.0;
var x = centerX + radius * Math.cos(angleInRadians);
var y = centerY + radius * Math.sin(angleInRadians);
return [x,y];
}
哪个角度对应于哪个时钟位置将取决于坐标系;只需交换和/或否定sin / cos术语 .
arc命令具有以下参数:
rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y
function myArc(cx, cy, radius, max){
var circle = document.getElementById("arc");
var e = circle.getAttribute("d");
var d = " M "+ (cx + radius) + " " + cy;
var angle=0;
window.timer = window.setInterval(
function() {
var radians= angle * (Math.PI / 180); // convert degree to radians
var x = cx + Math.cos(radians) * radius;
var y = cy + Math.sin(radians) * radius;
d += " L "+x + " " + y;
circle.setAttribute("d", d)
if(angle==max)window.clearInterval(window.timer);
angle++;
}
,5)
}
myArc(110, 110, 100, 360);
12 回答
扩展@ wdebeaum的好答案,这是一个生成弧形路径的方法:
使用
并在你的HTML中
Live demo
您想使用elliptical Arc command . 不幸的是,这需要你指定起点和终点的笛卡尔坐标(x,y)而不是你拥有的极坐标(半径,角度),所以你必须做一些数学运算 . 这里's a JavaScript function which should work (though I haven' t测试了它,我希望这是相当不言自明的:
哪个角度对应于哪个时钟位置将取决于坐标系;只需交换和/或否定sin / cos术语 .
arc命令具有以下参数:
第一个例子:
rx
=ry
= 25和x-axis-rotation
= 0,因为您需要一个圆而不是椭圆 . 您可以使用上面的函数分别计算起始坐标(应该是M
ove到)和结束坐标(x,y),分别是屈服(200,175)和约(182.322,217.678) . 到目前为止,鉴于这些限制,实际上可以绘制四个弧,因此两个标志选择其中一个 . 我猜你可能想要在减小角度的方向上绘制一个小弧(意思是large-arc-flag
= 0)(意思是sweep-flag
= 0) . 总之,SVG路径是:对于第二个示例(假设您指的是相同的方向,因此是一个大弧),SVG路径是:
我再次测试过这些 .
(编辑2016-06-01)如果像@clocksmith一样,你想知道他们为什么选择这个API,那么看一下implementation notes . 它们描述了两种可能的弧参数化,"endpoint parameterization"(他们选择的那种)和"center parameterization"(这就像问题所用的那样) . 在"endpoint parameterization"的描述中,他们说:
所以基本上它是弧的副作用被视为更大路径的一部分而不是它们自己的独立对象 . 我想如果你的SVG渲染器不完整,它可以跳过它不知道如何渲染的任何路径组件,只要它知道它们采用了多少个参数 . 或者它可以实现具有许多组件的路径的不同块的并行渲染 . 或许他们这样做是为了确保舍入错误不会沿着复杂路径的长度积累 .
实现说明对于原始问题也很有用,因为它们有更多的数学伪代码用于在两个参数化之间进行转换(我在第一次写这个答案时没有意识到) .
我略微修改了opsb的答案,并支持填充圆圈扇区 . http://codepen.io/anon/pen/AkoGx
JS
HTML
我想评论一下@Ahtenus的答案,特别是关于Ray Hulha的评论说,codepen没有显示任何弧形,但我的声誉不够高 .
这个codepen无法工作的原因是它的html错误,行程宽度为零 .
我修复了它并在这里添加了第二个例子:http://codepen.io/AnotherLinuxUser/pen/QEJmkN .
html:
相关的CSS:
javascript:
@ opsb的答案很整洁,但中心点不准确,而且,正如@Jithin所说,如果角度是360,那么根本就没有绘制 .
@Jithin解决了360问题,但是如果你选择的程度低于360度,那么你将获得一条关闭弧循环的线,这不是必需的 .
我解决了这个问题,并在下面的代码中添加了一些动画:
wdebeaum的原始polarToCartesian函数是正确的:
使用以下内容反转起点和终点:
令人困惑(对我而言),因为这会扭转扫描标志 . 使用:
随着sweep-flag = "0"绘制"normal"反时钟弧,我认为这更直接 . 见https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
对@ opsb的回答略有修改 . 我们不能画一个完整的用这种方法圈起来 . 即如果我们给(0,360)它将不会绘制任何东西 . 所以稍作修改就可以解决这个问题 . 显示有时达到100%的分数可能很有用 .
这是一个老问题,但我发现代码很有用并且让我节省了三分钟的思考:)所以我在 @opsb 的答案中添加了一个小扩展 .
如果您想将此弧转换为切片(以允许填充),我们可以稍微修改代码:
你去吧!
ES6版本:
图像和一些Python
只是为了更好地澄清并提供另一种解决方案 . Arc [
A
]命令使用当前位置作为起点,因此必须先使用Moveto [M]命令 .那么
Arc
的参数如下:如果我们定义例如以下svg文件:
以下代码将为您提供以下结果:
您将使用参数
xf
和yf
为A
设置M
结束点的起点 .我们正在寻找圆圈所以我们设置
rx
等于ry
这样做基本上现在它将尝试找到与起点和终点相交的半径rx
的所有圆圈 .你可以在我写的this post中有更详细的解释 .
您可以使用我为上面的答案做的JSFiddle代码:
https://jsfiddle.net/tyw6nfee/
您需要做的就是更改最后一行console.log代码并为其指定自己的参数:
ReactJS组件基于所选答案: