如何一次从 3 个给定点绘制连续曲线

Question

我正在尝试在 Flash 中绘制一条连续的曲线。方法有很多，但到目前为止我发现没有一个完全符合我的要求。首先，我想使用 flash 图形 api 的 curveTo() 方法。 我不想每个曲线段对 lineTo() 进行数百次调用来模拟曲线。这是我的经验和理解该线段是处理器的重载。 Flash 的二次贝塞尔曲线应该占用更少的 CPU 资源。如果您认为我错了，请质疑这个假设。

我也不想使用将整行作为参数的预制方法（例如 mx.charts.chartClasses.GraphicsUtilities.drawPolyline()）。 原因是我最终需要修改逻辑以向我正在绘制的线条添加装饰，所以我需要一些我在最低级别理解的东西。

我目前创建了一种方法，可以绘制给定 3 个点的曲线， 使用 mid -点方法在这里找到。

这是一张图片：

问题是这些线实际上并不弯曲通过该线的“真实”点（灰色圆圈）。有没有一种方法可以利用数学的力量来调整控制点，以便曲线实际上穿过“真实”点？仅给出当前点及其上一个/下一个点作为参数？复制上图的代码如下。如果我可以修改它以满足这个要求（注意第一点和最后一点的例外），那就太好了。

package {
  import flash.display.Shape;
  import flash.display.Sprite;
  import flash.display.Stage;
  import flash.geom.Point;

  [SWF(width="200",height="200")]
  public class TestCurves extends Sprite {
    public function TestCurves() {
      stage.scaleMode = "noScale";
      var points:Array = [
        new Point(10, 10), 
        new Point(80, 80), 
        new Point(80, 160), 
        new Point(20, 160), 
        new Point(20, 200),
        new Point(200, 100)
      ];

      graphics.lineStyle(2, 0xFF0000);

      var point:Point = points[0];
      var nextPoint:Point = points[1];

      SplineMethod.drawSpline(graphics, point, null, nextPoint);

      var prevPoint:Point = point;

      var n:int = points.length;
      var i:int;
      for (i = 2; i < n + 1; i++) {
        point = nextPoint;
        nextPoint = points[i]; //will eval to null when i == n

        SplineMethod.drawSpline(graphics, point, prevPoint, nextPoint);

        prevPoint = point;
      }

      //straight lines and vertices for comparison
      graphics.lineStyle(2, 0xC0C0C0, 0.5);
      graphics.drawCircle(points[0].x, points[0].y, 4);
      for (i = 1; i < n; i++) {
        graphics.moveTo(points[i - 1].x, points[i - 1].y);
        graphics.lineTo(points[i].x, points[i].y);
        graphics.drawCircle(points[i].x, points[i].y, 4);
      }

    }
  }
}
import flash.display.Graphics;
import flash.geom.Point;

internal class SplineMethod {
  public static function drawSpline(target:Graphics, p:Point, prev:Point=null, next:Point=null):void {
    if (!prev && !next) {
      return; //cannot draw a 1-dimensional line, ie a line requires at least two points
    }

    var mPrev:Point; //mid-point of the previous point and the target point
    var mNext:Point; //mid-point of the next point and the target point

    if (prev) {
      mPrev = new Point((p.x + prev.x) / 2, (p.y + prev.y) / 2);
    }
    if (next) {
      mNext = new Point((p.x + next.x) / 2, (p.y + next.y) / 2);
      if (!prev) {
        //This is the first line point, only draw to the next point's mid-point
        target.moveTo(p.x, p.y);
        target.lineTo(mNext.x, mNext.y);
        return;
      }
    } else {
      //This is the last line point, finish drawing from the previous mid-point
      target.moveTo(mPrev.x, mPrev.y);
      target.lineTo(p.x, p.y);
      return;
    }
    //draw from mid-point to mid-point with the target point being the control point.
    //Note, the line will unfortunately not pass through the actual vertex... I want to solve this
    target.moveTo(mPrev.x, mPrev.y);
    target.curveTo(p.x, p.y, mNext.x, mNext.y);
  }
}

稍后我将向绘制方法添加箭头和其他东西。

Answer 1

我认为您正在寻找 Catmull-Rom 样条线。我已经为您搜索了 AS3 实现，但尚未尝试过，因此您可以自行决定使用：

http:// actionsnippet.com/?p=1031

Answer 2

好的，Catmull-Rom 样条建议是一个很好的建议，但不完全是我想要的。
提供的链接中的示例是一个很好的起点，但有点不灵活。我已经拿走了它并修改了我的原始源代码来使用它。我将其发布为答案，因为我认为它比 Zevan 的博客文章更加模块化且更易于理解（无意冒犯 Zevan！）。以下代码将显示以下图像：

