d3js и Canvas: установка альфа-канала ниже 0,01

Это может быть глупый вопрос или глупая методология, я открыт для критики и тех, и других!

У меня есть много линий, которые я рисую с помощью d3js и Canvas, и я хочу действительно выделить те области, где есть очень плотные линии. В настоящее время я рисую линии, используя следующий стиль штриха:

ctx.strokeStyle = "rgba(" + myFill.r + "," + myFill.g + "," + myFill.b + ",0.01)";

Но моя проблема в том, что эта непрозрачность просто недостаточно низкая, мне нужно пойти ниже, так как немного менее плотные области слишком похожи на очень плотные области.

Я пытался немного мыслить нестандартно, но я изо всех сил пытаюсь думать о том, что я могу сделать. Если я установлю альфа штриха ниже 0,01, я ничего не получу.

Есть ли что-то, что я упускаю, или есть какие-то альтернативные идеи, которые вы можете придумать?

Что у меня есть в голове, пока варианты, хотя я еще не уверен в исполнении (в основном, не уверен, что это возможно!!!!):

  1. После завершения обработки холста, перебирая пиксели и устанавливая альфа-значение пикселя в другом масштабе или изменяя цвет пикселя в зависимости от входного цвета?

  2. Какая-то техника, использующая смешивание одной линии со всеми остальными линиями?

  3. Метод изменения цвета частей линий в зависимости от плотности после рисования изображения?

Извините, если это глупо, у меня есть кое-что, что выглядит довольно хорошо, но я хочу, чтобы это выглядело еще лучше, действительно показав контраст между очень плотным и плотным, например. Мой стиль хода вообще хорош, может быть, его можно как-то улучшить или изменить? Я знаю, что холсту трудно рисовать вещи с очень низким альфа-каналом, но есть ли способ побудить его попробовать!!!

Любые идеи и комментарии очень приветствуются, спасибо за ваше время!


javascript canvas html d3.js alpha
person Deef    schedule 09.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Насколько мне известно, при рендеринге чего-либо на холсте ваш цвет в конечном итоге представляется пикселем с четырехбайтовыми значениями (от 0 до 255). Например, красный цвет:

[255, 0, 0, 255]

Когда вы определяете цвет rgba(), вы определяете прозрачность между 0 и 1. (не спрашивайте меня почему, все знания, которые у меня есть по этой теме, получены исключительно из игры с холстом...) Я предполагаю, что минимальная разница в альфа-канале, которая будет видна на холсте, будет: 1 / 255 = 0.0039.

В принципе:

rgba(0, 0, 0, 0.0039) -> [0, 0, 0, 0]
rgba(0, 0, 0, 0,0040) -> [0, 0, 0, 1]

Это означает, что любая разница альфа-канала меньше 1/255 не будет отображаться по-разному, и любая заливка с альфа-каналом меньше 1/255 не будет отображаться...

Хотя, возможно, придется проверить это, чтобы быть абсолютно уверенным!

Редактировать: тест!

var createCanvas = function(alpha) {
  var cvs = document.createElement("canvas");
  cvs.width = cvs.height = 100;
  var ctx = cvs.getContext("2d");

  ctx.fillStyle = "rgba(0,0,0," + alpha + ")";

  for (var i = 0; i < 255; i += 1) {
    ctx.fillRect(0, 0, cvs.width, cvs.height)
  }

  document.body.appendChild(cvs);
}

createCanvas(0.0039); // should be transparent and show white
createCanvas(0.0040); // should not be completely white
canvas { border: 1px solid red; }

person user3297291    schedule 09.03.2017
comment
Спасибо, это имеет смысл. Так что, возможно, мне нужно подумать немного умнее, чтобы найти решение, которое соответствует тому, что я хочу, вместо того, чтобы надеяться, что я смогу снизить альфу. Что я мог бы сделать, так это постобработать изображение, чтобы взять значения RGB, и, если они соответствуют некоторым критериям, сделать их ярче, слегка изменить цвет или что-то в этом роде. Просто нужно поиграть с данными изображения, чтобы отсортировать их. Я оставлю это открытым на случай, если кто-то еще предложит творческую идею, спасибо!!! - person Deef; 09.03.2017
comment
Я понимаю, что мой ответ на самом деле не предлагал решения; это больше о том, почему это происходит. Мне тоже интересно, что другие люди придумали! Я предполагаю, что лучшим вариантом для вас было бы также начать изменять значения r, g и b... - person user3297291; 09.03.2017