Question

我不能成为唯一有此问题的人，但我的搜索让我迷茫和迷茫。

我有一个使用渐变填充的自定义Ext.draw.Component。我的理解是旧的浏览器不支持渐变，但我认为Sencha通过向渲染的对象添加CSS来解释这一点。

Chrome 中的组件： Chrome IE 中的组件：

我的问题是：

Ext.js可以渲染到IE8和IE9的渐变吗？（IE10显示正常）
有没有办法确定浏览器是否不会渲染渐变，我可以只显示其他内容（例如，如果没有白色的elipses，IE中的竞争对手看起来不会那么糟糕）？

更新
以下是生成Stoplights的代码。 http://jsfiddle.net/wilsjd/Ts2qU/10/

    var sencha = Ext.create('Ext.draw.Component', {
        width: 170,
        height: 170,
        renderTo: this.get('elementToRenderTo'),
        gradients: [{
            id: 'middleGradient',
            angle: 180,
            stops: {
                0: {
                    color: this.get('backgroundColor'),
                    opacity: 1
                },
                50: {
                    color: this.get('backgroundColor'),
                    opacity: .6
                },
                100: {
                    color: this.get('backgroundColor'),
                    opacity: 1
                }
            }
        }, {
            id: 'lightGradient1',
            angle: -90,
            stops: {
                0: {
                    color: '#ffffff',
                    opacity: 0.01
                },

                100: {
                    color: '#ffffff',
                    opacity: .8
                }

            }
        }, {
            type: 'radial',
            id: 'radialGradient1',
            centerX:123.88702,
            centerY:391.47498,
            radius:166.47372,
            focalX:124.57159,
            focalY:391.47498,
            stops: {
                0: {
                    color: '#ffffff',
                    opacity: 0.01
                },

                100: {
                    color: '#ffffff',
                    opacity: .8
                }

            }
        }],
        items: [{
            type: 'rect',
            x: 1.6620979,
            y: 52.362183,
            radius: 90,
            width: 448.10959,
            height: 1000,
            fill: 'url(#middleGradient)',
            stroke: 'none'
        }, {
            type: "circle",
            radius: 140,
            x:224,
            y:896,
            stroke: "#000000",
                'stroke-width': 7,
            fill: this.get('goodColor')
        }, {
            type: "circle",
            x:224,
            y:214,
            radius:140,
            stroke: "#000000",
                'stroke-width': 7,
            fill: this.get('poorColor')
        }, {
            type: "circle",
            x:224,
            y:555,
            radius: 140,
            stroke: "#000000",
                'stroke-width': 7,
            fill: this.get('cautionColor')
        }, {
            type: "ellipse",
            radiusX: 112,
            radiusY: 80,
            x: 224,
            y: 156,
            fill: 'url(#lightGradient1)'
        }, {
            type: "ellipse",
            radiusX: 112,
            radiusY: 80,
            x: 224,
            y: 498,
            fill: 'url(#lightGradient1)'
        }, {
            type: "ellipse",
            radiusX: 112,
            radiusY: 80,
            x: 224,
            y: 838,
            fill: 'url(#lightGradient1)'
        }, {
            type: "text",
            text: this.get('poorValue'),
            x: poorValueX,
            y: 210,
            fill: "Black",
            font: "80px bold"
        }, {
            type: "text",
            text: this.get('cautionValue'),
            x: cautionValueX,
            y: 550,
            fill: "Black",
            font: "80px bold"
        }, {
            type: "text",
            text: this.get('goodValue'),
            x: goodValueX,
            y: 890,
            fill: "Black",
            font: "80px bold"
        }, {
            type: "text",
            text: poorLabel,
            x: 500,
            y: 210 + poorChangeY,
            fill: "Black",
            font: "80px bold"
        }, {
            type: "text",
            text: cautionLabel,
            x: 500,
            y: 550 + cautionChangeY,
            fill: "Black",
            font: "80px bold"
        }, {
            type: "text",
            text: goodLabel,
            x: 500,
            y: 890 + goodChangeY,
            fill: "Black",
            font: "80px bold"
        }, {
            type: "text",
            text: this.get('title'),
            x: 0,
            y: 0,
            fill: "Black",
            font: "100px bold"
        }, {
            type: "text",
            text: "Total = " + this.get('total'),
            x: 100,
            y: 1150,
            fill: "Black",
            font: "80px bold"
        }]
    });

Answer 1

Ext.js确实可以在IE中呈现渐变，但在这种情况下它不起作用（仍然需要来源来确定原因）
添加if语句以确定浏览器是IE8还是IE9（我也检查了文档模式 - IE10在IE8文档模式下不起作用），然后添加我的省略号）

Ext.draw.Component渐变不在IE中显示

1 个答案: