フラッシュで連続曲線を描こうとしています。多くの方法がありますが、これまでのところ、私の要件に完全に適合するものはありませんでした。まず、Flash グラフィック API の curveTo() メソッドを使いたいと思います。 曲線セグメントごとに lineTo() を何百回も呼び出す曲線をシミュレートしたくありません。 ライン セグメントはプロセッサ負荷が高いというのが私の経験と理解です。Flash の 2 次ベジエ カーブは、CPU パワーをあまり消費しないはずです。私が間違っていると思われる場合は、この仮定に異議を唱えてください。
また、行全体を引数として取る既製のメソッド (mx.charts.chartClasses.GraphicsUtilities.drawPolyline() など) も使用したくありません。その理由は、描いている線に装飾を加えるために最終的にロジックを変更する必要があるためです。そのため、最低レベルの理解が必要です。
私は現在、ここにある中間点法を使用して、 3 点を指定して曲線を描く方法を作成しました。
ここに写真があります：
問題は、線が実際には線の「実際の」点 (灰色の円) を通って曲がっていないことです。曲線が実際に「実際の」点を通過するように制御点を調整できる数学の力を使用する方法はありますか? 現在のポイントとその前/次のポイントのみを引数として指定しますか? 上の図を複製するコードは次のとおりです。この要件を満たすように変更できれば素晴らしいと思います (最初と最後のポイントの例外に注意してください)。
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 メソッドに矢印などを追加します。
