PDA

View Full Version : Zooming for Ext.draw.Component



Mycoding
15 Aug 2011, 9:26 AM
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
16 Aug 2011, 10:03 PM
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
18 Oct 2011, 7:55 AM
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

elsbree
28 May 2013, 3:31 PM
Is there a solution to this yet? I'm having the same issue, and I'd like to solve it without having to use an additional library.