開源一個丟人的、簡樸的色彩選擇器

2023年7月16日 131次阅读 来源: Handle

Simple Color Picker – 簡樸的色彩選擇器

  • 不運用Flash插件或是任何圖片
  • 無需任何依靠庫
  • 和Photoshop近似的體驗
  • 支撐 HEX 和 RGB 花樣輸入
  • 支撐 HEX, RGB 和 HSB/HSV 輸出
  • 可監聽的 onchange 事宜
  • 可經由過程 CSS 自定義的扁平化設想
  • 同時可在 Electron 與閱讀器中一般事情

Demo 演示

請接見該頁面檢察在線DEMO

您能夠經由過程閱讀DEMO頁面源代碼相識基礎的運用方法

裝置與運用

裝置

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 對象即可

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 返回值雷同

為何做這個

地道是因為github上找不到覺得相符一個小玩具的設想作風基於原生的JS色彩選擇器，
因而痛快本身寫一個好了，萬一還能騙幾個Star呢？（逃）

末了在玩着海王星和睡覺穿插着算是寫了一個初版，草草寫了一下readme就發出來了，以上，悉數。

    原文作者：Handle
    原文地址: https://segmentfault.com/a/1190000015251312
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