【问题标题】:How do I draw a closed curve over a set of points?如何在一组点上绘制闭合曲线?
【发布时间】:2013-03-28 20:25:41
【问题描述】:

基本上我想画一个多边形,但我希望边缘看起来柔软而不是坚硬。由于多边形的形状很重要,所以边必须越过点。

我发现单调三次样条对于开放曲线(即,不会环绕自身的曲线)是准确的,但我发现的算法预先计算点 0 和 N。我可以以某种方式将它们更改为工作有闭合曲线?

我正在用 JavaScript 实现它,但伪代码也一样。

【问题讨论】:

  • 你的意思是在画布上吗?
  • 不太相关,因为我只需要找出坐标。但是,是的。如果您有解决方案,SVG 也可以,在这种情况下,我可以将其转换为画布。
  • “边缘看起来很柔软”是指“顶点看起来很柔软”吗?
  • 我的意思是两条边之间的角度差(由一个顶点连接)应该是平滑的曲线,而不是突变。 @MBo 在他的回答中是正确的(见图),尽管我很欣赏单调三次样条的相同解决方案。

标签: javascript math drawing spline


【解决方案1】:

There is an easy method(由 Maxim Shemanarev 开发)构建(通常)在一组点上设置的好看的封闭贝塞尔曲线。示例:

算法的关键时刻:

和示例代码:

  // Assume we need to calculate the control
    // points between (x1,y1) and (x2,y2).
    // Then x0,y0 - the previous vertex,
    //      x3,y3 - the next one.

    double xc1 = (x0 + x1) / 2.0;
    double yc1 = (y0 + y1) / 2.0;
    double xc2 = (x1 + x2) / 2.0;
    double yc2 = (y1 + y2) / 2.0;
    double xc3 = (x2 + x3) / 2.0;
    double yc3 = (y2 + y3) / 2.0;

    double len1 = sqrt((x1-x0) * (x1-x0) + (y1-y0) * (y1-y0));
    double len2 = sqrt((x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));
    double len3 = sqrt((x3-x2) * (x3-x2) + (y3-y2) * (y3-y2));

    double k1 = len1 / (len1 + len2);
    double k2 = len2 / (len2 + len3);

    double xm1 = xc1 + (xc2 - xc1) * k1;
    double ym1 = yc1 + (yc2 - yc1) * k1;

    double xm2 = xc2 + (xc3 - xc2) * k2;
    double ym2 = yc2 + (yc3 - yc2) * k2;

    // Resulting control points. Here smooth_value is mentioned
    // above coefficient K whose value should be in range [0...1].
    ctrl1_x = xm1 + (xc2 - xm1) * smooth_value + x1 - xm1;
    ctrl1_y = ym1 + (yc2 - ym1) * smooth_value + y1 - ym1;

    ctrl2_x = xm2 + (xc2 - xm2) * smooth_value + x2 - xm2;
    ctrl2_y = ym2 + (yc2 - ym2) * smooth_value + y2 - ym2;

【讨论】:

  • 您为什么不在答案中详细说明这个简单的方法?就目前而言,答案的价值完全取决于该 URL 处的页面未被删除或移动。
  • @Asad 是的,这是有道理的
  • 谢谢! +1 以获得很好的答案。
  • @Zheyuan Li 为样条曲线投票。不过我会分开 bsplines
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-02-04
  • 1970-01-01
  • 2015-01-18
  • 2017-09-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多