開源一個丟人的、簡單的顏色選擇器

時間 2019-11-08

標籤開源一個丟人簡單顏色選擇器简体版

原文原文鏈接

Simple Color Picker - 簡單的顏色選擇器

不使用Flash插件或是任何圖片
無需任何依賴庫
和Photoshop近似的體驗
支持 HEX 和 RGB 格式輸入
支持 HEX, RGB 和 HSB/HSV 輸出
可監聽的 onchange 事件
可經過 CSS 自定義的扁平化設計
同時可在 Electron 與瀏覽器中正常工做

Demo 演示

請訪問該頁面查看在線DEMOcss

您能夠經過瀏覽DEMO頁面源代碼瞭解基本的使用方法html

安裝與使用

安裝

Electron Webview

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

瀏覽器

<head>
  <!-- .../ -->
  <!-- 引入css樣式表 -->
  <link rel="stylesheet" href="./color-picker.css">
  <!-- .../ -->
</head>

<body>
  <!-- .../ -->
  <!-- 引入JS -->
  <script src="./color-picker.js"></script>
  <!-- .../ -->
<body>

而後，您只須要實例化一個 ColorPicker 對象便可git

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

// 建立了一個 ColorPicker 數組
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" 或是簡單的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 返回值相同