Canvas: самоналожение полупрозрачных линий?

Question

[dom1n1k]

Линии на картинке ниже нарисованы полупрозрачными цветами (alpha=0.5).

При этом видно, что когда красний контур пересекает сам себя, двойного наложения полупрозрачного цвета (как было бы логично ожидать) не происходит. В то же время зеленая линия в местах пересечений накладывается на красную как и положено.

Выходит, что линии на canvas заливаются целиком, как области. Возможно, в некоторых ситуациях это даже удобно, но лично мне кажется, что это неверное поведение.


Лайв-демо: jsfiddle.net/dom1n1k/xb2AY/




Я не буду спрашивать, как это исправить :)

Вопрос будет идеологический: как лично вы оцениваете такое поведение?

1. Это логично и вообще так и должно быть;

2. Это не совсем логично, но если уж так сложилось — можно считать фичей;

3. Это явный баг, и по-хорошему бы авторы браузеров должны это поправить.

Answer 1

[tick]

я считаю это фичей.

Answer 2

[ZimM]

Такое поведение и есть правильное, как по мне. Где вы вообще видели, чтобы полупрозрачные линии рисовались вот так? Direct3D и OpenGL рисует точно так же, например.
В конце концов, способы обойти это существуют, так что лично я не считаю это проблемой.

Comments

[dom1n1k]

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

По логике, линия — все же объект линейный (который рисуется как бы последовательно), а не одномоментно заливаемая область. И при самопересечениях она должна накладываться сама на себя. Мне так кажется.

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

Какой-то очень уж большой проблемой это не является, согласен. Но… «как-то доктор не аккуратненько» (с)

[ZimM]

Ну не особо-то и грубый костыль. Чтобы банально нарисовать многоугольник в том OpenGL, в идеале — его нужно предварительно разбить на треугольники. И это только пример.
Как вариант — можно рисовать в невидимый промежуточный буфер с полной непрозрачностью, а потом выводить весь буфер уже с прозрачностью. Хотя это еще больший костыль :)

Answer 3

[Андрей]

Разделите на разные объекты

Comments

[Андрей]

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(250, 100);
ctx.lineTo(250, 250);
ctx.lineTo(100, 250);
ctx.lineTo(100, 50);
ctx.lineTo(150, 50);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(150, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200, 150);
ctx.lineTo(50, 150);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.stroke();

[dom1n1k]

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

Answer 4

[Андрей]