# 拾色器组件-pickr

# 介绍-pickr

扁平,简单,易于破解的拾色器。

一个没有任何依赖的拾色器组件,可以很容易地与Verge3D应用集成。Verge3D目前(3.2版)还不能与Vue等前端框架很好地集成,所以像这种没有任何依赖的组件是最理想的选择。功能演示

pickr下载:https://github.com/Simonwep/pickr/releases

pickr

# 功能

  • 3种主题
  • 使用简单(本文目的是让它用起来更简单)
  • 零依赖
  • 多种颜色表示法
  • 颜色对照
  • 控制不透明度
  • 精细调节-通过鼠标滚轮
  • 响应式和自动定位
  • 支持触控设备
  • 用于快速选择的色板
  • 完全可访问和i18n
  • Shadow-dom支持

# 主题

Classic Monolith Nano
Classic Monolith Nano

Nano使用css-grid布局,因此不支持老浏览器。

# 快速上手

# 引入文件

下载并解压.zip文件,将dist目录放到你的Verge3D应用文件夹下,然后按照下面的方式引入css和js文件。

注意:css文件有3个,对应3个主题,选择其中1个引入;js有两个包,也是选择1个,如果要考虑兼容老的浏览器就用pickr.es5.min.js

<!-- 以下主题任选其一 -->
<link rel="stylesheet" href="dist/themes/classic.min.css"/> <!-- 'classic' 主题 -->
<link rel="stylesheet" href="dist/themes/monolith.min.css"/> <!-- 'monolith' 主题 -->
<link rel="stylesheet" href="dist/themes/nano.min.css"/> <!-- 'nano' 主题 -->

<!-- 现代 或 es5 包,选其一 -->
<script src="dist/pickr.min.js"></script>
<script src="dist/pickr.es5.min.js"></script>
1
2
3
4
5
6
7
8

确保在pickr.min.css之后加载pickr.min.js(或es5版本)。此外,script标签不适用于defer属性。

# 使用

基于模板新建名为colorpicker的Verge3D应用。引入上述文件——

html:

<head>
  <script src="v3d.js"></script>
  <script src="colorpicker.js"></script>

  <link rel="stylesheet" type="text/css" href="colorpicker.css">
  
  <!-- 'nano' 主题 -->
  <link rel="stylesheet" href="dist/themes/nano.min.css" />

</head>
<body>
  <div class="pickr-container"></div>
  <script src="dist/pickr.es5.min.js"></script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS:

/*拾色器要挂载的父元素其高度要设为100vh*/
body {
    margin: 0px;
    overflow: hidden;
    height: 100vh;
}
1
2
3
4
5
6

JS: runCode()函数内

// 配置
const config = {
    el: '.pickr-container',
    theme: 'nano',
    comparison: false,
    position: "bottom-middle",
    padding: 10,
    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 1)',
        'rgba(3, 169, 244, 1)'
    ],
    defaultRepresentation: 'HEXA',
    components: {
        palette: true,
        preview: true,
        opacity: true,
        hue: true,

        interaction: {
            hex: false,
            rgba: false,
            hsva: false,
            input: true,
        }
    },
};

