1

こんにちは、みんな -

アンカー ポイントとコントロール ポイントを使用して、curveTo を使用してシェイプを作成しています。それはすべて正常に機能していますが、線がまっすぐでないときに線が制御点 (青い点) の中心を通過する方法がわかりません。

形状を描画するための私のコードは次のとおりです。

           // clear old line and draw new / begin fill
        var g:Graphics = graphics;
        g.clear();
        g.lineStyle(2, 0, 1);
        g.beginFill(0x0099FF,.1);

        //move to starting anchor point
        var startX:Number = anchorPoints[0].x;
        var startY:Number = anchorPoints[0].y;
        g.moveTo(startX, startY);

        // Connect the dots
        var numAnchors:Number = anchorPoints.length;
        for (var i:Number=1; i<numAnchors; i++) {

            // curve to next anchor through control
            g.curveTo(controlPoints[i].x,controlPoints[i].y, anchorPoints[i].x, anchorPoints[i].y);

        }
        // Close the loop
        g.curveTo(controlPoints[0].x,controlPoints[0].y,startX,startY);

そして、私が参考のために描いている形：

線が青いコントロール ポイントを直接通過するようにコードを変更するにはどうすればよいですか?

前もって感謝します！

b

4

1 に答える 1

7

サンプルプロジェクトのソースコード

これがどのように導出されるかに興味がない場合は、答えのセクションまでスキップしてください。

背景情報


ベジエ曲線は興味深く、楽しく作業できます。このアニメーションは、2 つのアンカー ポイント (P0 と P2) の間で、コントロール ポイント (P1) に対して 2 次曲線がどのように描画されるかを示しています。

制御点 (P1) を描画する代わりに、t=0.5 で曲線上の点を描画する必要があります。

t=0.5 を指す
(出典: whilenotnull.com )

幸いなことに、これはウィキペディアのページにある方程式で簡単に行うことができます: http://en.wikipedia.org/wiki/Bezier_Curve#Quadratic_B.C3.A9zier_curves

Actionscript の式は次のとおりです。

public function calculatePoint(p0:Point, p1:Point, p2:Point, t:Number):Point
{
    var p:Point = new Point(calculateTerm(p0.x, p1.x, p2.x, t), calculateTerm(p0.y, p1.y, p2.y, t));
    return p;
}

public function calculateTerm(p0:Number, p1:Number, p2:Number, t:Number):Number
{
    var negT:Number = 1 - t;

    var a0:Number = Math.pow(negT, 2) * p0;
    var a1:Number = 2 * negT * t * p1;
    var a2:Number = Math.pow(t, 2) * p2;

    var pos:Number = a0 + a1 + a2;
    return pos;
}

したがって、3 つの点を接続するvar t0:Point = calculatePoint(p0, p1, p2, 0.5);と、「制御点」を描きたい曲線上の点が得られます。

答え

これで、2 番目のパラメーターが曲線上の点であると仮定して、制御点の座標を決定する関数を作成できます。

public function derivePoint(p0:Point, b1:Point, p2:Point, t:Number = 0.5):Point
{
    var p:Point = new Point(deriveTerm(p0.x, b1.x, p2.x, t), deriveTerm(p0.y, b1.y, p2.y, t));
    return p;
}

public function deriveTerm(p0:Number, bt:Number, p2:Number, t:Number):Number
{
    var negT:Number = 1 - t;

    var a0:Number = Math.pow(negT, 2) * p0;
    var a1:Number = 2 * negT * t;
    var a2:Number = Math.pow(t, 2) * p2;

    var p1:Number = (bt - a0 - a2) / a1;
    return p1;
}

これから、コード スニペットを更新して、(できれば) "コントロール ポイント" を通る曲線を描画します。

// clear old line and draw new / begin fill
var g:Graphics = graphics;
g.clear();
g.lineStyle(2, 0, 1);
g.beginFill(0x0099FF,.1);

//move to starting anchor point
var startX:Number = anchorPoints[0].x;
var startY:Number = anchorPoints[0].y;
g.moveTo(startX, startY);

// Connect the dots
var p0:Point = new Point(startX, startY);
var p2:Point;

var numAnchors:Number = anchorPoints.length;
for (var i:Number=1; i<numAnchors; i++) {

    p2 = new Point(anchorPoints[i].x, anchorPoints[i].y);

    // curve to next anchor through control
    var b1:Point = new Point(controlPoints[i].x,controlPoints[i].y);
    var p1:Point = derivePoint(p0, b1, p2);

    g.curveTo(p1.x, p1.y, p2.x, p2.y);

    p0 = p2;

}
// Close the loop
g.curveTo(controlPoints[0].x,controlPoints[0].y,startX,startY);

サンプルプロジェクトのソースコード

于 2010-01-16T03:39:11.523 に答える