带有SVG弧线路径的圆图

| 简短的问题：使用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分数时，则使用弧线功能。

已邀请:

12 个回复

硕歌沙

与XAML的弧相同。只需用ѭ5闭合99.99％的弧线，您就会有一个圆圈！

艾食魄轻县

我知道它在游戏中有些晚了，但是我记得这个问题是从新的时候开始的，我有一个类似的问题，如果有人仍在寻找一个“正确的”解决方案，我会不小心找到它：

<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）的弧），它表示为“哦，我已经在那儿了，不需要弧！”。我提供的解决方案的优点是：从圆直接转换为路径很容易，并且两条弧线之间没有重叠（如果使用标记或图案等，可能会导致问题）。这是一条干净的连续线，尽管分为两部分。如果它们仅允许文本路径接受形状，则这些都无关紧要。但是我认为他们正在避免这种解决方案，因为圆形等形状元素在技术上没有“开始”点。 jsfiddle演示：http://jsfiddle.net/crazytonyi/mNt2g/ 更新：如果您将路径用作“ 9”参考，并且希望将文本呈现在圆弧的外边缘，则可以使用完全相同的方法，但将扫掠标志从0更改为1，以便将其标记为路径作为表面而不是内部（例如，1,0代表某人坐在中心并在自己周围画一个圆，而1,1代表某人绕中心在半径范围内行走并将粉笔在旁边拖曳，如果有的话）救命）。这是上面的代码，但有更改：

<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
    \"
/>

邦绊门蔽惩

关于安东尼的解决方案，以下是获取路径的函数：

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\';
}

马口

完全不同的方法：除了使用svg指定路径以指定弧线之外，还可以使用伪代码获取一个circle元素并指定一个stroke-dasharray：

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\" />

与多弧路径方法相比，它的简单性是主要优势（例如，在编写脚本时，您仅插入一个值，并且对任意弧长都完成了操作）圆弧从最右边的点开始，可以使用旋转变换来移动。注意：Firefox有一个奇怪的错误，即超过90度或更大的旋转会被忽略。因此，要从顶部开始弧，请使用：

<circle r=\"$r\" transform=\"rotate(-89.9)\" stroke-dasharray=\"$length $max\" />

妊辽剁茧

Adobe Illustrator使用像SVG这样的贝塞尔曲线，并为圆形创建四个点。您可以使用两个椭圆弧命令创建一个圆...但是对于SVG中的一个圆，我将使用<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。

`M${w*0.5 + radius},${h*0.5}
 A${radius} ${radius} 0 1 0 ${w*0.5 + radius} ${h*0.5001}`

只需使用“长弧”标志，即可填充完整标志。然后将弧度设为整个圆的99.9999％。在视觉上是相同的。通过仅从圆的最右边的点（一个圆心直接从中心水平开始）来避免扫掠标记。

泉秘胁

对于像我这样的人，他们希望将椭圆属性转换为路径：

const ellipseAttrsToPath = (rx,cx,ry,cy) =>
`M${cx-rx},${cy}a${rx},${ry} 0 1,0 ${rx*2},0a${rx},${ry} 0 1,0 -${rx*2},0`

邪罗逢确胃

另一种方法是使用两个三次贝塞尔曲线。这适用于使用不识别svg arc参数的PocketSVG的iOS用户。 C x1 y1，x2 y2，x y（或c dx1 dy1，dx2 dy2，dx dy）您要在此处结束线的最后一组坐标（x，y）。另外两个是控制点。（x1，y1）是曲线起点的控制点，（x2，y2）是曲线终点的控制点。

<path d=\"M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0\" />

勺的驴吓识

我做了一个jsfiddle在这里做：

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的输入并在console中获取结果

要回复问题请先登录或注册

带有SVG弧线路径的圆图

12 个回复

发起人

geometry

drawing

geometric_arc

vml

svg

问题状态

带有SVG弧线路径的圆图

与内容相关的链接

12 个回复

发起人

geometry

drawing

geometric_arc

vml

svg

问题状态