Dojo 如何使用自定义颜色扩展dijit/ColorPalette（尤其是透明）

我在小部件中使用标准数字调色板。这是一个简单的工具，工作良好

但我需要用透明或无颜色来扩展它。我可以用几种方法来处理它：

只需在调色板附近添加一个按钮即可清除颜色

从

dijit/colorplate

复制所有代码，在我的模块中创建自定义调色板

仅通过一种

none

颜色扩展我模块中的

dijit/colorplate

（首选方式）

请告诉我如何扩展

dijit/colorplate

，或者如果无法进行简单的扩展，请告诉我实现

操作的另一种方法

---

我是Dojo新手，我想以正确的方式处理它。

一般来说，扩展Dojo dijit的方法如下：

define([
    'dojo/_base/declare',
    'dijit/ColorPalette'
], function(declare, ColorPalette) {

return declare([ColorPalette], {
    // add additonal functionality here
});});

快速查看

dijit/colorplate

和

dijit/\u-paletemixin

后，您可以扩展

dijit/colorplate

，或者在

\u-paletes

中创建一个包含透明颜色的新调色板数组，或者扩展您正在使用的7x10或3x4调色板。您可能还需要使用一个类来覆盖

dyeClass

属性，该类可以为no color返回一个不同的值

---

但是，如果我这样做，我会选择类似于选项1的选项。

一般来说，扩展dojo dijit的方法如下所示：

define([
    'dojo/_base/declare',
    'dijit/ColorPalette'
], function(declare, ColorPalette) {

return declare([ColorPalette], {
    // add additonal functionality here
});});

快速查看

dijit/colorplate

和

dijit/\u-paletemixin

后，您可以扩展

dijit/colorplate

，或者在

\u-paletes

中创建一个包含透明颜色的新调色板数组，或者扩展您正在使用的7x10或3x4调色板。您可能还需要使用一个类来覆盖

dyeClass

属性，该类可以为no color返回一个不同的值

---

但是，如果我这样做，我会选择类似选项1的选项。

如果您不想子类化

dijit/colorplate

（如在的回答中所示），可以使用将功能和属性添加到

colorplate

“类中。”

这样做将为

dijit/colorplate

属性

newProperty

提供all的未来实例。如果您只想将其应用于单个实例，请使用实例

require(["dojo/_base/lang", "dijit/ColorPalette"], function(lang, ColorPalette) {

    var cp = new ColorPalette({ /* properties */ });

    /* Mixes the second object __into__ the first object. */
    lang.mixin(cp, { 
        newProperty: newValue;
    });
}

---

如果不想子类化

dijit/colorplate

（如中的回答），可以使用向

colorplate

“类添加功能和属性。”

这样做将为

dijit/colorplate

属性

newProperty

提供all的未来实例。如果您只想将其应用于单个实例，请使用实例

require(["dojo/_base/lang", "dijit/ColorPalette"], function(lang, ColorPalette) {

    var cp = new ColorPalette({ /* properties */ });

    /* Mixes the second object __into__ the first object. */
    lang.mixin(cp, { 
        newProperty: newValue;
    });
}

---

我通过扩展

dijit/colorplete

（makesubclass）解决了这个问题。我添加了我想要的基本功能。 总的来说，我做了以下工作：

define([
    'dojo/_base/declare',
    'dijit/ColorPalette'
], function(declare, ColorPalette) {

return declare([ColorPalette], {
    // add additonal functionality here
});});

替代模板以添加新元素的保持架

添加控制alpha组件的滑块

覆盖

onChange

以混合颜色和alpha通道并返回颜色的CSS值， 还要添加

onChangeCss

，以监视我的模块中的更改

代码非常简单高效（这是可以改进的基本示例）

define（[“dojo/_base/declare”、“dijit/colorplete”、“dijit/form/horizontalslaider”，
“dojo/_base/Color”]，函数（声明，
调色板、水平滑块、颜色）{
返回declare（[ColorPalette]{
//添加一些字段
valueCss:“无”，
valueRgb:null，
价值A:0，
//覆盖模板
templateString:“”+
“阿尔法”+
'   '+
''+
' '+
''+
'',
后创建：函数（）{
//结束这个
var obj=这个；
this.value='#000000'；
//添加滑块
this.alpha=新的水平滑块({
名称：“阿尔法”，
值：0，
最低：0，
最多：5，
离散值：6，
中间变化：是的，
样式：“宽度：150px；”，
onChange：函数（值）{
obj.valueA=this.value/this.max；
对象onChange（null）；
}
}).placeAt（本.阿斯利德）；
},
//覆盖onChange以混合颜色和alpha并返回CSS值
onChange：函数（值）{
this.valueRgb=Color.fromHex（this.value）；
this.valueCss=Color.fromArray（[this.valueRgb.r，this.valueRgb.g，this.valueRgb.b，this.valueA]）toCss（true）；
this.onChangeCss（this.valueA？this.valueCss:'transparent'）；
},
//使用此方法而不是onChange来跟踪颜色变化
onChangeCss:函数（值）{
}
});
返回颜色调色板；}）；

我通过扩展dijit/colorplete（make subclass）解决了这个问题。我添加了我想要的基本功能。 总的来说，我做了以下工作：

define([
    'dojo/_base/declare',
    'dijit/ColorPalette'
], function(declare, ColorPalette) {

return declare([ColorPalette], {
    // add additonal functionality here
});});

替代模板以添加新元素的保持架

添加控制alpha组件的滑块

覆盖

onChange

以混合颜色和alpha通道并返回颜色的CSS值， 还要添加

onChangeCss

，以监视我的模块中的更改

代码非常简单高效（这是可以改进的基本示例）

define（[“dojo/_base/declare”、“dijit/colorplete”、“dijit/form/horizontalslaider”，
“dojo/_base/Color”]，函数（声明，
调色板、水平滑块、颜色）{
返回declare（[ColorPalette]{
//添加一些字段
valueCss:“无”，
valueRgb:null，
价值A:0，
//覆盖模板
templateString:“”+
“阿尔法”+
'   '+
''+
' '+
''+
'',
后创建：函数（）{
//结束这个