1. #1
    Sencha User Mycoding's Avatar
    Join Date
    May 2010
    Location
    Russia, Volgograd
    Posts
    460
    Vote Rating
    0
    Mycoding is on a distinguished road

      0  

    Default Unanswered: Zooming for Ext.draw.Component

    Unanswered: Zooming for Ext.draw.Component


    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
    Code:
    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.
    Code:
    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
    http://www.ammap.com/
    If you also can give me advice how to do dragging.
    I think I am kooking for this sample http://dev.sencha.com/deploy/ext-4.0...raw/Tiger.html
    with behavior of this http://www.ammap.com/

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    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:

    Code:
    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);
                }
            }
        });

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Posts
    445
    Vote Rating
    0
    mxu is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    8
    Answers
    2
    Vote Rating
    0
    elsbree is on a distinguished road

      0  

    Default


    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.

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar