1

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

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

  1. 只需在调色板附近添加一个按钮即可清除颜色
  2. 复制所有代码dijit/ColorPalette以在我的模块中制作自定义调色板
  3. 在dijit/ColorPalette我的模块中仅扩展none一种颜色（首选方式）

如果无法进行简单的扩展，请指出如何扩展dijit/ColorPalette或其他方式来执行<set_none_color>操作。

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

4

3 回答 3

2

一般来说，扩展 dojo dijit 的方式如下：

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

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

快速查看dijit/ColorPaletteand后dijit/_PaletteMixin，您可以扩展dijit/ColorPalette并创建一个_palettes包含透明颜色的新调色板数组，或者扩展您正在使用的 7x10 或 3x4 调色板。您可能还必须dyeClass使用可以返回不同值的类来覆盖该属性，而该类没有颜色。

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

于 2013-09-11T22:22:40.267 回答
1

如果您不想子类化dijit/ColorPalette（如Thomas Upton的回答），您可以使用dojo/_base/lang::extend向ColorPalette“类”添加功能和属性。

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

    /* Extends the ColorPalette prototype */
    lang.extend(ColorPalette, { 
        newProperty: newValue
    });

});

这样做将给出该属性的所有未来实例， . 如果您只想将此应用于单个实例，请使用dojo/_base_lang::mixin实例。dijit/ColorPalettenewProperty

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;
    });
}
于 2013-09-12T15:35:48.993 回答
1

我通过扩展dijit/ColorPalette (make subclass)解决了这个问题。我添加了我想要的基本功能。一般来说，我做了以下事情：

  1. 覆盖模板以添加新元素的持有人
  2. 添加控制 alpha 分量的滑块
  3. 覆盖onChange以混合颜色和 alpha通道并返回颜色的 CSS 值，还添加onChangeCss到监视模块中的更改。

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

define([ "dojo/_base/declare", "dijit/ColorPalette", "dijit/form/HorizontalSlider",
     "dojo/_base/Color" ], function(declare,
    ColorPalette, HorizontalSlider, Color) {
return declare([ ColorPalette ], {
    //add some fields
    valueCss:'none',
    valueRgb:null,
    valueA:0,
    //override template
    templateString:'<div class="dijitInline dijitColorPalette" role="grid">'+
                        '<table><tr><td><span>Alpha</span></td>'+
                            ' <td><div data-dojo-attach-point="aSlider">  </div></td></tr></table>'+
                        '<table dojoAttachPoint="paletteTableNode" class="dijitPaletteTable" cellSpacing="0" cellPadding="0" role="presentation">'+
                            '<tbody data-dojo-attach-point="gridNode"> '+
                            '</tbody></table>'+
                    '</div>',

    postCreate: function(){
        //closure this
        var obj = this;
        this.value='#000000';
        //add slider
        this.alpha = new HorizontalSlider({
            name: "alpha",
            value: 0,
            minimum: 0,
            maximum: 5,
            discreteValues:6,
            intermediateChanges: true,
            style: "width:150px;",
            onChange: function(value){
                obj.valueA = this.value / this.maximum;
                obj.onChange(null);
            }
        }).placeAt(this.aSlider);

    },
    //override onChange to blend color & alpha and return CSS value 
    onChange: function(value){
        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');
    },
    //use this method instead of onChange to trace color changing 
    onChangeCss: function(value){
    }
});

return ColorPalette;   });
于 2013-09-13T12:06:01.423 回答