vue-ts-example/public/html-page/colormapwidget.js

// @ts-nocheck
colormapwidget.names = ['default', 'blue', 'gray', 'cooledit'];

colormapwidget.prototype.getGradientColors = function (name) {
  if (name == 'blue') {
    return ['#050525', '#000CFF', '#33FFFF', '#F9FFFF'];
  } else if (name == 'gray') {
    return ['#050525', '#FBFBFB'];
  } else if (name == 'cooledit') {
    return ['#010E19', '#720271', '#D7032C', '#FDBC5F', '#F8FFED'];
  } else {
    return ['#050525', '#0000CF', '#00FF20', '#EFFF00', '#FF007C'];
  }
};
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
colormapwidget.prototype.colorRgb = function (sColor) {
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  var sColor = sColor.toLowerCase();
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = '#';
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    //处理六位的颜色值
    var sColorChange = [];
    for (var i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
    }
    return sColorChange;
  } else {
    return sColor;
  }
};

// 将rgb表示方式转换为hex表示方式
colormapwidget.prototype.colorHex = function (rgb) {
  var reg = /(\d{1,3}),(\d{1,3}),(\d{1,3})/;
  var arr = reg.exec(rgb);

  function hex(x) {
    return ('0' + parseInt(x).toString(16)).slice(-2);
  }
  var _hex = '#' + hex(arr[1]) + hex(arr[2]) + hex(arr[3]);
  return _hex.toUpperCase();
};

//计算两个颜色的step个阶梯色
colormapwidget.prototype.gradientColor = function (startColor, endColor, step) {
  var startRGB = this.colorRgb(startColor); //转换为rgb数组模式
  var startR = startRGB[0];
  var startG = startRGB[1];
  var startB = startRGB[2];

  var endRGB = this.colorRgb(endColor);
  var endR = endRGB[0];
  var endG = endRGB[1];
  var endB = endRGB[2];

  var sR = (endR - startR) / step; //总差值
  var sG = (endG - startG) / step;
  var sB = (endB - startB) / step;

  var colorArr = [];
  for (var i = 0; i < step; i++) {
    //计算每一步的hex值
    //var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
    //colorArr.push(hex);
    colorArr.push([parseInt(sR * i + startR), parseInt(sG * i + startG), parseInt(sB * i + startB)]);
  }
  return colorArr;
};

colormapwidget.prototype.setDbRange = function (count) {
  this.count = count;
  this.mapCount = count;
  this.calColors();
};

colormapwidget.prototype.getColors = function () {
  if (
    this.name === this.buff_name &&
    this.gravity === this.buff_gravity &&
    this.gravity_value === this.buff_gravity_value &&
    this.count === this.buff_count
  )
    return this.buff_colors;

  return this.calColors();
};
colormapwidget.prototype.getMapColors = function () {
  return this.buff_mapCountcolors;
};

colormapwidget.prototype.calColors = function () {
  this.buff_name = this.name;
  this.buff_gravity = this.gravity;
  this.buff_gravity_value = this.gravity_value;
  this.buff_count = this.count;

  this.buff_colors = this._calColorsByCount(this.count);
  this.buff_mapCountcolors = this._calColorsByCount(this.mapCount);

  return this.buff_colors;
};

colormapwidget.prototype._calColorsByCount = function (count) {
  //console.log("_calColorsByCount " + count)
  var colors = this.getGradientColors(this.name);
  var arr = [];
  var stepSpan = colors.length - 1;
  if (!this.gravity) {
    var step = Math.ceil(count / stepSpan);
    for (var i = 0; i < stepSpan; i++) {
      var carr = this.gradientColor(colors[i], colors[i + 1], step);
      arr = arr.concat(carr);
    }
  } else {
    var pStart = this.gravity_value - 0.2;
    pStart = pStart < 0 ? 0 : pStart;
    var pEnd = this.gravity_value + 0.2;
    pEnd = pEnd > 1 ? 1 : pEnd;
    pStart = count * pStart;
    pEnd = count * pEnd;

    for (var i = 0; i < pStart; i++) {
      arr.push(this.colorRgb(colors[0]));
    }

    var step = Math.ceil((pEnd - pStart + 1) / stepSpan);
    for (var i = 0; i < stepSpan; i++) {
      var carr = this.gradientColor(colors[i], colors[i + 1], step);
      arr = arr.concat(carr);
    }

    for (var i = pEnd; i < count; i++) {
      arr.push(this.colorRgb(colors[colors.length - 1]));
    }
  }
  return arr;
};

function colormapwidget(option) {
  this.name = option && option.name ? option.name : 'default';
  this.gravity = option && option.gravity ? option.gravity : false;
  this.gravity_value = option && option.gravity_value ? option.gravity_value : 0.5;
  this.count = option && option.count ? option.count : 200;
  this.mapCount = option && option.mapCount ? option.mapCount : 200;

  this.getColors();
}