Я хотел бы реализовать что-то вроде изображения PowerPoint ниже. Градиент между тремя значениями.

Он начинается в A (-1), средняя точка - B (0), а конец - C (1).

Я понял, что могу сэкономить некоторые усилия, вычислив «начало» как «а-в-б», а «конец» как «б-в-с». Я могу сделать 2 набора из 2 градиентов вместо 1 градиента с тремя значениями.

Но я в тупике (несмотря на то, что гуглил), как перейти от одного цвета к другому - в идеале в цветовом пространстве RGB.

Я бы хотел иметь что-то вроде этого -

const colourSpace = (value, startColor, endColor) => {...}

colorSpace(-0.25, red, yellow) // some sort of orangey color
colorSpace(1, yellow, green) // fully green
colorSpace(0.8, yellow, green) // mostly green

Это не интерфейсное приложение, поэтому нет градиентов CSS - это то, на что в основном ссылался Google.

Всем спасибо, Олли

a three point gradient

1
Ollie 13 Сен 2018 в 05:27

2 ответа

Лучший ответ

В итоге я использовал Chroma для преобразования между цветовыми пространствами.

0
Ollie 1 Ноя 2018 в 13:40

Если вас не слишком беспокоит постоянство восприятия в цветовом пространстве (для этого вам нужно будет работать в чем-то вроде режима LAB), вы можете просто воспользоваться линейной интерполяцией в пространстве RGB. Обычно вы берете расстояние (от 0 до 1), умножаете его на разные координаты и добавляете к первому. Это позволит вам находить произвольные точки (т.е. цвета) на линии между любыми двумя цветами.

Например, между красным и желтым:

let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

let rgb1 = [255, 0, 0]    // red
let rgb2 = [255, 255, 0]  // yellow

function getPoint(d, a1, a2) {
  // find a color d% between a1 and a2
  return a1.map((p, i) => Math.floor(a1[i] + d * (a2[i] - a1[i])))
}

// for demo purposes fill a canvas
for (let i = 0, j = 0; i < 1; i += .002, j++) {
  let rgb = getPoint(i, rgb1, rgb2)
  ctx.fillStyle = `rgba(${rgb.join(",")}, 1)`
  ctx.fillRect(j, 0, 1, 200);
}
<canvas id="canvas" width="500"></canvas>

Вы можете повторить это, чтобы получить несколько «остановок» в градиенте.

1
Mark Meyer 13 Сен 2018 в 05:59