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

高级漂亮的HTML5/javascript颜色选择器 - iro.js
栏目分类:其它   发布日期:2021-09-03   浏览次数:

iro.js 是一个时尚的、基于 HSV 颜色的 JavaScript 颜色选择器,用于生成一个漂亮的、canvas基于HTML5的带有触摸支持的色轮 UI。

还提供允许您设置、更新、在颜色之间转换的 API 方法。

更多功能:

  • 支持任何颜色格式:Hex、Hex alpha、RGB、RGBA、RGB 对象、RGBA 对象、HSL、HSLA、HSL 对象、HSLA 对象、HSV 对象、HSVA。

  • 多色选择。

  • 支持 3 种布局:Wheel、Slider、Box。

安装:

# NPM
$ npm install @jaames/iro --save

使用:

将 iro.js 作为 ES 模块导入。

import iro from "@jaames/iro";

或者将核心 JavaScript 库添加到 html 页面:

<!-- 来自 dist 文件夹 -->
<script src="dist/iro.js"></script>
<!-- 或来自 CDN -->
<script src="/uploads/allimg/210903/15105QG0-1.jpg"></script>

为颜色选择器创建一个占位符元素。

<div class="wheel" id="colorWheelDemo"></div>

在容器“colorWheelDemo”内生成一个基本的颜色选择器。

var colorWheel = new iro.ColorPicker("#colorWheelDemo", { 
    // 此处的选项
});

自定义颜色选择器的布局。它目前有 3 种布局:

  • 车轮

  • 滑块

  • 盒子

var colorWheel = new iro.ColorPicker("#colorWheelDemo", {
   
    layout: [
    { 
      component: iro.ui.Wheel,
      options: {
        wheelLightness: true,
        wheelAngle: 0,
        wheelDirection: "anticlockwise"
      } 
    },
    {
      component: iro.ui.Box,
      options: {
        // 见下文
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'hue' // 也可以是 'saturation', 'value', 'alpha' or 'kelvin',
        sliderShape: 'circle',
        activeIndex: 2
      }
    }
    ]
     
});

自定义颜色选择器的可能选项。

var colorWheel = new iro.ColorPicker("#colorWheelDemo", { 
   
    // 颜色选择器的
   width: 300,
   
    // 初始颜色
    color: '#fff', 
   
    // 用于多色选择的初始颜色。
    colors: null , 
   
    // CSS 显示值
    display: 'block', 
   
    // 颜色选择器的唯一 id 
    id: null, 
   
    // 自定义布局
    layout: null, 
   
    // or 'horizontal' 
    layoutDirection: "vertical", 
   
    // 边框宽度
    borderWidth : 0, 
   
    // 边框颜色
    borderColor: '#fff', 
   
    // 句柄间距 
    padding: 4,
   
    // 手柄半径
    handleRadius: 8, 
   
    // 覆盖活动颜色句柄的半径
    activeHandleRadius: null, 
   
    // 自定义句柄 SVG 
    handleSvg: null, 
   
    // 自定义句柄道具
    handleProps: { 
      x: 0, 
      y: 0 
    }, 
   
    // 当亮度减小
    wheelLightness: true, 
   
    // 起始角度
    wheelAngle: 0, 
   
    // 顺时针/逆时针
    wheelDirection: 'anticlock', 
   
    // 滑块大小
    sliderSize: undefined, 
   
    // 滚轮和滑块控件之间的距离
    sliderMargin: 12 
     
});

获取和设置给定格式的颜色。支持的颜色格式:

  • hexString:“#ff0000”

  • hex8String:“#ff0000ff”

  • rgb: { r: 255, g: 0, b: 0 }

  • rgba: { r: 255, g: 0, b: 0, a: 1 }

  • rgbString: “rgb(255, 0, 0)”

  • rgbaString: “rgb(255, 0, 0, 1)”

  • hsl: { h: 360, s: 100, l: 50 }

  • hsla: { h: 360, s: 100, l: 50, a: 1 }

  • hslString: “hsl(360, 100%, 50%)”

  • hslaString: “hsla(360, 100%, 50%, 1)”

  • hsv: { h: 360, s: 100, v: 100 }

  • hsva: { h: 360, s: 100, v: 100, a: 1 }

  • red:0 到 255

  • green:0 到 255

  • blue:0 到 255

  • alpha:0 到 1

  • hue:0 到 360

  • saturation:0 到 100

  • value:0 到 100

  • kelvin:1000 到 40000

// 获取
var myColor = colorWheel.color.COLORFORMAT; 
console.log(myColor);
   
// 设置
colorWheel.color.COLORFORMAT = STRING OR OBJECT

事件处理程序可用。

colorWheel.on('color:change', function(color, changes){ 
  // 当颜色发生变化时,回调会传递颜色对象和一个提供哪些颜色通道(H、S、V 之外)发生变化的对象. 
}) 
   
colorWheel.on('color:init', function(color){ 
  // 与 color:change 相同,但只使用提供给颜色选择器的初始颜色值触发一次。
}) 
   
colorWheel.on('color: remove', function(color){ 
  // 当颜色从颜色选择器中移除时
}) 
   
colorWheel.on('input:change', function(color, changes){ 
  // 类似于 color:change,除了这只是每当用户直接输入更改颜色时触发。
}) 
   
colorWheel.on('input:start', function(color){
  // 当用户开始与颜色选择器交互时,回调将传递颜色对象
}) 
   
colorWheel.on('input:move', function(color){ 
  // 当用户在开始交互后移动他们的指针/鼠标时
} ) 
   
colorWheel.on('input:end', function(color){ 
  // 当用户完成与颜色选择器的交互后,回调将传递颜色对象
}) 
   
colorWheel.on('mount', function(color) { 
  // 一旦颜色选择器 UI 安装到 DOM 中就会触发
})

颜色选择器方法。

// 添加颜色
colorWheel.addColor(IroColorValue, colorIndex(optional)); 
   
// 移除颜色
colorWheel.removeColor(colorIndex); 
   
// 设置活动颜色
colorWheel.setActiveColor(colorIndex); 
   
// 设置颜色
colorWheel.setColors([], activeColorIndex); 
   
// 将颜色选择器的大小调整为新的大小
colorWheel.resize(width); 
   
// 重置颜色选择器
colorWheel.reset(); 
   
// 更新颜色选择器
colorWheel.forceUpdat();

颜色方法。

// 设置颜色
myColor.set(color);
   
// 设置颜色通道
// myColor.setChannel(format, channel, value);
myColor.setChannel('rgb', 'r', 255);
   
// 克隆颜色
myColor.clone(color);
   
// 重置颜色
myColor.reset();
   
// 将 HSV 转换为 RGB
myColor.hsvToRgb(HSV);
   
// 将 RGB 转换为 HSV
myColor.rgbToHsv(RGB);
   
// 将 HSV 转换为 HSL
myColor.hsvToHsl(HSV);
   
// 将 HSL 转换为 HSV
myColor.hslToHsv(HSL);
   
// 将开尔文温度转换为 RGB
myColor.kelvinToRgb(kelvin temperature);
   
// 将 RGB 转换为开尔文温度
myColor.kelvinToRgb(RGB);

官方网站:https://iro.js.org/

相关热词: iro.js颜色选择器

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