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)