// 创建实例
let pickr = Pickr.create(config);
pickr.on('change', color => {
    let pk_color = color.toHEXA().toString();
    // 调用拼图中的setColor函数
    v3d.puzzles.procedures.setColor(pk_color);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 事件参考

使用on(event,cb)和off(event,cb)函数来绑定/取消绑定事件监听器。

事件 描述 参数
init 初始化完成-可以使用选择器 PickrInstance
hide Pickr关闭 PickrInstance
show Pickr打开 PickrInstance
save 用户单击“保存/清除”按钮。也可以使用空值触发。 HSVaColorObject or null, PickrInstance
clear 用户清除颜色。 PickrInstance
change 颜色已更改(但未保存)。同时在swatchselect上触发 HSVaColorObject, PickrInstance
changestop 用户停止更改颜色 PickrInstance
cancel 用户单击取消按钮(返回到先前的颜色)。 PickrInstance
swatchselect 用户单击了一个色板 HSVaColorObject, PickrInstance

示例:

pickr.on('init', instance => {
    console.log('init', instance);
}).on('hide', instance => {
    console.log('hide', instance);
}).on('show', (color, instance) => {
    console.log('show', color, instance);
}).on('save', (color, instance) => {
    console.log('save', color, instance);
}).on('clear', instance => {
    console.log('clear', instance);
}).on('change', (color, instance) => {
    console.log('change', color, instance);
}).on('changestop', instance => {
    console.log('changestop', instance);
}).on('cancel', instance => {
    console.log('cancel', instance);
}).on('swatchselect', (color, instance) => {
    console.log('swatchselect', color, instance);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

配置选项:

const pickr = new Pickr({

    // 这里的选择器或HTML元素会被真正的拾色器代替
    el: '.color-picker',

    // pickr-app将会附加给哪个元素,默认body
    container: 'body',

    // 使用哪个主题。 可以是'classic', 'monolith' 或 'nano'
    theme: 'classic',

    // Nested scrolling is currently not supported and as this would be really sophisticated to add this
    // it's easier to set this to true which will hide pickr if the user scrolls the area behind it.
    closeOnScroll: false,

    // 添加到pcr-app上的自定义类。用于自定义样式。
    appClass: 'custom-class',

    // Don't replace 'el' Element with the pickr-button, instead use 'el' as a button.
    // If true, appendToBody will also be automatically true.
    useAsButton: false,

    // 选择器(小组件)与对应参考(按钮)之间的间距,单位px
    padding: 8,

    // 如果为true,则拾色器不会浮动,而是会在el解析元素之后追加。
    // 使用.hide() 仍然可以隐藏它。
    inline: false,

    // If true, pickr will be repositioned automatically on page scroll or window resize.
    // Can be set to false to make custom positioning easier.
    autoReposition: true,

    // Defines the direction in which the knobs of hue and opacity can be moved.
    // 'v' => opacity- and hue-slider can both only moved vertically.
    // 'hv' => opacity-slider can be moved horizontally and hue-slider vertically.
    // Can be used to apply custom layouts
    sliders: 'v',

    // Start state. If true 'disabled' will be added to the button's classlist.
    disabled: false,

    // If true, the user won't be able to adjust any opacity.
    // Opacity will be locked at 1 and the opacity slider will be removed.
    // The HSVaColor object also doesn't contain an alpha, so the toString() methods just
    // print HSV, HSL, RGB, HEX, etc.
    lockOpacity: false,

    // Precision of output string (only effective if components.interaction.input is true)
    outputPrecision: 0,

    // 指定 change/save 行为:
    // - 如果要保持当前颜色直到点击了Save,则设置为 `true`,
    // - 如果将颜色应用于按钮并在每次更改时同步预览(Save)
    //   (从拾色器或色板中),则设置为“ false”。
    comparison: true,

    // 默认颜色. If you're using a named color such as red, white ... set
    // a value for defaultRepresentation too as there is no button for named-colors.
    default: '#42445a',

    // Optional color swatches. When null, swatches are disabled.
    // Types are all those which can be produced by pickr e.g. hex(a), hsv(a), hsl(a), rgb(a), cmyk, and also CSS color names like 'magenta'.
    // Example: swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7'],
    swatches: null,

    // 文本框输入/输出的默认颜色表示法。
    // 有效选项为`HEX`, `RGBA`, `HSVA`, `HSLA` 和`CMYK`.
    defaultRepresentation: 'HEX',

    // Option to keep the color picker always visible.
    // You can still hide / show it via 'pickr.hide()' and 'pickr.show()'.
    // The save button keeps its functionality, so still fires the onSave event when clicked.
    showAlways: false,

    // 使用快捷键关闭pickr。
    // Default is 'Escape'. Can be the event key or code.
    // (see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key)
    closeWithKey: 'Escape',

    // 定义color-picker的位置。
    // top, left, bottom 工 right和任一可项修改器: start, middle, end的组合。
    // 如: top-start / right-end
    // 如发生问题, color picker会自动定位。
    // Pickr的定准引擎使用 https://github.com/Simonwep/nanopop
    position: 'bottom-middle',

    // Enables the ability to change numbers in an input field with the scroll-wheel.
    // To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
    adjustableNumbers: true,

    // Show or hide specific components.
    // By default only the palette (and the save button) is visible.
    components: {

        // Defines if the palette itself should be visible.
        // Will be overwritten with true if preview, opacity or hue are true
        palette: true,

        preview: true, // Display comparison between previous state and new color
        opacity: true, // Display opacity slider
        hue: true,     // Display hue slider

        // 显示或隐藏在底部交互条的组件
        interaction: {

            // Buttons, if you disable one but use the format in default: or setColor() - set the representation-type too!
            hex: false,  // Display 'input/output format as hex' button  (hexadecimal representation of the rgba value)
            rgba: false, // Display 'input/output format as rgba' button (red green blue and alpha)
            hsla: false, // Display 'input/output format as hsla' button (hue saturation lightness and alpha)
            hsva: false, // Display 'input/output format as hsva' button (hue saturation value and alpha)
            cmyk: false, // Display 'input/output format as cmyk' button (cyan mangenta yellow key )

            input: false, // Display input/output textbox which shows the selected color value.
                         // the format of the input is determined by defaultRepresentation,
                         // and can be changed by the user with the buttons set by hex, rgba, hsla, etc (above).
            cancel: false, // 显示取消按钮, 设置颜色为前一个状态
            clear: false, // 显示清除按钮; 和取消相同, 但会保持窗口打开
            save: false,  // 显示保存按钮,
        },
    },

    // 翻译,可以在这里修改显示的按钮文字
    i18n: {

        // 在UI中显示
       'ui:dialog': 'color picker dialog',
       'btn:toggle': 'toggle color picker dialog',
       'btn:swatch': 'color swatch',
       'btn:last-color': 'use previous color',
       'btn:save': '保存',
       'btn:cancel': '取消',
       'btn:clear': '清除',

       // 用于标签
       'aria:btn:save': 'save and close',
       'aria:btn:cancel': 'cancel and close',
       'aria:btn:clear': 'clear and close',
       'aria:input': 'color input field',
       'aria:palette': 'color selection area',
       'aria:hue': 'hue selection slider',
       'aria:opacity': 'selection slider'
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

疑问?

请在钉钉群:21935218交流。群内除聚集众多开发者,还有最新动态、视频教程、智能客服@宅小呗、答疑、直播、下载等实用功能。如需宅家呗提供技术支持,请加钉钉好友:zjbcool

Verge3D知识社区 客服
上次更新: 2020-8-16 12:51:23