这是代码：

    package {
        import flash.display.Shape;
        import flash.display.Sprite;
        import flash.display.Stage;
        import flash.geom.Point;

        [SWF(width="300",height="300")]
        public class TestCurves extends Sprite {
            public function TestCurves() {
                stage.scaleMode = "noScale";

                //draw a helpful grid
                graphics.lineStyle(1, 0xC0C0C0, 0.5);
                for (var x:int = 0; x <= 300; x += 10) {
                    graphics.moveTo(x, 0);
                    graphics.lineTo(x, 300);
                    graphics.moveTo(0, x);
                    graphics.lineTo(300, x);
                }

                var points:Array = [
                    new Point(40, 20), 
                    new Point(120, 80), 
                    new Point(120, 160), 
                    new Point(60, 160), 
                    new Point(60, 200), 
                    new Point(240, 150), 
                    new Point(230, 220), 
                    new Point(230, 280)
                ];

                SplineMethod.setResolution(5);

                graphics.lineStyle(2, 0xF00000);
                graphics.moveTo(points[0].x, points[0].y);

                var n:int = points.length;
                var i:int;

                for (i = 0; i < n - 1; i++) {
                    SplineMethod.drawSpline(
                        graphics, 
                        points[i], //segment start
                        points[i + 1], //segment end
                        points[i - 1], //previous point (may be null)
                        points[i + 2] //next point (may be null)
                    );
                }

                //straight lines and vertices for comparison
                graphics.lineStyle(2, 0x808080, 0.5);
                graphics.drawCircle(points[0].x, points[0].y, 4);
                for (i = 1; i < n; i++) {
                    graphics.moveTo(points[i - 1].x, points[i - 1].y);
                    graphics.lineTo(points[i].x, points[i].y);
                    graphics.drawCircle(points[i].x, points[i].y, 4);
                }
            }
        }
    }
    import flash.display.Graphics;
    import flash.geom.Point;

    internal class SplineMethod {

        //default setting will just draw a straight line
        private static var hermiteValues:Array = [0, 0, 1, 0];

        public static function setResolution(value:int):void {
            var resolution:Number = 1 / value;
            hermiteValues = [];
            for (var t:Number = resolution; t <= 1; t += resolution) {
                var h00:Number = (1 + 2 * t) * (1 - t) * (1 - t);
                var h10:Number = t  * (1 - t) * (1 - t);
                var h01:Number = t * t * (3 - 2 * t);
                var h11:Number = t * t * (t - 1);
                hermiteValues.push(h00, h10, h01, h11);
            }
        }

        public static function drawSpline(target:Graphics, segmentStart:Point, segmentEnd:Point, prevSegmentEnd:Point=null, nextSegmentStart:Point=null):void {
            if (!prevSegmentEnd) {
                prevSegmentEnd = segmentStart;
            }
            if (!nextSegmentStart) {
                nextSegmentStart = segmentEnd;
            }

            var m1:Point = new Point((segmentEnd.x - prevSegmentEnd.x) / 2, (segmentEnd.y - prevSegmentEnd.y) / 2);
            var m2:Point = new Point((nextSegmentStart.x - segmentStart.x) / 2, (nextSegmentStart.y - segmentStart.y) / 2);

            var n:int = hermiteValues.length;
            for (var i:int = 0; i < n; i += 4) {
                var h00:Number = hermiteValues[i];
                var h10:Number = hermiteValues[i + 1];
                var h01:Number = hermiteValues[i + 2];
                var h11:Number = hermiteValues[i + 3];

                var px:Number = h00 * segmentStart.x + h10 * m1.x + h01 * segmentEnd.x + h11 * m2.x;
                var py:Number = h00 * segmentStart.y + h10 * m1.y + h01 * segmentEnd.y + h11 * m2.y;

                target.lineTo(px, py);
            }
        }
    }

这是不是一个完美的解决方案。但不幸的是，我无法拼凑出如何使用 curveTo() 来完成我想要的事情。请注意GraphicsUtilities.drawPolyLine() 确实完成了我正在尝试做的事情 - 问题是它不灵活，我无法解析代码（更重要的是，它似乎没有正确绘制锐角——如果我错了，请纠正我）。如果有人可以提供任何见解，请发帖。目前，以上就是我的回答。

Answer 3

我对此进行了编码，我认为它可能会有所帮助：

SWF： http://dl. dropbox.com/u/2283327/stackoverflow/SplineTest.swf

代码：http://dl.dropbox.com/u/2283327/stackoverflow/SplineTest.as

我在代码上留下了很多评论。我希望它有帮助！

以下是代码背后的理论：

A 和 C 是第一个和最后一个点，B 是“在AS3中，“控制点”可以这样画曲线：

graphics.moveTo(A.x, A.y);
graphics.curveTo(B.x, B.y, C.x, C.y);

现在，D是矢量AC的中点。 DB的中点就是曲线的中点。现在我在代码中所做的是将 B 精确移动到 D+DB*2 因此，如果您使用该点作为控制点绘制曲线，则曲线的中点将是 B。

PS：对不起我可怜的英语