Zooming for Ext.draw.Component

[Mycoding]

I want to relize zooming not over changing width of windows or panels but over
clicking on buttons like in map
http://www.ammap.com/
If i do it over

surface.items.setAttributes({
scale: {
x: 0.5,
y: 0.5
}
}, true);

I get all items on the same position but with changed size.

I found in source code this function.

surface.setViewBox(0, 0, 1000, 1000);
But I think it is private function and works not as I expect. It scale good by with some logic that I do not understand right.

Please guve me advice how to realize zooming like in this sample
[/URL]http://www.ammap.com/
If you also can give me advice how to do dragging.
I think I am kooking for this sample [url]http://dev.sencha.com/deploy/ext-4.0.2a/examples/draw/Tiger.html (http://www.ammap.com/)
with behavior of this http://www.ammap.com/

[slemmon]

I'm not sure you can drag sprite/collections in 4.0.2. I saw some forum posts on it using 4.0.5 I think (I only have 4.0.2).

As for zoom. I haven't tried with a complex surface. I modified the draw example to zoom a text type draw component. Not sure if that helps you, but here's that example:


Ext.create('Ext.draw.Component', {
renderTo: Ext.get('text-ph'),
id: 'snappy',
viewBox: false,
height: 350,
width: 200,
padding: 20,
items: [{
type: 'text',
text: 'Is a snap!',
fill: '#000',
font: '18px Arial',
y: 50,
rotate: {
degrees: 315
}
}]
});

Ext.create('Ext.slider.Single', {
renderTo: Ext.get('slider-ph'),
hideLabel: true,
width: 400,
minValue: 0,
//maxValue: 360,
maxValue: 500,
//value: 315,
// I added increment
increment: 10,
value: 0,
listeners: {
change: function(slider, value) {
var sprite = Ext.getCmp('snappy').surface.items.first();
sprite.setAttributes({
/*rotation: {
degrees: value
}*/
scale: {
cx: 0,
cy: 0,
x: value / 100,
y: value / 100
}
}, true);
}
}
});

[mxu]

I run into the same problems, when a sprite is alone, it works by scaling it, but when sprites are adjacent to each other, sprites each get scaled around its center so the sprites are overlap by scaling.

mxu