1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Orange County, CA
    Posts
    31
    Vote Rating
    0
    vega109 is on a distinguished road

      0  

    Default Est.draw.Sprite scaling

    Est.draw.Sprite scaling


    Hello

    Could you please explain me how Sprite scaling works? I tried this code but it didn't affect the sprite.
    My goal is provide zooming for a component image. Thanks!

    Code:
    var sprite = Ext.getCmp('draw-component').surface.items.first();
    sprite.setAttributes( {
    	scaling : {
    		x : 0,
    		y : 0,
    		cx : 1800,
    		cy : 1600,
    	}
    }, true);

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,656
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    if you want to change it you have to initialize the sprite with scale, it's the same with rotate/rotation you find in the examples.

    From source:
    Code:
     scale = attrs.scale;
            scaling = spriteAttrs.scaling;
            if (scale) {
                if ((scale.x && scale.x !== scaling.x) || 
                    (scale.y && scale.y !== scaling.y) ||
                    (scale.cx && scale.cx !== scaling.cx) ||
                    (scale.cy && scale.cy !== scaling.cy)) {
                    Ext.apply(scaling, scale);
                    me.dirtyTransform = true;
                }
                delete attrs.scale;
            }
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,656
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    i was wrong, you don't need it.

    Place this in your examples/drae directory and run:
    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Scaling</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../bootstrap.js"></script>
        <script type="text/javascript">
    Ext.onReady(function() {
    	Ext.create('Ext.draw.Component', {
    		renderTo: Ext.get('text-ph'),
    		viewBox: false,
    		autoSize: true,
    		height: 350,
    		padding: 20,
    		items: [
    			{
    				type: 'text',
    				text: 'With Ext JS 4.0 Drawing',
    				fill: '#000',
    				font: '18px Arial',
    				rotate: {
    					degrees: 45
    				}
    			}
    		]
    	});
    
    	Ext.create('Ext.draw.Component', {
    		renderTo: Ext.get('text-ph'),
    		viewBox: false,
    		autoSize: true,
    		height: 350,
    		padding: 20,
    		items: [
    			{
    				type: 'text',
    				text: 'Creating a rotated Text component',
    				fill: '#000',
    				font: '18px Arial',
    				rotate: {
    					degrees: 90
    				}
    			}
    		]
    	});
    
    	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
    				},
    				zindex: 100
    			}
    		]
    	});
    
    	Ext.create('Ext.slider.Single', {
    		renderTo: Ext.get('slider-ph'),
    		hideLabel: true,
    		width: 400,
    		minValue: 1,
    		maxValue: 10,
    		value: 1,
    		listeners: {
    			change: function(slider, value) {
    				var sprite = Ext.getCmp('snappy').surface.items.first();
    				sprite.setAttributes({
    					scaling: {
    						x: value,
    						y: value,
    						cx: value,
    						cy: value
    					},
    					zindex: 100
    				}, true);
    			}
    		}
    	});
    });
    
        </script>
        <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    </head>
        <body>
            <h1>Scaling</h1>
    
            <div id='slider-ph'></div>
            <div id='text-ph'></div>
        </body>
    </html>
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

Similar Threads

  1. Add Ext.draw.Stripe to Ext.draw.Component dynamicaly
    By vega109 in forum Ext: Discussion
    Replies: 3
    Last Post: 8 Apr 2011, 4:08 PM
  2. Replies: 5
    Last Post: 18 Mar 2011, 9:38 AM
  3. Replies: 1
    Last Post: 18 Mar 2011, 9:35 AM
  4. resizing vs scaling
    By Ciary in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 20 Apr 2009, 9:06 AM

Thread Participants: 1