2

複数の mx:Panel 要素を含む mx:Canvas 要素があります。そのような 2 つの mx:Panel を接続する線を描画できるようにしたいと考えています。これは、一方または両方がドラッグされたときに、線が 2 つの mx:Panel を接続し続けるようにするためです。それは些細なことのように思えますが、私はそれを理解することができませんでした.

実際、これが問題です。

代替テキスト http://img150.imageshack.us/img150/5656/ishot1eu3.jpg

更新はパネルが最終位置に到達したときにのみ発生するため、「B」パネルのドラッグを開始するとすぐに、ぶら下がった線が残ります。

代替テキスト http://img212.imageshack.us/img212/4296/ishot2qi6.jpg

以下に示すように、mx:Canvas コンポーネントの updateDisplayList() メソッドをオーバーライドすることで解決できます。残念ながら、それはドラッグ後にのみ描画を更新し、移動中は更新しません。パネルで「xChanged」および「yChanged」イベントをリッスンすると、updateDisplayList() をオーバーライドした場合と同じ結果が得られます。

以下で指摘されているように、最終的な解決策では、移動する Panel から移動中の Canvas に移動イベントをディスパッチする必要があります。これにより、モーション全体で線が強制的に再描画されます。

助けてくれてありがとう！

4

5 に答える 5

4

「mx:Canvas コンポーネントの updateDisplayList() メソッドをオーバーライドしようとしましたが、ドラッグ後にのみ描画が更新されるようです。線がドラッグされているときに mx:Panel に追従するようにしたいと思います。」

パネルでイベントをリッスンし、線の再描画のためにハンドラーを呼び出すことができます。次に、ステージでイベントをMoveEvent.MOVEリッスンし、ハンドラーでイベントをディスパッチすることにより、パネルがドラッグされている間にこれらのイベントをディスパッチします(これを添付します)。ハンドラーをパネルのイベント ハンドラーでステージに追加し、(ステージにもアタッチされている) ハンドラーを追加します。次に、これらのイベント リスナーの両方をハンドラーのステージから削除します)。MouseEvent.MOUSE_MOVEMOVEMouseEvent.MOUSE_DOWNMouseEvent.MOUSE_UPMOUSE_UP

以下に例を示します (これは Panel サブクラスにあります:)

private function attachListeners():void
{
    this.addEventListener(MouseEvent.MOUSE_DOWN, selfMouseDownHandler, false,0,true);
    this.addEventListener(MoveEvent.MOVE, selfMoveHandler, false,0,true);
}

private function selfMoveHandler(event:MoveEvent):void
{
    redrawConnectedLinks();
}

private function selfMouseDownHandler(event:MouseEvent):void
{
    stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false,0,true);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false,0,true);
}

private function stageMouseUpHandler(event:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false);
}

private function stageMouseMoveHandler(event:MouseEvent):void
{
    dispatchEvent(new MoveEvent(MoveEvent.MOVE));
}
于 2008-12-03T00:25:26.740 に答える
1

flexwiresは、このタイプの「接続された線」UI パラダイムを Flex に実装するためのオープン ソース プロジェクトです。それはあなたのニーズにぴったりかもしれません。

于 2008-12-11T23:06:51.197 に答える
0

Canvas で UIComponent メソッド updateDisplayList() をオーバーライドし、そこで描画を行いたいと思うでしょう。

これは、一般的に AS3 での線画に精通していることを前提としています。

于 2008-12-02T18:06:46.927 に答える
0

フラッシュ/フレックスは初めてで、同様の問題がありました。Enter_Frame イベントにイベントリスナーをアタッチすることで解決しました。オブジェクトが移動していなくても再描画されるため、これが最も効率的なソリューションであるかどうかはわかりませんが、うまくいきました。

    import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;

public class Association extends Sprite
{
    private var t1:DisplayObject;
    private var t2:DisplayObject;
    //Connects two objects
    public function Association(t1:DisplayObject, t2:DisplayObject)
    {
        this.t1=t1;
        this.t2=t2;
        this.addEventListener(Event.ENTER_FRAME, redraw)
        super();
    }

    public function redraw(event:Event):void
    {
        graphics.clear();
        graphics.lineStyle(2,0x000000);
        graphics.moveTo(t1.x,t1.y);
        graphics.lineTo(t2.x,t2.y);
    }

}
于 2010-01-19T13:44:39.970 に答える
0

ここでバインド機能を使用できませんか? 円の中心に結ばれた線の終点?

于 2009-08-14T15:38:20.953 に答える