SimpleColorPicker-一个简单的颜色选择器,不使用Flash插件或任何图像,不需要任何依赖库和类似Photoshop的体验支持HEX和RGB格式输入支持HEX、RGB和HSB/HSV输出可监听onchange事件可以通过CSS自定义的扁平化设计在Electron和浏览器中都可以正常工作。演示演示请访问此页面以查看在线演示。可以浏览DEMO页面的源码了解基本用法。安装使用InstallElectronWebviewconstColorPicker=require(`./lib/color-picker.js`).ColorPickerconstcolorPickerObject=newColorPicker({dom:document.getElementById('colorPicker'),//DOMobjectvalue:'#00FF00'//和{r:0,g:255,b:0},'0F0'和'00FF00'效果一样})Browser
然后,你只需要实例化一个ColorPicker对象constpickers=[newColorPicker({dom:document.getElementById('picker1'),value:'#0F0'}),newColorPicker({dom:document.getElementById('picker2'),valuee:{r:0,g:0,b:255}}),newColorPicker({dom:document.getElementById('picker3')})]用法//创建一个ColorPicker数组constpickers=[newColorPicker({dom:document.getElementById('picker1'),value:'#0F0'}),newColorPicker({dom:document.getElementById('picker2'),value:{r:0,g:0,b:255}}),newColorPicker({dom:document.getElementById('picker3')})]pickers.forEach(colorP=>colorP.addEventListener('change',event=>{pickers.forEach(colorPs=>{if(colorP!==colorPs)colorPs.value=colorP.value})}))//您可以使用以下各种方式格式化值“hex”、“rgb”、“hsb”或简单的十六进制颜色//示例constvalueGetSample=newColorPicker({value:'#ABC'})//与“#AABBCC”相同consthex=valueGetSample.getValue('hex')//“AABBCC”constrgb=valueGetSample.getValue('rgb')//{r:170,g:187,b:204}consthsb=valueGetSample.getValue('hsb')//{h:210,s:0.16666666666666663,b:0.8}constvalue=valueGetSample.getValue('value')//返回值和valueGetSample.value一样为什么要这样做纯粹是因为我在github上找不到基于原生JS取色器的小玩具设计风格,所以自己写一个,万一可以呢被骗了多少星?(Escape)最后,我一边打海王,一边穿插睡觉,写出了第一版。草草写了readme发了出去,以上都是。