当前位置:主页 > JavsScript库 > 其它 >

适合移动设备的 HSV/HSL 颜色选择器 — reinvented-color-wheel
栏目分类:其它   发布日期:2021-09-03   浏览次数:

适合移动设备的颜色选择器,可帮助您从色轮中选择颜色,然后将 HSV/HSL 颜色代码应用于您指定的元素。

使用:

安装重新发明的色轮。

# NPM
$ npm install reinvented-color-wheel --save
import "reinvented-color-wheel/css/reinvented-color-wheel.min.css";
import ReinventedColorWheel from "reinvented-color-wheel";

或者从 CDN 导入 JavaScript 和 CSS。

<link rel="stylesheet" href="reinvented-color-wheel.min.css">
<script src="reinvented-color-wheel.js"></script>

创建一个元素来保存颜色选择器。

<div id="example"></div>

创建一个新的重新发明的色轮。

new ReinventedColorWheel({
    appendTo: document.getElementById('example')
})

自定义重新发明的色轮的可能选项。

new ReinventedColorWheel({
    hsv: [0, 100, 100],
    hsl: [0, 100, 50],
    wheelDiameter: 200,
    wheelThickness: 20,
    handleDiameter: 16,
    wheelReflectsSaturation: true,
})

当颜色改变时执行一个函数。

new ReinventedColorWheel({
    onChange: function (color) {
    // 接收到的参数 `color` 是 ReinventedColorWheel 实例本身。
    // console.log("hsl:", color.hsl[0], color.hsl[1], color.hsl[2]);
    // console.log("hsv:", color.hsv[0], color.hsv[1], color.hsv[2]);
    },
})


手动设置颜色。

setHSL(HSLCODE);
setHSV(HSVCODE);



官方网站:https://github.com/luncheon/reinvented-color-wheel

相关热词: 颜色选择器

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库