Discussion :

[gere34]

Bonjour, je crée un éditeur de plan d'architecte. Il faudrait que je puisse naviguer dans mon plan comme dans GMaps. Drag and drop pour attraper la carte et la déplacer (avec du easing ce serait le top) + zoom et dezoom avec la roulette.
Pour le zoom, ca devrait aller, je devrais trouver facilement (si vous avez des bon lien, je refuse pas non plus). Mais c'est pour le déplacement que je lutte un peu à trouver.
Could you help me pleaaaaase ?

[Jim_Nastiq]

Bonjour,

3 thread plus bas tu as un exemple détaillé de la gestion du drag & drop en Flex ...

[gere34]

oui, je sais, mais pour ce cas particulier, j'ai du mal.
Le drag&drop classique ne déplace pas l'objet en temps réel mais au moment du drop en affichant ce carré qui représente l'objet. Moi je voudrais tenir la map et la faire bouger comme je veux et que quand je la relâche elle continue un peu avec de l'inertie (et que je puisse la rattraper derrière sans être obligé d'attendre la fin du mouvement).

C'est quand même bien particulier et je pense que ça peut être utile pour pas mal d'appli, donc je me suis permis de créer un thread dédié. (oui oui j'ai cherché avant)

[Jim_Nastiq]

Si le drag&drop ne te convient pas tu peux toujours faire "à la main" c'est assez simple ...

1 - au MouseDown = tu écoute l'event mouseMove
2 - au MouseMove = tu suis la souris avec ton image (image.x = mouseX ,...)
3 - au MouseUp = tu supprimer l'écouteur sur le mouseMove

[gere34]

Bon, je met pas résolu, je vais voir ce que j'arrive à faire en manuel. J’essaierais de le poster si j'y arrive et si c'est propre

merci

[gere34]

Je galère, le controle des scrollposition par mouseMove est sacadé, comme si les scroll revenait à 0 entre chaque déplacements

[gere34]

Voilà le code :

Tool_plan.as

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
package gardeneditor.toolbar
{
	import assets.Resources;
 
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.utils.Timer;
 
	import gardeneditor.GardenEditor;
	import gardeneditor.gardenplan.Item;
 
	public class Tool_plan extends Tool
	{
		protected var _dragDownPt:Point;
		protected var _prevPt:Point;
 
		public function Tool_plan(gardenEditor:GardenEditor)
		{
			super(gardenEditor,"action",GardenEditor.MODE_PLAN,Tool.MODE_EDITION);
			setStyle("icon",Resources.ICON_ARROW);
		}
 
		override public function startAction():void{
			super.startAction();
			gardenEditor.plan.addEventListener(MouseEvent.CLICK,select);
			gardenEditor.plan.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
			gardenEditor.plan.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
		}
 
		override public function endAction(keepCurrent:Boolean = false):void{
			gardenEditor.plan.removeEventListener(MouseEvent.CLICK,select);
			gardenEditor.plan.removeEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
			gardenEditor.plan.removeEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
			super.endAction(keepCurrent);
		}
 
		protected function select(event:MouseEvent):void{
			if(event.target is Item){
				var item:Item = event.target as Item;
				gardenEditor.loadSpecialEditionMode(item.type);
				gardenEditor.plan.focusedItem = item;
			}
			else
				trace("click");
		}
 
		protected function mouseDownHandler(event:MouseEvent):void{
			_dragDownPt = new Point(gardenEditor.plan.mouseX,gardenEditor.gardenNav.scroller.mouseY);
			_prevPt = new Point(_dragDownPt.x,_dragDownPt.y);
			gardenEditor.plan.addEventListener(MouseEvent.MOUSE_MOVE,movePlan);
		}
		protected function mouseUpHandler(event:MouseEvent):void{
			gardenEditor.plan.removeEventListener(MouseEvent.MOUSE_MOVE,movePlan);			
		}
		protected function movePlan(event:MouseEvent):void{
			if(Math.abs(_dragDownPt.x - gardenEditor.gardenNav.scroller.mouseX) <= 2 && Math.abs(_dragDownPt.y - gardenEditor.gardenNav.scroller.mouseY) <= 2 
				|| Math.abs(_prevPt.x - gardenEditor.gardenNav.scroller.mouseX) > 100 
				|| Math.abs(_prevPt.y - gardenEditor.gardenNav.scroller.mouseY) > 100)
				return; 
			trace((_prevPt.x - gardenEditor.gardenNav.scroller.mouseX)+" , "+(_prevPt.y - gardenEditor.gardenNav.scroller.mouseY));
			gardenEditor.gardenNav.scroller.horizontalScrollPosition += _prevPt.x - gardenEditor.gardenNav.scroller.mouseX;
			gardenEditor.gardenNav.scroller.verticalScrollPosition += _prevPt.y - gardenEditor.gardenNav.scroller.mouseY;
 
			_prevPt.x = gardenEditor.gardenNav.scroller.mouseX;
			_prevPt.y = gardenEditor.gardenNav.scroller.mouseY;
 
		}
	}
}

GardenNavigator.mxml

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
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
		  xmlns:s="library://ns.adobe.com/flex/spark"
		  xmlns:mx="library://ns.adobe.com/flex/mx"
		  xmlns:itemspicker="gardeneditor.itemspicker.*"
		  xmlns:gardenplan="gardeneditor.gardenplan.*">
	<fx:Script>
			....
	</fx:Script>
	<s:Group width="100%">
		<s:layout>
			<s:VerticalLayout horizontalAlign="right"/>
		</s:layout>
		<s:HSlider id="zoomSlider" minimum=".44" maximum="1" value="{zoom}" stepSize=".05" width="180" height="10"
				   focusEnabled="false" 
				   change="zoomSlider_changeHandler(event)"/>		
	</s:Group>
	<s:Scroller width="100%" height="100%" styleName="gardenNavScroller">
		<s:Group id="scroller"
				 rollOver="setListenners()" 
				 rollOut="removeListenners()"
				 mouseWheel="scroller_mouseWheelHandler(event)">
			<gardenplan:GardenPlan id="plan" creationComplete="plan_creationCompleteHandler(event)" width="2000" height="1510"/>
		</s:Group>
	</s:Scroller>
</s:VGroup>

[gere34]

Bon, j'ai trouvé. Je prenais relevais la position de la souris par rapport à mon objet mobile, il fallait mesurer par rapport au parent.

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
package gardeneditor.toolbar
{
	import assets.Resources;
 
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.utils.Timer;
 
	import gardeneditor.GardenEditor;
	import gardeneditor.gardenplan.Item;
 
	public class Tool_plan extends Tool
	{
		protected var _dragDownPt:Point;
		protected var _prevPt:Point;
 
		public function Tool_plan(gardenEditor:GardenEditor)
		{
			super(gardenEditor,"action",GardenEditor.MODE_PLAN,Tool.MODE_EDITION);
			setStyle("icon",Resources.ICON_ARROW);
		}
 
		override public function startAction():void{
			super.startAction();
			gardenEditor.plan.addEventListener(MouseEvent.CLICK,select);
			gardenEditor.plan.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
			gardenEditor.plan.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
		}
 
		override public function endAction(keepCurrent:Boolean = false):void{
			gardenEditor.plan.removeEventListener(MouseEvent.CLICK,select);
			gardenEditor.plan.removeEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
			gardenEditor.plan.removeEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
			super.endAction(keepCurrent);
		}
 
		protected function select(event:MouseEvent):void{
			if(event.target is Item){
				var item:Item = event.target as Item;
				gardenEditor.loadSpecialEditionMode(item.type);
				gardenEditor.plan.focusedItem = item;
			}
			else
				trace("click");
		}
 
		protected function mouseDownHandler(event:MouseEvent):void{
			_dragDownPt = new Point(gardenEditor.gardenNav.mouseX,gardenEditor.gardenNav.mouseY);
			_prevPt = new Point(_dragDownPt.x,_dragDownPt.y);
			gardenEditor.plan.addEventListener(MouseEvent.MOUSE_MOVE,movePlan);
		}
		protected function mouseUpHandler(event:MouseEvent):void{
			gardenEditor.plan.removeEventListener(MouseEvent.MOUSE_MOVE,movePlan);			
		}
		protected function movePlan(event:MouseEvent):void{
			if(Math.abs(_dragDownPt.x - gardenEditor.gardenNav.mouseX) <= 2 && Math.abs(_dragDownPt.y - gardenEditor.gardenNav.mouseY) <= 2 
				|| Math.abs(_prevPt.x - gardenEditor.gardenNav.mouseX) > 100 
				|| Math.abs(_prevPt.y - gardenEditor.gardenNav.mouseY) > 100)
				return; 
			trace((_prevPt.x - gardenEditor.gardenNav.mouseX)+" , "+(_prevPt.y - gardenEditor.gardenNav.mouseY));
			gardenEditor.gardenNav.scroller.horizontalScrollPosition += _prevPt.x - gardenEditor.gardenNav.mouseX;
			gardenEditor.gardenNav.scroller.verticalScrollPosition += _prevPt.y - gardenEditor.gardenNav.mouseY;
 
			_prevPt.x = gardenEditor.gardenNav.mouseX;
			_prevPt.y = gardenEditor.gardenNav.mouseY;
 
		}
	}
}