简短的问题:使用SVG路径,我们可以绘制一个圆圈的99.99%并显示出来,但是当它是一个圆圈的99.99999999%时,那么圆圈就不会显示出来。怎么修好?
以下SVG路径可以绘制一个圆的99.99%:(在http://jsfiddle.net/DFhUF/1381/上尝试它,看看你是否看到4个弧或只有2个弧,但请注意,如果它是IE,它是用VML渲染的,而不是SVG,但有类似的问题)
M 100 100 a 50 50 0 1 0 0.00001 0
但是当它是一个圆圈的99.99999999%时,什么都没有显示出来?
M 100 100 a 50 50 0 1 0 0.00000001 0
这与100%的圆圈相同(它仍然是弧形,不是它,只是一个非常完整的圆弧)
M 100 100 a 50 50 0 1 0 0 0
怎么能修好?原因是我使用一个函数绘制一个弧的百分比,如果我需要“特殊情况”一个99.9999%或100%的弧来使用圆函数,那就太傻了。
同样,使用RaphaelJS的jsfiddle的测试用例是在http://jsfiddle.net/DFhUF/1381/ (如果它是IE 8上的VML,即使第二个圆圈也不显示......你必须将它改为0.01)
更新:
这是因为我在我们的系统中为得分渲染弧,所以3.3点得到1/3的圆。 0.5得到半圈,9.9得到99%的圈。但是如果我们的系统中得分为9.99呢?我是否必须检查它是否接近圆的99.999%,并相应地使用arc
函数或circle
函数?然后得分9.9987怎么样?哪一个使用?要知道什么样的分数将映射到“太完整的圆圈”并切换到圆形功能是荒谬的,当它是圆圈的“99.9%”或9.9987分时,则使用弧功能。
XAML的弧也一样。用Z
关闭99.99%的弧度,你就得到了一个圆圈!
对于像我这样寻找椭圆属性进行路径转换的人:
`M${w*0.5 + radius},${h*0.5}
A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`
我在这里做了一个jsfiddle:
<path d="M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0" />
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
}
console.log(describeArc(255,255,220,134,136))
您需要做的就是更改console.log的输入并在控制台中获取结果
我知道游戏有点晚了,但我记得这个问题是从新的时候开始我有类似的困难,如果还有人在寻找一个问题,我会意外地找到“正确”的解决方案:
<path
d="
M cx cy
m -r, 0
a r,r 0 1,0 (r * 2),0
a r,r 0 1,0 -(r * 2),0
"
/>
换句话说,这个:
<circle cx="100" cy="100" r="75" />
可以通过以下方式实现:
<path
d="
M 100, 100
m -75, 0
a 75,75 0 1,0 150,0
a 75,75 0 1,0 -150,0
"
/>
诀窍是有两个弧,第二个是在第一个离开的地方拾取并使用负直径返回到原始弧起点。
它不能在一个圆弧中完成一个圆圈的原因(我只是在推测)是因为你会告诉它从它自己(比如150,150)到它自己(150,150)绘制一个圆弧,它会渲染它因为“哦,我已经在那里,没有必要!”。
我提供的解决方案的好处是:
如果他们只允许文本路径接受形状,这一切都不重要。但我认为他们正在避免这种解决方案,因为像圆圈这样的形状元素在技术上并没有“起点”。
jsfood但是:kuzxsw
如果您正在使用http://jsfiddle.net/crazytonyi/mNt2g/参考的路径,并且您希望文本在弧的外边缘渲染,您将使用完全相同的方法,但将sweep-flag从0更改为1,以便它处理外部作为表面而不是内部的路径(想想textPath
有人坐在中心并围绕自己画一个圆圈,而1,0
就像有人在半径距离中心绕着中心走动并拖着他们的粉笔在旁边,如果有任何帮助的话)。以下是上面的代码,但有更改:
1,1
在参考Anthony的解决方案时,这是一个获取路径的函数:
<path
d="
M cx cy
m -r, 0
a r,r 0 1,1 (r * 2),0
a r,r 0 1,1 -(r * 2),0
"
/>
完全不同的方法:
您可以使用圆形元素并在伪代码中指定stroke-dasharray,而不是摆弄在svg中指定弧的路径:
function circlePath(cx, cy, r){
return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
}
它的简单性是优于多弧路径方法的主要优势(例如,当您编写脚本时,您只插入一个值并且您已经完成了任何弧长)
弧从最右边的点开始,可以使用旋转变换进行移动。
注意:Firefox有一个奇怪的错误,忽略旋转超过90度或更多。因此,要从顶部开始弧,请使用:
with $score between 0..1, and pi = 3.141592653589793238
$length = $score * 2 * pi * $r
$max = 7 * $r (i.e. well above 2*pi*r)
<circle r="$r" stroke-dasharray="$length $max" />
Adobe Illustrator使用像SVG这样的贝塞尔曲线,对于圆圈,它创建了四个点。你可以创建一个带有两个<circle r="$r" transform="rotate(-89.9)" stroke-dasharray="$length $max" />
的圆圈......但是对于SVG中的圆圈,我会使用elliptical arc commands :)
使用两个arc命令绘制一个完整的圆圈是个好主意。
通常,我使用椭圆或圆形元素绘制一个完整的圆。
在Anthony和Anton的答案的基础上,我结合了旋转生成的圆圈而不影响其整体外观的能力。如果您使用动画路径并且需要控制它的开始位置,这将非常有用。
<circle />
写成一个函数,它看起来像这样:
function(cx, cy, r, deg){
var theta = deg*Math.PI/180,
dx = r*Math.cos(theta),
dy = -r*Math.sin(theta);
return "M "+cx+" "+cy+"m "+dx+","+dy+"a "+r+","+r+" 0 1,0 "+-2*dx+","+-2*dy+"a "+r+","+r+" 0 1,0 "+2*dx+","+2*dy;
}
这些答案太复杂了。
一种更简单的方法,无需创建两个弧或转换为不同的坐标系。
假设您的画布区域的宽度为function getPath(cx,cy,r){
return "M" + cx + "," + cy + "m" + (-r) + ",0a" + r + "," + r + " 0 1,0 " + (r * 2) + ",0a" + r + "," + r + " 0 1,0 " + (-r * 2) + ",0";
}
,高度为w
。
h
只需使用“长弧”标志,即填充完整标志。然后使弧度为99.9999%的整圆。在视觉上它是一样的。只需启动圆圈最右边的圆圈(从中心直接水平的一个半径),避免扫描标记。