Question

我有一个从-10到+10的数字比例，我想转换为颜色标度（-10 =红色，0 =紫色，10 =蓝色）。我想我应该使用rgb并使用x，y坐标和公式'y = mx + c'调整红色和蓝色的亮度。我无法理解如何编写函数，所以任何帮助都会受到赞赏。

也欢迎其他建议！

Answer 1

下面：

//from problem
let rangeMin = -10;
let rangeMax = 10;

//width of the range
let width = rangeMax - rangeMin;

//other
let canvas = document.getElementById("cv");
let ctx = canvas.getContext("2d");
let step = rangeMin;
let msStep = 250;
let intervalId;

function scale(x) {
  if (typeof x !== "number" || x > rangeMax || x < rangeMin)
    throw "out of allowed range";
  //The interesting part of the code
  return [Math.round(0xff * (1 - ((x - rangeMin) / width))), 0, Math.round(0xff * ((x - rangeMin) / width))];
}

function draw() {
  let rgb = scale(step);
  ctx.fillStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  step++;
  if (step > rangeMax) clearInterval(intervalId);
}

intervalId = setInterval(draw, msStep);

<html>
  <body>
    <canvas id="cv" width="400" height="100" style="border:1px solid #000000;">no canvas support</canvas>
  </body>
</html>

您需要将-10 to 10的范围翻译为0 to 255，反之，255 to 0，因为additive colors，红色+蓝色=紫色，这意味着它可以从红色，增加蓝色，同时减少红色。

首先将开始移至零（这不会影响范围的宽度，因此不会影响结果），(x - rangeMin)。然后计算范围中的百分比((x - rangeMin) / width)，请注意，倒数只是一个减去百分比1 - ((x - rangeMin) / width)。最后将其与目标范围（已经从零开始，否则需要再次进行移位）相乘，分别为0xff * ((x - rangeMin) / width)和0xff * (1 - ((x - rangeMin) / width))。

Answer 2

我有一个从-10到+10的数字比例，我想转换为a 色标（-10 =红色，0 =紫色，10 =蓝色）。

您可以创建一个对象来存储从-10到10的属性;使用css transition生成red到blue之间的颜色，设置为对象的值;利用<input type="range">将step设置为1，将input事件集元素background-color用于存储在与<input type="range"> .value对应的对象上的颜色

window.onload = function() {
  var range = document.querySelector("input[type=range]");
  var color = document.querySelector("div");
  var output = document.querySelector("output");
  range.setAttribute("disabled", "disabled");
  var colors = {};
  var i = -10;
  color.style.color = "blue";
  colors[i] = getComputedStyle(color).getPropertyValue("color");
  var interval = setInterval(function() {
    colors[++i] = getComputedStyle(color).getPropertyValue("color");
    output.innerHTML = "loading " + Object.keys(colors).length + " colors..."
  }, 100);
  setTimeout(function() {
    clearInterval(interval);
    range.removeAttribute("disabled");
    range.value = output.innerHTML = colors[0];
    color.style.backgroundColor = colors[0];
    color.style.display = "block";
    color.style.transition = "none";
    range.focus();
    console.log(JSON.stringify(colors, null, 2));
    alert(Object.keys(colors).length 
          + " colors loaded,\n select color with range input");
    range.oninput = function(e) {
      color.style.backgroundColor = colors[this.value];
      output.innerHTML = colors[this.value];          
    }
  }, 2005);
}

div {
  height: 200px;
  outline: thin solid #000;
  color: red;
}

div, input[type="range"], output {
  font-size: 32px;
  position: relative;
  text-align: center;
  width: 200px;
  left:calc(50vw - 100px);
}

<input type="range" min="-10" max="10" step="1" value="0" />
<div style="transition: color 2s linear;"></div>
<br><output>loading colors...</output>

如何使用javascript将数字刻度转换为颜色亮度？

2 个答案: