Laya中使用调色板,颜色选择器~~~vanilla-picker

Laya项目中有个选择颜色的需求,最开始是让用户自己填色值,但是非常不智能,于是要求使用颜色板选择,即下图所示:

 这里是直接使用了vanilla-picker插件

使用方法:

1.laya项目bin目录下html文件中加入

<script type="text/javascript" src="plugins/vanilla-picker.js"></script>

 2.libs文件夹下创建window.d.ts文件,并且插入下列代码(即把Picker挂载到window)

declare interface Window {
    Picker: any
}

3.使用Laya中创建dom的方法创建dom,并且将插件挂到dom上

 //contentpanel 即类似Laya.stage.各项目命名不同
var div = Laya.Browser.document.createElement("div");
    div.style.width = '200px'
    div.style.height = '28px'
    div.style.background = 'red'
    div.style.zIndex = 99999
    Laya.Browser.document.body.appendChild(div);
    new window.Picker({
      parent: div,
      editorFormat: "hex",
      color: "#dbeb",
      popup: "bottom",
      onChange: function (color) {
        console.log(color);
      },
    });

//下面是把dom通过sprite挂到laya项目中的指定位置,源码可以看官网示例 
 // 官网示例 -> http://layaair2.ldc2.layabox.com/demo/?category=2d&group=DOM&name=Video
    var reference = new Laya.Sprite();
    //此处不仅可以挂Sprite,也可以挂 Laya.Button,Laya.Text等等
    contentpanel.addChild(reference);
    reference.pos(100, 100);
    reference.size(200, 28);
    reference.graphics.drawRect(0, 0, reference.width, reference.height, "#333");
    contentpanel.on(Laya.Event.CLICK, this, Laya.Utils.fitDOMElementInArea, [div, reference, 0, 0, reference.width, reference.height]);
       //Laya.Event (官网用的RESIZE) 事件根据项目去改变.如果放在可拖拽的弹窗内,建议用CLICK

4.编译项目即可看到效果,打开调试台可以看到颜色板返回的颜色值

2021/10/15日  更新bug解决方案

项目启动时第一次是正常,颜色可以随调色板的色值变化,但是第二次打开时,颜色不改变,原因是因为创建了dom后没有移除,导致的bug,于是增加解决方案

// 设置 创建dom的ID
var div = Laya.Browser.document.createElement("div");
div.id = 'colorPicker';

// 通过getElementById 找到对应 dom
let ele = Laya.Browser.document.getElementById("colorPicker");

// 移除该dom
Laya.Browser.removeElement(ele)

// 把laya中关联该dom的节点也移除掉
reference.removeSelf()

//这样可以保证每次进入该方法都把以前的元素销毁

此功能在项目中可以正常使用了

2021/11/30日 优化方案-同事小姐姐发现Laya有封装过调色板,于是准备使用Laya封装版本,显示效果如图所示

相关代码=>封装代码​​​​​​​​​​​​​​

this.config = {
    color: '#fff'
}

let formDom = new ElForm({
    formItemCaller: this,
    formItemList: [{
    config: {
           // 此处是表单的label属性
         label: "线颜色"
    },
    inputClass: ElColorPicker,
    inputConfig: {
         model: "config.color"
    }
   }]
})
formDom.on(ElForm.Event_Submit, this, () => {
     //此处可以打印 this.config,然后处理业务逻辑就行了
})

//下面是将该组件放置的位置,根据业务自行处理
formDom.top = 20
this.contentArea.addChild(formDom)