Discussion :

[jaljal]

Bonjour,

J'ai écrit un actionscript permettant de dessiner une ligne ayant comme extrémité une image soumise à un évènement de drag and drop.

Je voudrais qu'en déplaçant l'image, l'extrémité de la ligne y reste rattaché.

comment faire cela ?

voici un extrait de mon script pour dessiner une ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
myShape.graphics.moveTo(500,300);
myShape.graphics.lineTo(40,60);

où (500,300) est les coordonnées de mon image


Merci d'avance

[Jim_Nastiq]

Salut,

dans ton handler de drag tu suis le mouvement de ta souris (et par définition de ton objet draggé) donc c'est dans ce handler que tu met a jour la position de la ligne , mais tu peux tout aussi bien calculer le tracé de ta ligne lors du drop.
Mais difficile de t'en dire plus, car le peu d'explication que tu donnes ne me permet pas de savoir ou se situe réellement ton problème.

[jaljal]

Voici mon code source pour mieux comprendre, c'est l'image au centre qui est soumise au drag and drop

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#123456"
creationComplete="init();">
 
<mx:Script>
<![CDATA[
 
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;
 
import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;
            // The mouseMove event handler for the Image control
            // initiates the drag-and-drop operation.
            private function mouseMoveHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               
 
                DragManager.doDrag(dragInitiator, ds, event);
            }
 
            // The dragEnter event handler for the Canvas container
            // enables dropping.
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }
 
            // The dragDrop event handler for the Canvas container
            // sets the Image control's position by 
            // "dropping" it in its new location.
            private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY;
            }
 
 
public var ticker:Timer;
 
public var mySprite:Sprite = new Sprite();
public var myShape:Shape = new Shape();
//public var mySprite3:Sprite = new Sprite();
public var i:Number;
public var mat_coord:Array=new Array(2);
public function init():void {
//var img:BitmapData=new BitmapData(80,70,true,null);
var x:Number;var x1:Number=200;var a:Number=500;
var y:Number;var y1:Number=300;var b:Number=300;
var angle:Number;var n:Number=20;
//ajouter
var lineLength:Number=2;var lineHeight:Number=3; 
var origin:Point = new Point(x1,y1);
var destination:Point = new Point(lineLength,lineHeight);
var lineThickness:Number = 2;
var lineColor:Number = 0x000000;
var lineAlpha:Number = 1;
graphics.clear();
graphics.lineStyle(lineThickness,lineColor,lineAlpha);
graphics.moveTo(origin.x,origin.y);
graphics.lineTo(destination.x,destination.y);
//fin ajouter
mat_coord[0]=new Array(100);
mat_coord[1]=new Array(100);
mat_coord[0][0]=x1;
mat_coord[1][0]=y1;
angle=(2*Math.PI)/n;
mySprite.graphics.beginFill(0x00FF00);
mySprite.graphics.drawRect(x1, y1, 40, 40);
mySprite.graphics.endFill();
 
 
 
//ajouter
//mySprite.graphics.lineStyle(5,0,1,false,normal,null,null,3);
//myShape.graphics.lineTo(x1,y1);
//fin ajouter
//mySprite.graphics.beginBitmapFill(img,null,true,false);
 
myShape.graphics.lineStyle(2, 0x990000, .75);
 
for(i=1;i<=n;i++){
			x=(x1-a)*Math.cos(angle)-(y1-b)*Math.sin(angle)+a;
			y=(x1-a)*Math.sin(angle)+(y1-b)*Math.cos(angle)+b;
			x1=x;y1=y;
			if(n<=12){
				mat_coord[0][i]=x1;
				mat_coord[1][i]=y1;
			}
			else{
				if(i%2==0){
					mat_coord[0][i]=x1;  
					mat_coord[1][i]=y1;
				}
				else{
					mat_coord[0][i]=(x1-a)/2+a;
					mat_coord[1][i]=(y1-b)/2+b;
 
				}
			}
	mySprite.graphics.beginFill(0x00FF00);
	mySprite.graphics.drawRect(mat_coord[0][i], mat_coord[1][i], 40, 40);
	mySprite.graphics.endFill();
 
	myShape.graphics.moveTo(a+20,b+20);
	myShape.graphics.lineTo(mat_coord[0][i]+20,mat_coord[1][i]+20);
 
// Don't ask why, but you have to add the sprite with rawChilden to finally work!
	myCanvas.rawChildren.addChild(mySprite);
	//ajouter
	myCanvas.rawChildren.addChild(myShape);			
 
 
}
 
 
	/*ajouter
	myShape.graphics.lineTo(mat_coord[0][1]+20,mat_coord[1][1]+20);
 
	myCanvas.rawChildren.addChild(mySprite);
	//ajouter
	myCanvas.rawChildren.addChild(myShape);	*/
 
}
 
]]>
</mx:Script>
<mx:Box>
<mx:Canvas id="myCanvas" x="0" y="0" width="1000" height="700" backgroundColor="#EEEEEE" dragEnter="dragEnterHandler(event);" 
        dragDrop="dragDropHandler(event);">
 
<mx:Image id="myimg" 
            source="@Embed(source='internet_icon4.png')" 
        x="480" y="280"  mouseMove="mouseMoveHandler(event);"  /> 
