2

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

围绕椭圆的贝塞尔路径

我想以编程方式实现这一点，所以如果我改变椭圆大小，曲线会跟随它。

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

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
  • 盒子高度/4.5

这个例子有一个小提琴。

我已经阅读了这个stackoverflow问题，并在我的示例中尝试了相同的方法，但仍然无法找到一个简单的解决方案，它仍然是随机的......

编辑

现在我正在尝试使用椭圆Arc，结果比使用 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;
}

在此处查看更新的小提琴。

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

4

3 回答 3

2

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

我在我的贝塞尔曲线入门中分别使用贝塞尔曲线描述了圆近似和曲线偏移， http: //pomax.github.io/bezierinfo/#circles_cubic和http://pomax.github.io/bezierinfo/#offsetting，但是，如果您是从头开始编写代码，特别是如果您只需要在示例中描述的内容，那么偏移将是多余的。

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

于 2013-04-19T12:07:32.197 回答
1

我已经设法根据椭圆及其边距制作椭圆弧。比我简单地用矩形隐藏我不想要的部分。

这是功能：

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

    var box = ellipse.paper.getBBox();

    var leftX = box.x;

    var rightX = box.x + box.width;

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

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

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

    return p;
}
于 2013-04-26T07:59:49.163 回答
0

使用贝塞尔曲线绘制椭圆路径可能会让您头疼。正如您在评论中所说，您正在使用与 RaphaelJS 配合良好的路径弧。

可以在http://www.svgbasics.com/arcs.html找到有关它所期望的所有值的文档，尤其是标志。

于 2013-04-20T07:59:08.307 回答