svg - 使用贝塞尔曲线或椭圆路径以编程方式绘制椭圆的一部分——SVG 和 raphael.js

Question

我正在尝试围绕具有给定边距的椭圆绘制一条贝塞尔曲线:



我想以编程方式实现这一点，因此如果我更改椭圆大小，曲线将跟随它。

目前我已经做了这个功能:

function bezierPathTopRounded(ellipse, margin) {
    var box = ellipse.paper.getBBox();

    var leftX = box.x - margin; 

    var rightX = box.x + margin + box.width;

    var y = box.y + box.height/2 - margin; 

    var p = "M "+ leftX  + ", "+ y
    + " C " //could be relative too
    + ( box.x - margin + (box.width/15)  )  + ", " + ( box.y + margin - (box.height/4.5)  ) + " "
    + ( box.x + margin + box.width - (box.width/15)  )  + ", " + ( box.y + margin - (box.height/4.5) ) + " "
    + rightX +", " + y;

    return p;   
}

但我无法弄清楚如何计算这个方向点值，以便它可以与任何椭圆一起使用:

box.width/15

box.height/4.5

有一个 fiddle with this example .

我读过这个 stackoverflow question我在我的例子中尝试了同样的方法，但仍然无法找到一个简单的解决方案，它仍然是随机的......

编辑

现在我正在尝试使用椭圆机 A rc，结果比 Bezier Path 更糟糕:



有我正在使用的功能。如果我删除边距，它正好跟随我的椭圆......最后，问题是我如何跟随带有边距的椭圆？

function borderPath(ellipse, margin, flag) {
    var flag = flag == undefined ? 1 : 0;

    var box = ellipse.paper.getBBox();

    var leftX = box.x - margin;

    var rightX = box.x + margin + box.width;

    var y = box.y + box.height/2;
    y += (flag == 1) ? -margin : margin;

    var rx = box.width/2 + margin;
    var ry = box.height/2;

    var p = "M "+ leftX + ", "+ y
    + " A "
    + rx + " " + ry
    + " 0 0 "+ flag +" "
    + rightX +", " + y;

    return p;
}

见 updated fiddle here .

对于糟糕的颜色真的很抱歉，这些是例如目的。

Answer 1

如果你想用贝塞尔曲线来做到这一点，你必须决定你希望它看起来有多“错误”。贝塞尔曲线不能代表圆形(并且通过扩展，椭圆形)曲线，它们只能非常接近，就像多边形一样，只是使用更少的部分具有更高的精度。

我在关于贝塞尔曲线的入门书中使用贝塞尔曲线描述了圆近似和曲线偏移，http://pomax.github.io/bezierinfo/#circles_cubic和 http://pomax.github.io/bezierinfo/#offsetting分别，但如果您是从头开始编码，特别是如果您只需要它来满足您在示例中描述的内容，则抵消将是过度的。

相反，我建议启动 Inkscape 或 Illustrator，打开网格覆盖，并围绕椭圆绘制一条贝塞尔曲线。让它看起来不错，然后检查坐标是什么，并将其用作在 Canvas 程序中实现的足够可靠的信息。你可能不需要数学上严格正确，只要人们不去“看起来错了”，你应该没问题。