SVG path gives us a list of segment coordinates. We process each coordinate using the camera, which gives translation and zoom.
The interaction maybe not that obvious from the example. Having the mouse over a name highlights the country. Cheers, Alexandre > Le 16-11-2013 à 19:28, Camillo Bruni <[email protected]> a écrit : > > Nice! > > Though I am a bit confused, what has displaying vector graphics with SVG to > do? > I don't fully get the interaction from your example :) > >> On 2013-11-16, at 22:39, Tudor Girba <[email protected]> wrote: >> >> This is really great! >> >> Doru >> >> >> On Sat, Nov 16, 2013 at 9:47 PM, Alexandre Bergel <[email protected]> >> wrote: >> Another example on which you can zoom in and out. >> >> >> <Screen Shot 2013-11-16 at 5.47.07 PM.png> >> >> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= >> | view element nameComponent label stack | >> view := ROView new. >> view @ RODraggable. >> >> ROSVGPath southAmerica do: [ :k | >> >> element := (ROSVGPath path: (ROSVGPath perform: k)) elementOn: k. >> view add: element. >> ]. >> >> nameComponent := ROElement new. >> ROSVGPath southAmerica do: [ :k | >> >> label := ROLabel elementOn: k asString. >> label @ ROLightlyHighlightable. >> label on: ROMouseEnter do: [ :event | ROBlink highlight: (view >> elementFromModel: event model asSymbol) ]. >> label on: ROMouseLeave do: [ :event | ROBlink unhighlight: (view >> elementFromModel: event model asSymbol) ]. >> nameComponent add: label. >> ]. >> ROGridLayout new >> gapSize: -3; >> lineItemsCount: 15; >> on: nameComponent elements. >> >> >> stack := ROViewStack new. >> stack zoomInButton; zoomOutButton. >> stack addView: view. >> >> stack add: nameComponent. >> nameComponent translateTo: 0 @ 20. >> >> stack openInWindowSized: 1000 @ 700 >> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= >> >>> On Nov 16, 2013, at 5:44 PM, Alexandre Bergel <[email protected]> >>> wrote: >>> >>> Hi! >>> >>> I had fun understanding how countries may be described using SVG. >>> Here is a first shoot: >>> >>> <Screen Shot 2013-11-16 at 5.36.21 PM.png> >>> >>> >>> Moving the mouse above a country name highlight the country. You can now >>> rehearse your geography. >>> >>> The complete source code of this example is: >>> >>> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= >>> | view element nameComponent label | >>> view := ROView new. >>> >>> ROSVGPath countries do: [ :k | >>> element := (ROSVGPath path: (ROSVGPath perform: k)) elementOn: k. >>> view add: element. >>> ]. >>> >>> nameComponent := ROElement new. >>> ROSVGPath countries do: [ :k | >>> label := ROLabel elementOn: k asString. >>> label @ ROLightlyHighlightable. >>> label on: ROMouseEnter do: [ :event | ROBlink highlight: (view >>> elementFromModel: event model asSymbol) ]. >>> label on: ROMouseLeave do: [ :event | ROBlink unhighlight: (view >>> elementFromModel: event model asSymbol) ]. >>> nameComponent add: label. >>> ]. >>> ROGridLayout new >>> gapSize: -3; >>> lineItemsCount: 15; >>> on: nameComponent elements. >>> >>> view add: nameComponent. >>> nameComponent translateTo: 0 @ 400. >>> >>> view openInWindowSized: 1000 @ 700 >>> -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= >>> >>> Cheers, >>> Alexandre >>> -- >>> _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;: >>> Alexandre Bergel http://www.bergel.eu >>> ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;. >> >> -- >> _,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;: >> Alexandre Bergel http://www.bergel.eu >> ^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;._,.;:~^~:;. >> >> >> >> >> >> >> -- >> www.tudorgirba.com >> >> "Every thing has its own flow" >
