类名 common/base/Color.js
import Zondy from './Zondy'
import { defaultValue, Log } from '../util'

/**
 * 颜色类
 * @classdesc 颜色类
 * @class Color
 * @param {Number} [red = 0.0] 红色
 * @param {Number} [green = 0.0] 绿色
 * @param {Number} [blue = 0.0] 蓝色
 * @param {Number} [alpha = 1.0] 透明度
 */
class Color {
  constructor(red, green, blue, alpha) {
    this.red = defaultValue(red, 0.0)
    this.green = defaultValue(green, 0.0)
    this.blue = defaultValue(blue, 0.0)
    this.alpha = defaultValue(alpha, 1.0)
  }

  /**
   * 转为cesium的rgba值
   * @return {Object} cesium的rgba值
   */
  toCesiumRGB() {
    return {
      red: this.red / 255,
      green: this.green / 255,
      blue: this.blue / 255,
      alpha: this.alpha
    }
  }

  /**
   * 转为rgba字符串
   * @return {String} rgba字符串
   */
  toCssRGBAString() {
    return `rgba(${this.red},${this.green},${this.blue},${this.alpha})`
  }

  /**
   * 转为rgb字符串
   * @return {String} rgb字符串
   */
  toCssRGBString() {
    return `rgb(${this.red},${this.green},${this.blue})`
  }

  /**
   * 克隆字符串
   * @return {Color} 颜色对象
   */
  clone() {
    return new Color(this.red, this.green, this.blue, this.alpha)
  }

  /**
   * 导出为JSON对象
   * @return {Object} JSON对象
   */
  toJSON() {
    return {
      red: this.red,
      green: this.green,
      blue: this.blue,
      alpha: this.alpha
    }
  }
}

/**
 * 将rgb或rgba字符串转成一个Color对象
 * @param {String} rgb rgb或rgba字符
 * @return {Color} Color对象
 */
Color.fromRGBString = function (rgb) {
  if (Color.isRGB(rgb)) {
    if (rgb.indexOf('rgba') > -1 || rgb.indexOf('RGBA') > -1) {
      let cssString = rgb.substring(5, rgb.length - 1)
      cssString = cssString.split(',')
      if (cssString.length === 4) {
        return new Color(
          Number(cssString[0]),
          Number(cssString[1]),
          Number(cssString[2]),
          Number(cssString[3])
        )
      }
    } else if (rgb.indexOf('rgb') > -1 || rgb.indexOf('RGB') > -1) {
      let cssString = rgb.substring(4, rgb.length - 1)
      cssString = cssString.split(',')
      if (cssString.length === 3) {
        return new Color(
          Number(cssString[0]),
          Number(cssString[1]),
          Number(cssString[2])
        )
      }
    }
  }

  return undefined
}

/**
 * 将hex字符串转成一个Color对象
 * @param {String} hex hex字符串
 * @return {Color} Color对象
 */
Color.fromHexString = function (hex) {
  if (Color.isHex(hex)) {
    const rgb = Color.hexToRgb(hex)
    if (rgb.indexOf('rgba') > -1 || rgb.indexOf('RGBA') > -1) {
      return Color.fromRGBString(rgb)
    } else if (rgb.indexOf('rgb') > -1 || rgb.indexOf('RGB') > -1) {
      return Color.fromRGBString(rgb)
    }
  }
  return undefined
}

/**
 * 将json转成一个Color对象
 * @param {String} json json对象
 * @return {Color} Color对象
 */
Color.fromJSON = function (json) {
  json = defaultValue(json, {})
  const red = defaultValue(json.red, 255.0)
  const green = defaultValue(json.green, 255.0)
  const blue = defaultValue(json.blue, 255.0)
  const alpha = defaultValue(json.alpha, 1.0)
  return new Color(red, green, blue, alpha)
}

/**
 * 将hex字符串转成一个rgb字符串
 * @param {String} hex hex字符串
 * @return {String} rgb字符串
 */
Color.hexToRgb = function (hex) {
  // 3位、4位、6位以及8位hex值
  const reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/
  // 格式判断
  if (!reg.test(hex)) {
    return
  }
  let newStr = hex.toLowerCase().replace(/\#/g, '')
  let length = newStr.length
  // 三位或四位扩充为8位
  if (length === 3 || length === 4) {
    let t = ''
    for (let i = 0; i < length; i++) {
      t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1))
    }
    newStr = t
    length = newStr.length
  }
  // 将字符串分隔,两个两个的分隔
  const arr = []
  for (let i = 0; i < length; i += 2) {
    const s = newStr.slice(i, i + 2)
    arr.push(parseInt(`0x${s}`))
  }
  // 生成rgb字符串
  let rgb
  if (length === 6) {
    rgb = `rgb(${arr.join(',')})`
  } else if (length === 8) {
    rgb = 'rgba('
    for (let i = 0; i < 3; i++) {
      rgb += `${arr[i]},`
    }
    rgb += `${arr[3] / 255})`
  }
  return rgb
}

/**
 * 将rgb字符串转成一个hex字符串
 * @param {String} rgb rgb字符串
 * @return {String} hex字符串
 */
Color.rgbToHex = function (rgb) {
  // 格式校验
  const reg = /^(rgb|rgba|RGB|RGBA)/
  if (!reg.test(rgb)) {
    return
  }

  let arr
  if (rgb.indexOf('rgba') > -1 || rgb.indexOf('RGBA') > -1) {
    arr = rgb.slice(5, rgb.length - 1).split(',')
  } else {
    arr = rgb.slice(4, rgb.length - 1).split(',')
  }

  function get16Str(number) {
    let t = Number(number).toString(16)
    if (t === '0') {
      // 如果为“0”的话,需要补0操作,否则只有5位数
      t += '0'
    }
    // 如果长度为1的话,需要补0操作,否则只有5位数
    if (t.length === 1) {
      t = `0${t}`
    }
    return t
  }

  let hex = '#'
  for (let i = 0; i < 3; i++) {
    hex += get16Str(arr[i])
  }
  // 透明度为0-1
  if (arr.length === 4) {
    hex += get16Str(Number(arr[3]) * 255)
  }
  return hex
}
/**
 * 转换为color对象
 * @param {Color|String} hex字符串或rgba字符串或Color对象
 * @return {Color} 转换后的颜色对象
 */
Color.fromColor = function (color) {
  if (typeof color === 'string') {
    if (Color.isHex(color)) {
      return Color.fromHexString(color)
    } else if (Color.isRGB(color)) {
      return Color.fromRGBString(color)
    }
  } else if (color instanceof Color) {
    return color
  } else if (Array.isArray(color)) {
    if (color.length === 3) {
      return new Color(color[0], color[1], color[2])
    } else if (color.length === 4) {
      return new Color(color[0], color[1], color[2], color[3])
    } else {
      Log.info('非法颜色值数组!')
      return new Color()
    }
  } else if (color instanceof Object) {
    return Color.fromJSON(color)
  } else {
    return new Color()
  }
}

/**
 * 判断是否是hex字符串
 * @param {String} hex hex字符串
 * @return {Boolean} 是否是hex字符串
 */
Color.isHex = function (hex) {
  // 3位、4位、6位以及8位hex值
  const reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/
  // 格式判断
  return reg.test(hex)
}

/**
 * 判断是否是rgb字符串
 * @param {String} rgb rgb字符串
 * @return {Boolean} 是否是rgb字符串
 */
Color.isRGB = function (rgb) {
  // 格式校验
  const reg = /^(rgb|rgba|RGB|RGBA)/
  return reg.test(rgb)
}

Zondy.Color = Color
export default Color
构造函数
成员变量
方法
事件