コンポーネント内のExtJsで画像を回転させる方法を知っている人はいExt.Img
ますか? 私が今持っているコードは次のとおりです。
xtype:'image',
id: 'south_image',
src: '/Home/DefaultImage',
region: 'south',
width: 700,
height: 200
コンポーネント内のExtJsで画像を回転させる方法を知っている人はいExt.Img
ますか? 私が今持っているコードは次のとおりです。
xtype:'image',
id: 'south_image',
src: '/Home/DefaultImage',
region: 'south',
width: 700,
height: 200
以下のコードを使用
xtype:'image',
id: 'south_image',
src: '/Home/DefaultImage',
region: 'south',
width: 700,
height: 200,
style: {
transform: rotate(45deg),
-ms-transform: rotate(45deg),
-moz-transform: rotate(45deg),
-webkit-transform: rotate(45deg),
-o-transform: rotate(45deg)
}
Ext.draw.Component
次のように回転できます。
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
id: 'rotateImg',
viewBox: false,
padding: 20,
items: [{
type: 'image',
src: 'http://www.sencha.com/img/apple-touch-icon.png',
width: 200,
height: 200
}]
});
Ext.create('Ext.slider.Single', {
renderTo: Ext.getBody(),
hideLabel: true,
width: 400,
minValue: 0,
maxValue: 360,
value: 0,
listeners: {
change: function (slider, value) {
var sprite = Ext.getCmp('rotateImg').surface.items.first();
sprite.setAttributes({
rotation: {
degrees: value
}
}, true);
}
}
});
cssで画像の回転が可能です。画像のスタイルを次のように設定します
transform:rotate(180deg)
AFAIK imgが動的に生成されることを考えると、ExtJを介してそれを回転させる方法はありません。もちろん、サーバー上で回転させることもできます。これは些細なことですが、フォールバックしてキャンバス上で回転させてから、成分。