How to scale sprites correctly

[pugillum]

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)

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();

[pugillum]

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:

{
    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.