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,664
    Vote Rating
    7
    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,664
    Vote Rating
    7
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi