開(kāi)源一個(gè)丟人的、簡(jiǎn)單的顏色選擇器

darryrzhong 發(fā)布于2019-08-29 15:41 / 627人閱讀

摘要：簡(jiǎn)單的顏色選擇器不使用插件或是任何圖片無(wú)需任何依賴(lài)庫(kù)和近似的體驗(yàn)支持和格式輸入支持和輸出可監(jiān)聽(tīng)的事件可通過(guò)自定義的扁平化設(shè)計(jì)同時(shí)可在與瀏覽器中正常工作演示請(qǐng)?jiān)L問(wèn)該頁(yè)面查看在線(xiàn)您可以通過(guò)瀏覽頁(yè)面源代碼了解基本的使用方法安裝與使用安裝對(duì)象和

Simple Color Picker - 簡(jiǎn)單的顏色選擇器

不使用Flash插件或是任何圖片

無(wú)需任何依賴(lài)庫(kù)

和Photoshop近似的體驗(yàn)

支持 HEX 和 RGB 格式輸入

支持 HEX, RGB 和 HSB/HSV 輸出

可監(jiān)聽(tīng)的 onchange 事件

可通過(guò) CSS 自定義的扁平化設(shè)計(jì)

同時(shí)可在 Electron 與瀏覽器中正常工作

Demo 演示

請(qǐng)?jiān)L問(wèn)該頁(yè)面查看在線(xiàn)DEMO

您可以通過(guò)瀏覽DEMO頁(yè)面源代碼了解基本的使用方法

安裝與使用 安裝 Electron Webview

const ColorPicker = require(`./lib/color-picker.js`).ColorPicker
const colorPickerObject = new ColorPicker({
  dom: document.getElementById("colorPicker"), // DOM 對(duì)象
  value: "#00FF00" //和 {r:0,g:255,b:0} , "0F0" 以及 "00FF00" 具有相同作用
})

瀏覽器

然后，您只需要實(shí)例化一個(gè) ColorPicker 對(duì)象即可

const pickers = [
  new ColorPicker({
    dom: document.getElementById("picker1"),
    value: "#0F0"
  }),
  new ColorPicker({
    dom: document.getElementById("picker2"),
    value: { r: 0, g: 0, b: 255 }
  }),
  new ColorPicker({
    dom: document.getElementById("picker3")
  })
]

Usage

// 創(chuàng)建了一個(gè) ColorPicker 數(shù)組
const pickers = [
  new ColorPicker({
    dom: document.getElementById("picker1"),
    value: "#0F0"
  }),
  new ColorPicker({
    dom: document.getElementById("picker2"),
    value: { r: 0, g: 0, b: 255 }
  }),
  new ColorPicker({
    dom: document.getElementById("picker3")
  })
]
pickers.forEach(colorP =>
  colorP.addEventListener("change", event => {
    pickers.forEach(colorPs => {
      if (colorP !== colorPs) colorPs.value = colorP.value
    })
  })
)

// 您可以按照以下多種方式格式化值 "hex", "rgb", "hsb" 或是簡(jiǎn)單的hex顏色
// 示例
const valueGetSample = new ColorPicker({ value: "#ABC" }) // 與 "#AABBCC" 相同
const hex = valueGetSample.getValue("hex") // "AABBCC"
const rgb = valueGetSample.getValue("rgb") // {r: 170, g: 187, b: 204}
const hsb = valueGetSample.getValue("hsb") // {h: 210, s: 0.16666666666666663, b: 0.8}
const value = valueGetSample.getValue("value") // 與 valueGetSample.value 返回值相同

為什么做這個(gè)

純粹是因?yàn)間ithub上找不到感覺(jué)符合一個(gè)小玩具的設(shè)計(jì)風(fēng)格基于原生的JS顏色選擇器，
于是干脆自己寫(xiě)一個(gè)好了，萬(wàn)一還能騙幾個(gè)Star呢？（逃）

最后在玩著海王星和睡覺(jué)穿插著算是寫(xiě)了一個(gè)第一版，草草寫(xiě)了一下readme就發(fā)出來(lái)了，以上，全部。