# colorpicker

**Repository Path**: clinfc/colorpicker

## Basic Information

- **Project Name**: colorpicker
- **Description**: 一个用 canvas 写的颜色选择器，学习 ES6+ 后练手的。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-01-14
- **Last Updated**: 2022-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# colorpicker

## 介绍
一个用 canvas 写的颜色选择器，学习 ES6+ 后练手的。


## 安装教程

将插件放到自己的项目目录下，然后引入 js 文件即可
```
<script src="colorpicker.js" type="text/javascript" charset="utf-8"></script>
```


## 参数配置

参数选项|说明|类型|默认值
--|:--:|:--:|:--:
elem|指向容器选择器（**必选项**）|String/Element
color|默认颜色，支持 HEX、RGB 和 RGBA|String|#FF0000
alpha|是否开启透明度，不开启透明度则不会显示透明度选择器且透明度值为 **1**|Boolean|false
predefine|是否开启预定义颜色|Boolean|false
colors|预定义颜色集，当 **predefine** 为 **true** 时才生效|Array|空数组
format|颜色显示/输出格式，支持 HEX、RGB 和 RGBA。当开启透明度时，自动转为 RGBA 格式|String|hex
zIndex|选择器面板根节点的 z-index 属性|Integer|666
change|颜色改变回调|Function||
done|颜色选择回调|Function||


## 使用说明

#### 一：直接初始化配置参数

```
<button type="button" id="btn">btn</button>

<script src="./colorpicker.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  let btn = document.querySelector('#btn');
  
  let cp = new colorpicker({
    // 通过直接指定 element 元素设置指向容器选择器
    // elem: btn,
    elem: '#btn',
    
    // 设置默认颜色
    color: '#FF0',
    
    // 开启预定义颜色
    predefine: true,
    
    // 设置预定义颜色（与 predefine 配套使用，predefine 为 true 才会生效）
    colors: ['#FF0000', '#DCDCDC', '#5FB878', '#009688', '#393D49', '#FFB800', '#FF5722', '#01AAED'],
    
    // 设置选择器根节点的 z-index 属性
    zIndex: 1024,
    
    // 设置颜色显示/输出格式
    format: 'hex',
    
    // 设置颜色改变回调
    change: color => {
      btn.style.color = color;
      btn.style.borderColor = color;
    },
    
    // 设置颜色选择回调
    done: color => btn.value = color,
  });
  
  // 根据配置生成颜色选择器面板
  cp.render();
  
</script>
```


#### 二：通过 colorpicker 实例化对象属性配置参数

```
<button type="button" id="btn">btn</button>

<script src="./colorpicker.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  
  let btn = document.querySelector('#btn');
  
  let cp = new colorpicker();
  
  // 设置指向容器选择器
  // cp.elem = '#btn';
  cp.elem = btn;
  
  // 设置默认颜色
  cp.color = '#FF0000';
  
  // 开启透明度
  cp.alpha = true;
  
  // 开启预定义颜色
  cp.predefine = true;
  
  // 设置预定义颜色（与 predefine 配套使用，predefine 为 true 才会生效）
  cp.colors = ['#FF0000', '#DCDCDC'];
  
  // 设置选择器根节点的 z-index 属性
  cp.zIndex = 1024;
  
  // 设置颜色显示/输出格式
  // cp.format = 'hex';
  // cp.format = 'rgb';
  cp.format = 'rgba';
  
  // 设置颜色改变回调
  cp.change = color => console.log(color);
  
  // 设置颜色选择回调
  cp.done = color => console.log(color);
  
  // 创建
  cp.render();
  
</script>
```


#### 三：colorpicker 实例化对象的属性

```
<button type="button" id="btn">btn</button>
    
<script src="./colorpicker.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  
  let btn = document.querySelector('#btn');
  let cp = new colorpicker();
  ... 配置过程省略 ...
  cp.render();
  
  // 获取当前 colorpicker 实例化对象的 ID
  let id = cp.id;
  
  // 获取当前选择的颜色值
  let color = cp.value;
  
  // 获取默认颜色（配置项均可通过 cp.xxx 进行获取）
  let defaultColor = cp.color;
  
</script>
```