Question

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

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

Answer 1

使用下面的代码

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)
}

Answer 2

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

transform:rotate(180deg)

Answer 3

您可以像这样轮换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);
        }
    }
});

Answer 4

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

ExtJS中的图像

4 个答案: