HTML5 Canvas - пересечение линий с альфа-каналом - PullRequest
Новая
       36

HTML5 Canvas - пересечение линий с альфа-каналом

1 голос
/ 27 сентября 2011

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

Демонстрация в реальном времени: jsfiddle.net / dom1n1k / xb2AY /

Я не буду спрашивать, как это исправить :) Вопрос идеологический: как вы относитесь к такому поведению?

  1. Это логично, и так должно быть;
  2. Это не логично, но если это произошло - мы предполагаем, что это свойство;
  3. Canvas работает таким образом по технологическим причинам - реализация проще.
  4. Это очевидная ошибка, и авторам браузеров следует ее исправить.

PS Извините за мойплохой английский.

1 Ответ

1 голос
/ 27 сентября 2011

Отличный вопрос! Специалист (и я) полагаю, что ответ:

  1. Это логично и должно быть;

Давайте рассмотрим причины этого.

Вы не рисуете отдельные линии, когда рисуете красный путь. Вы рисуете весь путь, и весь путь рисуется одновременно и гладится, и цвет пути не может «перекрывать» себя. Это намеренно определено спецификацией. Это читает :

Поскольку все подпути обводятся как один, перекрывающиеся части путей в одной операции обводки обрабатываются так, как если бы их объединение было тем, что было нарисовано.

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

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

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

Так что аргументация ясна, я надеюсь. Спецификация должна дать нам 3 вещи, обычно в следующем порядке: наиболее распространенный ожидаемый результат (углы выглядят так, как они делают), согласованность (если мы накладываем на пересечения линии, мы также делаем это на углах, поэтому мы не должны ' и легкость понимания.

Хорошая спецификация всегда соответствует. Если что-то непротиворечиво, оно становится более обучаемым, что облегчает понимание, если вы знаете, почему что-то делается таким образом.

...