1

Flash APIを使用して、後でレーザービームとして機能する移動する円錐形を描画しています。ただ、形に隙間がなくても埋められません。

これが私が得た現在の結果であり、数字で示されているように次の順序で描画します。

現在の結果へのリンク

このすべての前に、beginFill（...）を開始し、すべての線が描画された後、endFill（）ですべてを終了します。

前述のように、円錐は後でエフェクトとして使用するためにそのまま移動します（各ポイント間でラインスタイルをフェードします）。したがって、私が行うことは、各OnEnterFrameイベントのポイントを保存し、これらのポイントに基づいて線（1と2）を描画することです。レーザービームには方向性があります。

静的なままで、次のように描画した場合（OnEnterFrameイベントで）：

                    graphics.clear();
        graphics.lineStyle(3, 0xFF0000);
        graphics.beginFill(0xFFFFFF);

        var dx:Number = end.x - source.x;
        var dy:Number = end.y - source.y;

        var angle:Number = Math.atan2(dy, dx);

        var endX1:Number = end.x + 20 * Math.cos(angle - 90);
        var endY1:Number = end.y + 20 * Math.sin(angle - 90);
        var endX2:Number = end.x + 20 * Math.cos(angle + 90);
        var endY2:Number = end.y + 20 * Math.sin(angle + 90);


        graphics.lineStyle(3, 0xFFFFFF);
        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX1, endY1);

        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX2, endY2);
        graphics.lineTo(endX1, endY1);
        graphics.endFill();

そうは言っても、私は4番の線を引かない（写真に表示されているように）。

アイデアが足りなくなり、形がはっきりと閉じていますが、塗りつぶしが機能しません。これが、「動く」コーン効果のOnEnterFrameイベントの完全なコードです。ここ

public function update():void
    {
        /*
        graphics.clear();
        //graphics.lineStyle(3, 0xFF0000);
        graphics.beginFill(0xFFFFFF);
        //graphics.moveTo(source.x, source.y);
        //graphics.lineTo(end.x, end.y);
        */
        var dx:Number = end.x - source.x;
        var dy:Number = end.y - source.y;

        var angle:Number = Math.atan2(dy, dx);

        var endX1:Number = end.x + 20 * Math.cos(angle - 90);
        var endY1:Number = end.y + 20 * Math.sin(angle - 90);
        var endX2:Number = end.x + 20 * Math.cos(angle + 90);
        var endY2:Number = end.y + 20 * Math.sin(angle + 90);

        /*
        graphics.lineStyle(3, 0xFFFFFF);
        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX1, endY1);

        graphics.moveTo(source.x, source.y);
        graphics.lineTo(endX2, endY2);
        graphics.lineTo(endX1, endY1);
        graphics.endFill();

        return;
        */

        var x:Number  = currentPoint.x;
        var y:Number  = currentPoint.y;
        var x2:Number = currentPoint2.x;
        var y2:Number = currentPoint2.y;

        points[0].x = x;
        points[0].y = y;

        points2[0].x = x2;
        points2[0].y = y2;


        //::  Interpolate Current Point
        currentPoint    = Point.interpolate(new Point(endX1, endY1), source, progress);
        currentPoint2   = Point.interpolate(new Point(endX2, endY2), source, progress);


        //::  Add new point with properties
        if (progress < 1.0 )
        {
             points.splice(1, 0, {x: x, y: y, life: getTimer(), thickness: 2 + (20 * progress)});
             points2.splice(1, 0, {x: x2, y: y2, life: getTimer(), thickness: 2 + (20 * progress)});
        }

        //::  Line 1
        graphics.clear();
        graphics.lineStyle(3, 0xFFFFFF, 1);
        graphics.beginFill(0xFF0000);

        graphics.moveTo(x, y);

        for (var i:int = 1; i < points.length; i++) 
        {
            //::  Point dead, remove it
            if (getTimer() - points[i].life > lifetime)
            {
                points.splice(i--, 1);
            }
            //::  Update point life and draw graphics
            else 
            {
                var currentLife:Number  = (getTimer() - points[i].life);
                var perc:Number         = Math.abs(1 - (currentLife / lifetime));

                //graphics.lineStyle(3, 0xFFFFFF, perc);

                //::  Prev point
                var px:Number = points[i - 1].x;
                var py:Number = points[i - 1].y;

                graphics.lineTo(px, py);                                    
            }
        }


        //::  Line 2
        graphics.beginFill(0xFFFFFF);
        graphics.moveTo(x2, y2);

        for (var i:int = 1; i < points2.length; i++) 
        {
            //::  Point dead, remove it
            if (getTimer() - points2[i].life > lifetime)
            {
                points2.splice(i--, 1);
            }
            //::  Update point life and draw graphics
            else 
            {
                var currentLife:Number  = (getTimer() - points2[i].life);
                var perc:Number         = Math.abs(1 - (currentLife / lifetime));

                //graphics.lineStyle(3, 0xFFFFFF, perc);

                //::  Prev point
                var px:Number = points2[i - 1].x;
                var py:Number = points2[i - 1].y;

                graphics.lineTo(px, py);                                    
            }
        }



        //::  Close 3 & 4
        if (points.length > 1)
        {
            graphics.moveTo(points[points.length-2].x, points[points.length-2].y);
            graphics.lineTo(points2[points2.length-2].x, points2[points2.length-2].y);
        }

        graphics.moveTo(x, y);
        graphics.lineTo(x2, y2);
        graphics.endFill();



        //::  Progress
        progress += progressSpeed;      
        if (progress >= 1.0)    progress = 1.0;

コードはかなり安全な説明です。あなたがより多くの情報を必要とするならば、私は提供します！

前もって感謝します！

4

1 に答える 1

1

描画位置を2回移動しているために問題が発生していると思います。これは、何を入力するかについてFlashを混乱させます。

通常、このような図形を描くときはmoveTo()、最初に1回だけ呼び出してから、現在の終点から各線を描きます。その「現在の終点」は、各線を引くと変化します。次のような描画が行われるようにコードを変更することをお勧めします。

moveTo(startX, startY);
lineTo(endX1, endY1);
lineTo(endX2, endY2);
lineTo(endX3, endY3);
lineTo(startX, startY);

何が起こっているのかというと、moveTo()Flashへの2回目の呼び出しが、以前に描画されたものをすべて埋めようとすることだと思います。しかし、あなたは2本の線しか描いていないので、埋めるものは何もありません。状態（何を埋めるべきか）をリセットしてから、別の線を1、2本描きます。を呼び出すとendFill()、最後から描画されたものだけが表示され、moveTo()何も入力しないと判断されます。

于 2012-11-20T19:14:58.617 に答える