1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    pugillum is on a distinguished road

      0  

    Default Unanswered: How to scale sprites correctly

    Unanswered: How to scale sprites correctly


    I am attempting to create a dial/gauge using the Sencha Draw component. I have managed to get it rendered successfully and I'm happy with the customization possible using a combination of circles and SVG paths. However, I'm wanting to be able to scale the dial and the only way I've come up with doing it seems rather messy in that I have to use the scale and transform attributes and for the transform I have to calculate the center of area for the component. Is there perhaps a better way?

    Here is my code (somewhat simplified from my original dial)
    Code:
    var sizeFactor = 2;
    
    
    var radiusCircle = 100 * sizeFactor;
    
    
    var drawComponent = Ext.create('Ext.draw.Component',{
        id: 'airGauge',
        items: [
            
            
              {
                type: 'circle',
                fill: '#00f',
                radius: 100,
                x: 100,
                y: 100,
                scale: {
                    x: sizeFactor,
                    y: sizeFactor
                },
                translate: {
                    x: 100 * (sizeFactor - 1),
                    y: 100 * (sizeFactor - 1)
                }
              },
              {
                type: 'path',
                path: 'M 163 163 A 90 90 0 1 0 37 163 L 50 150 A 72 72 0 1 1 150 150 M 150 150 L 163 163 Z',
                fill: '#000',
                scale: {
                    x: sizeFactor,
                    y: sizeFactor
                }, 
                translate: {
                    x: 100 * (sizeFactor - 1),
                    y: 86 * (sizeFactor - 1)
                }
              },
              {
                type: 'rect',
                fill: '#f00',
                width: 100,
                height: 100,
                x: 100,
                y: 100,
                scale: {
                    x: sizeFactor,
                    y: sizeFactor
                }, 
                translate: {
                    x: 150 * (sizeFactor - 1),
                    y: 150 * (sizeFactor - 1)
                }
                
              },
              {
                type: 'rect',
                fill: '#ff0',
                width: 100,
                height: 100,
                x: 200,
                y: 200
                
              }
              
        ]
        
    });
    
    
    drawComponent.setHeight(2 * radiusCircle);
    
    
    Ext.Viewport.add({
        xtype: 'panel',
        id: 'panel-container',
        fullscreen: true,
        layout: 'fit',
        items: [drawComponent]
    });
    drawComponent.surface.renderFrame();

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    pugillum is on a distinguished road

      0  

    Default


    I've managed to make a bit more progress. It seems like the translate isn't necessary if one specifies centerX and centerY properties (info I found in another forum post).

    So like this:

    Code:
    {
        type: 'circle',
        fill: '#529aff',
        radius: 100 - 3,
        x: 100,
        group: 'yall',
        y: 100,
        scale: {
        	centerX : 0,
    	centerY : 0,
        	x: sizeFactor,
        	y: sizeFactor
        }
    }
    Unfortunately the scaling messes up the gradients that I'm using.

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