<mx:UIComponent id="myUIComponent" x="0" y="0" width="1000" height="700" >
 
</mx:UIComponent>
</mx:Canvas>
</mx:Box>
</mx:Application>

Ci-joint l'image.


Merci

[jaljal]

Ci-joint mon animation pour mieux comprendre

[ToniConti]

Salut jaljal

Je réfléchi à ton problème mais en attendant j'ai une suggestion pour le déplacement de l'image.
Pour l'instant quand tu relâches le clic de la souris, tu récupères les coordonnées du curseur pour placer ton image.
A ta place, je placerais l'image aux positions du curseur diminuées de la moitié des dimensions de l'image.

Donc en plus clair () quand tu relâches le clic de la souris il faudrait que l'image prenne les coordonnées suivantes :
xImg = xCurseur - widthImg/2
yImg = yCurseur - heightImg/2

C'est pas encore l'idéal mais bon d'instinct, on a plutot tendance à cliquer en plein millieu d'un objet pour le déplacer
Je te dis quoi si je trouve comment coller les lignes à l'image.

[jaljal]

Salut ToniConti ,

j'ai appliqué ce que tu m'a conseillé de faire, le placemement de l'image est correct maintenant en attendant ta réponse

[jylaxx]

A ta place, je placerais l'image aux positions du curseur diminuées de la moitié des dimensions de l'image.

Donc en plus clair () quand tu relâches le clic de la souris il faudrait que l'image prenne les coordonnées suivantes :
xImg = xCurseur - widthImg/2
yImg = yCurseur - heightImg/2

C'est curieux comme proposition ! Pourquoi s'arrêter au milieu de la solution et ne pas aller jusqu'au bout en utilisant la valeur exact du décalage ?
Au début du drag tu enregistres le décalage x et y entre l'origine de ton image et la souris. A la fin du drag tu soustrait ce décalage de la nouvelle position.

[jylaxx]

Sinon pour résoudre ton problème il faut enregistrer la liste des "vecteurs" que tu dois dessiner et lorsque tu déplaces ton image tu redessines tous les vecteurs concernés.

[ToniConti]

Comme dit Jylax tu dois redessiner les vecteurs à chaque fois que tu relâches le clic de la souris.
J'ai créer un nouveau projet avec ton code et malgré près d'une heure de recherche j'ai rien de très convainquant à te proposer...

Juste une question c'est toi qui a fait cet algorithme ou tu le tiens de quelque part d'autre ?
Si c'est toi je suis curieux de savoir ce que tu aimerais arriver à faire au final

[jaljal]

il faut enregistrer la liste des "vecteurs" que tu dois dessiner

le problème que je fais appel à la méthode moveTo et lineTo pour la création d'une ligne et qui ne permet pas de retourner une instance d'un object (ou un identifiant) pour pourvoir l'enregistrer dans une liste.

et lorsque tu déplaces ton image tu redessines tous les vecteurs concernés.

Lorsque je redessine, quel est l'utilité du sauvegarde

Juste une question c'est toi qui a fait cet algorithme ou tu le tiens de quelque part d'autre ?
Si c'est toi je suis curieux de savoir ce que tu aimerais arriver à faire au final

c'est un travaille de pfe en binome(on tient pas le code de quelque part) qui permet de contrôler un système de réseaux.


Merci pour vos réponses

[jylaxx]

le problème que je fais appel à la méthode moveTo et lineTo pour la création d'une ligne et qui ne permet pas de retourner une instance d'un object (ou un identifiant) pour pourvoir l'enregistrer dans une liste.

oui mais comme cette solution ne permet pas de répondre à ton problème, il faudra bien que tu modifies ton code

donc les informations qui te permettent de faire ton dessin tu les stockes en mémoire et ensuite tu les utilises pour dessiner.

Lorsque je redessine, quel est l'utilité du sauvegarde

?????!!!!??????
Si tu ne sauvegardes pas les données qui décrivent ton dessin comment veux tu le redessiner

Ou alors j'ai rien compris à ton problème...

[jaljal]

donc les informations qui te permettent de faire ton dessin tu les stockes en mémoire et ensuite tu les utilises pour dessiner.

je dois alors stocker les coordonnées de l'image dans la mémoire après avoir relâché la souris pour pouvoir redessiner mes lignes.

comment faire pour supprimer ou rendre invisible les autre lignes

Merci

[jylaxx]

je dois alors stocker les coordonnées de l'image dans la mémoire après avoir relâché la souris pour pouvoir redessiner mes lignes.

tout dépend de l'implémentation... si l'image est le point de convergence (ou de départ) des lignes tu peux juste passer ce point en paramètre de ta procédure de dessin des lignes.

comment faire pour supprimer ou rendre invisible les autre lignes

pour les supprimer le plus simple est de faire un graphics.clear du canvas.
pour les rendre visibles et bien tu les redessines...

[jaljal]

J'ai finalement trouver une solution :

j'ai mis cette fonction qui permet de tout redessiner en fonction des nouvelles coordonnées de l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX - Image(event.dragInitiator).width/2;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY -  Image(event.dragInitiator).height/2;
                    myShape.graphics.clear();
                    mySprite.graphics.clear();
                    dessiner(Image(event.dragInitiator).x ,Image(event.dragInitiator).y);
            }

Merci