Connexion de lignes (en faisant glisser) dans Flex/Actionscript

Question

J'ai un élément mx: Canvas qui contient plusieurs éléments mx: Panel. Je veux être capable de tracer une ligne reliant deux tels mx: Panel de telle sorte que la ligne continue de connecter les deux mx: Panneaux lorsque l'un ou les deux sont traînés. Il semble que quelque chose qui devrait être trivial à faire, mais je n'ai pas été en mesure de le comprendre.

En effet, c'est le problème.

alt text http://img150.imageshack.us/img150/5656/ishot1eu3.jpg

Depuis les mises à jour se produisent que lorsque le panneau atteint sa position finale, dès que vous commencez à faire glisser le panneau « B », il vous reste une ligne ballants:

alt text http://img212.imageshack.us/img212/4296/ishot2qi6.jpg

Une solution possible, comme suggéré ci-dessous, consiste à remplacer la méthode updateDisplayList() du composant mx: Canvas. Malheureusement, cela ne fait que mettre à jour le dessin après le glisser, et non en mouvement. L'écoute des événements "xChanged" et "yChanged" dans le Panel produit les mêmes résultats que le remplacement de updateDisplayList().

La solution finale, comme indiqué ci-dessous, nécessite l'envoi des événements de déplacement du panneau mobile au canevas sur lequel il se déplace. Cela force les lignes à se redessiner tout au long de la motion.

Merci pour toute l'aide!

Answer 1

«J'ai essayé redéfinissant la méthode de la mx updateDisplayList():. Composante toile, mais qui semble seulement mettre à jour le dessin après la glisser je voudrais pour la ligne à suivre la mx: Panel comme il est traîné. "

Vous pouvez écouter MoveEvent.MOVE événements dans les panneaux et que l'appel de gestionnaire pour le redécoupage des lignes, et ensuite les panneaux distribuer ces événements pendant qu'ils sont traînés en écoutant les MouseEvent.MOUSE_MOVE événements dans la scène et envoi de l'événement MOVE dans le gestionnaire (connectez ce gestionnaire à l'étape du gestionnaire d'événements MouseEvent.MOUSE_DOWN du Panel, ainsi qu'un gestionnaire pour MouseEvent.MOUSE_UP (joint à la scène), puis supprimez ces deux écouteurs d'événement de l'étape MOUSE_UP gestionnaire.)

Voici un exemple (ce serait dans le panneau s ubclass :)

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)); 
} 

Answer 2

Vous voudriez remplacer la méthode UIComponent updateDisplayList() sur le canevas et y faire votre dessin.

Ceci suppose que vous êtes familiarisé avec le dessin au trait dans AS3 en général.

Answer 3

flexwires est un projet open source pour mettre en œuvre ce type de paradigme de l'interface utilisateur "lignes connectées" dans Flex. Cela pourrait correspondre à vos besoins. Vous ne pouvez pas utiliser la fonctionnalité de liaison ici?

Answer 4

le point final de la ligne lié au centre du cercle?

Answer 5

Nouveau pour flasher/fléchir et a eu un problème similaire.Je l'ai résolu en attachant un écouteur d'événement à l'événement Enter_Frame. Je ne suis pas sûr si c'est la solution la plus efficace car elle redessine même si les objets n'ont pas bougé mais cela a fonctionné pour moi:

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); 
    } 

}