4

有谁知道在Ext.Img组件内的 ExtJs 中旋转图像的方法？我现在的代码是：

    xtype:'image',
    id: 'south_image',
    src: '/Home/DefaultImage',
    region: 'south',
    width: 700,
    height: 200
4

4 回答 4

2

使用下面的代码

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)
}
于 2013-08-06T13:08:36.173 回答
1

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);
        }
    }
});
于 2012-12-31T09:25:39.257 回答
1

使用 css 可以进行图像旋转。设置图像的样式，例如

transform:rotate(180deg)
于 2012-12-28T19:28:42.957 回答
-1

AFAIK 没有办法通过 ExtJs 旋转它，因为 img 是动态生成的，你当然可以在你的服务器上旋转它，这应该是微不足道的，或者回退到在画布上旋转它，然后将它添加到你的零件。

于 2012-12-28T19:18:24.173 回答