View Full Version : Zooming for Ext.draw.Component

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
If i do it over

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
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/

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();
/*rotation: {
degrees: value
scale: {
cx: 0,
cy: 0,
x: value / 100,
y: value / 100
}, true);

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.


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.