uView colorSwitch 颜色转换

简介: uView colorSwitch 颜色转换

RGB转十六进制Hex

#rgbToHex(rgb)

该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值

  • rgb <String> RGB颜色值,如rgb(230, 231, 233)
export default{
  data() {
    return {
      rgb: 'rgb(13, 145, 20)'
    }
  },
  onLoad() {
    console.log(uni.$u.rgbToHex(this.rgb));
  }
}

copy

#十六进制Hex转RGB

#hexToRgb(hex)

该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值

  • hex <String> HEx颜色值,如#0afdce
export default{
  data() {
    return {
      hex: '#0afdce'
    }
  },
  onLoad() {
    console.log(uni.$u.hexToRgb(this.hex));
  }
}

copy

#颜色渐变

#colorGradient(startColor, endColor, step)

该函数实现两个颜色值之间等分取值,返回一个数组,元素为十六进制形式的颜色值,数组长度为step值。 例如:colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3),得到的结果为["#fafafa", "#fafafa", "#fbfbfb"]

  • startColor <String> 开始颜色值,可以是HEX或者RGB颜色值,如#0afdce或者rgb(120, 130, 150)
  • endColor <String> 结束颜色值,可以是HEX或者RGB颜色值,如#0afdce或者rgb(120, 130, 150)
  • step <Number> 均分值,把开始值和结束值平均分成多少份
export default{
  onLoad() {
    console.log(uni.$u.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3));
    // 结果为:["#fafafa", "#fafafa", "#fbfbfb"]
  }
}

copy

#颜色透明度

#colorToRgba(color, opacity = 0.3)

该函数可以接受一个十六进制或者rgb格式的颜色值(不能接受命名式颜色格式,比如white),返回此颜色的rgba格式值,如下:

  • color <String> 颜色值,只能hex或者rgba格式
  • opacity <Number> 不透明度值,取值为0-1之间
uni.$u.colorToRgba('#000000', 0.35);
// 结果为 rgba(0, 0, 0, 0.35)
uni.$u.colorToRgba('rgb(255, 180, 0)', 0.4);
// 结果为 rgba(255, 180, 0, 0.4)
相关文章
|
22天前
|
JavaScript
Js 实现十六进制颜色值和RGB颜色值转换整理
Js 实现十六进制颜色值和RGB颜色值转换整理
|
7月前
RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(下)
RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(下)
103 0
|
7月前
|
JavaScript 前端开发
vue ColorPicker 颜色选择器,传颜色值的问题
vue ColorPicker 颜色选择器,传颜色值的问题
52 0
|
11月前
|
数据可视化 大数据
Echarts自定义图形颜色的写法总结
Echarts自定义图形颜色的写法总结
156 0
|
6月前
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
74 0
|
7月前
|
存储
RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(上)
RGB颜色和16进制颜色转换太麻烦,使用SwiftUI搭建一个颜色值转换App(上)
64 0
|
10月前
|
移动开发 前端开发 HTML5
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
195 0
|
11月前
|
JavaScript 定位技术
WebGis——Pixi开发vue项目之使用遮罩实现图形缓慢填充颜色(三)
WebGis——Pixi开发vue项目之使用遮罩实现图形缓慢填充颜色(三)
|
JavaScript
vue里怎么修改svg的颜色?
vue里怎么修改svg的颜色?
689 0

热门文章

最新文章