ExtJS 6如何更改精灵的颜色

Posted 2021-04-05

如何使用我尝试使用下面的代码的按钮更改绘图的颜色，但它不起作用，是否有更有效的方法来更改sencha ext js中的颜色，如单击按钮时将出现颜色网格？

使用此示例：https://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#free-paint

视图

 tbar: ['->', {
        text: 'Color',
        handler: function (button) {
            var draw = Ext.getCmp('sprite');
            if (strokeStyle == yellow) {
                strokeStyle: new Ext.util.Color(255,255,0)
                button.setText('Yellow');
             } else {
                strokeStyle: new Ext.util.Color(0,30,255)
                button.setText('Blue');
             }
        }];

零件

 me.sprite = surface.add({
    type: 'path',
    path: ['M', me.list[0], me.list[1], 'L', me.list[0] + 1e-1, me.list[1] + 1e-1],
    lineWidth: 20,
    lineCap: 'round',
    lineJoin: 'round',
    draggable: 'true',
    strokeStyle: new Ext.util.Color(0,0,0)
    });
    surface.renderFrame();

答案

我不熟悉Ext.draw.*组件，但根据文档，要改变Ext.draw.sprite.Sprite的颜色，你可以使用像这样的setAttributes()方法：

sprite.setAttributes({
    strokeStyle: color
});

要选择颜色，你可以使用Ext.ux.colorpick.Field。

这是fiddle来说明。