How to draw a continuous curved line from three given points at a time

Question

I am trying to draw a continuous curved line in a flash. There are many methods, but not one of those that I have found so far meets my requirements. First of all, I want to use the flash api curveTo () method for flash graphics. I DO NOT want to simulate a curve with hundreds of lineTo () calls to a curved line segment . It is my experience and understanding that line segments are heavy processors. A quadratic Bezier curve flash should use less CPU power. Please dispute this assumption if you think that I am wrong.

I also do not want to use a ready-made method that takes the entire line as an argument (for example, mx.charts.chartClasses.GraphicsUtilities.drawPolyline ()). The reason is that I will need to eventually change the logic to add decorations to the line I draw, so I need something that I understand at the lowest level.

Currently, I have created a method that will draw a curve based on three points using the midpoint method found here .

Here is the image:

The problem is that the lines do not actually intersect through the "real" points of the line (gray circles). Is there a way to use the power of mathematics so that I can adjust the control point so that the curve really passes through the “real” point? Given only the current point and its previous / next point as arguments? Then comes the code to duplicate the above figure. It would be great if I could change it to meet this requirement (note the exception for the first and last point).

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((px + prev.x) / 2, (py + prev.y) / 2); } if (next) { mNext = new Point((px + next.x) / 2, (py + next.y) / 2); if (!prev) { //This is the first line point, only draw to the next point mid-point target.moveTo(px, py); 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(px, py); 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(px, py, mNext.x, mNext.y); } } 

Later I will add arrows and things to the draw method.

Answer 1

Well, the Catmull-Rom spline suggestion is good, but not quite what I'm looking for. The example from the link provided was a good starting point, but a little inflexible. I took it and changed the source code to use it. I am posting this as an answer because I think it is more modular and understandable than the Zevan blog (no offense to Zevan!). The following code will display the following image:

Here is the code:

  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); } } } 

This is not an ideal solution. But, unfortunately, I cannot compose how to accomplish what I want using curveTo (). Please note that GraphicsUtilities.drawPolyLine () does what I'm trying to do - the problem is that it is inflexible and I cannot parse the code (more importantly, it seems to draw sharp corners incorrectly - fix it me if I'm wrong). If anyone can give any insight, send a message. This is my answer at the moment.

Answer 2

I think you are looking for the Catmull-Rom spline. I was looking for an AS3 implementation for you, but have not tried it, so at my discretion:

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

Answer 3

I am coding this, I think this may help:

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

Code: http://dl.dropbox.com/u/2283327/stackoverflow/SplineTest.as

I left a lot of comments on the code. I want this to help!

Here is the code theory:

A and C are the first and last point, B is the “control point” in AS3, you can draw a curve as follows:

 graphics.moveTo(Ax, Ay); graphics.curveTo(Bx, By, Cx, Cy); 

Now D is the midpoint of the AC vector. And the midpoint of the database is the midpoint of the curve. Now, what I did in the code was to move B exactly to D + DB * 2, so if you draw a curve using this point as a control point, the middle point of the curve will be B.

PS: Sorry for my poor Enlgish