PDA

View Full Version : Image scaling in sprite in Internet Explorer



gilescambray
10 Feb 2012, 6:53 PM
Hi.

I was wondering whether someone could help me. I'm creating a load of sprites, into which I'm adding an image, so that they can be eventually manipulated in size into some type of carousel. I'd like the image in each sprite to be scaled to the dimensions of that sprite.

Unfortunately the image scaling doesn't work in IE8 (VML I'm guessing). Am I doing something wrong? Seems find in Chrome.

As always, thanks in advance.



this.drawComponent = Ext.create('Ext.draw.Component', {
viewBox : false,
width: '100%',
height: '100%'
});

Ext.getCmp('drawing-panel').add(this.drawComponent);

var getClickFunction = function(imageCount) {
return function() {
alert(imageCount);
};
};

for ( var i = 0 ; i < 9 ; i ++ ) {
this.drawComponent.surface.add({
type: 'image',
src : '/content-images/' + (i+1) + '-front.jpg',
width: 200,
height: 200 * (187/139),
x: i*200,
y: 0,
listeners : {
click : getClickFunction(i+1)
},
}).show(true)
}

gilescambray
11 Feb 2012, 11:33 AM
Right ok, I sorted this. Anyone with a similar problem merely has to set the scaling factor for each sprite. So, when compared with the code in the previous post:



this.drawComponent.surface.add({
type: 'image',
src : '/content-images/1-front.jpg',
width: 100
height: 100,
x: i*100,
y: 0,
}).setAttributes({
scale: {
x:1,
y:1
}
}, true);