【发布时间】：2011-05-10 06:58:42
【问题描述】：
我正在尝试在 Flash 中绘制一条连续的曲线。有很多方法，但到目前为止我发现没有一个完全符合我的要求。首先，我想使用flash图形api的curveTo()方法。 我不想simulate a curve with hundreds of calls to lineTo() per curved line segment。这是我的经验和理解线段是处理器繁重的。 Flash 的二次贝塞尔曲线应该占用更少的 CPU 功率。如果你认为我错了，请挑战这个假设。
我也不想使用将整行作为参数的预制方法（例如 mx.charts.chartClasses.GraphicsUtilities.drawPolyline()）。 原因是我最终需要修改逻辑以向我正在绘制的线条添加装饰，所以我需要一些我理解的最低级别的东西。
我目前创建了一个方法，可以在给定 3 个点 using the mid-point method found here 的情况下绘制一条曲线。
这是一张图片：
问题在于这些线实际上并没有通过线的“真实”点（灰色圆圈）弯曲。有没有一种方法可以利用数学的力量来调整控制点，使曲线实际上通过“真实”点？仅将当前点及其上一个/下一个点作为参数？复制上图的代码如下。如果我能修改它以满足这个要求，那就太好了（注意第一点和最后一点的例外）。
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);
}
}
稍后我将在 draw 方法中添加箭头和东西。
【问题讨论】：
-
好的，为了获得想要的效果，我开始看起来在任何给定时间我的绘制方法至少需要 4 个点。如果我错了，请纠正我。到目前为止，我只是使用中点计算；还没有触发。
-
flex有样条绘图包：degrafa.org/docs
-
+1 清晰的写作风格！
标签： apache-flex actionscript-3 bezier continuous spline