ExtJS 中的图像答案

【问题标题】：Images in ExtJSExtJS 中的图像
【发布时间】：2012-12-28 16:13:26
【问题描述】：

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

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

【问题讨论】：

标签： javascript extjs extjs4 extjs-mvc

【解决方案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)
}

【讨论】：

【解决方案2】：

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

transform:rotate(180deg)

【讨论】：

【解决方案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);
        }
    }
});

【讨论】：

【解决方案4】：

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

【讨论】：

否决？请解释。他要求在 Ext 中旋转图像的方法，而不是组件，而不是在 CSS 中旋转图像的方法，而在 Ext 中，没有办法做到这一点。
有一种使用绘图库的方法。
他显然是在问如何旋转图像（xtype: 'image'），而不是如何使用另一种 Ext 组件。不，没有办法在 ExtJs 中做到这一点而不使用样式（AKA CSS）或者按照我说的做，当你不注意你在做什么时不要使用 downvote...