Déplacement d'une zone scrollable par drag&drop

Version imprimable

06/08/2012, 21h25
gere34

Déplacement d'une zone scrollable par drag&drop

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 ? :mrgreen:
07/08/2012, 09h10
Jim_Nastiq

Bonjour,

3 thread plus bas tu as un exemple détaillé de la gestion du drag & drop en Flex ... :roll:
07/08/2012, 22h04
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)
08/08/2012, 11h43
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
08/08/2012, 18h05
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
15/08/2012, 19h35
gere34

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

Voilà le code :

Tool_plan.as

Code:

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:

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>

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:

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