HTML5: неточное позиционирование прямоугольников

Question

Я использую холст HTML5 для создания «предварительного просмотра» изображения, которое в основном состоит из некоторых прямоугольников и простых линий. Пока все работает, но есть одна проблема, которую я никак не могу исправить. Предположите следующую ситуацию:

context.fillStyle = "rgba(0,0,0,0.75)"; 
context.fillRect(100.64646,100,50.94967,20); 
context.fillRect(100.64646+50.94967,100,100,20); 

Итак, я рисую 2 прямоугольника с некоторой непрозрачностью. Координата x-start плюс длина x первого прямоугольника равна x-начальной координате второго прямоугольника, поэтому теоретически они должны сталкиваться без какого-либо разницы между ними. К сожалению, результат отличается: (см. http://files.clemensfreitag.de/thin_spacing.jpg)

Между полями очень малый промежуток, и цвет фона отображается. Но: Эта проблема не возникает, если координаты и длины являются целыми.

Есть ли способ сделать это, используя значения float? Преобразование их в целые числа до рисования может быть приемлемым в моем приложении, но мне просто интересно, почему это не должно работать с поплавками.

Бест, Clemens

Answer 1

То, что вы видите, является результатом наложения двух непрозрачных цветов. Когда первый прямоугольник заканчивается на 151.59613, прямоугольник автоматически сглаживается, заполняя самый правый столбец rgba (0,0,0,0,4470975). Когда второй прямоугольник начинается с одной и той же координаты x, он также сглаживается, заполняя самый левый столбец (тот же самый, что и первый правый прямоугольник) с rgba (0,0,0,0.3029025). Эти два значения составляют до rgba (0,0,0,0,75), но это не так, как они смешиваются. Вместо этого второй цвет (rgba (0,0,0, .3029025)) рисуется поверх первого, в результате получается rgba (0,0,0,0,4470975+ (1-0,4470975) * 0,3029025) = rgba (0 , 0,0,0.61457305). Таким образом, между двумя прямоугольниками нет разрыва, а скорее 1px-столбец, который немного светлее оттенка серого.

Аналогичным образом, если вы использовали сплошные цвета, то сглаженная колонка второго прямоугольника будет перезаписывать первое, что приведет к еще более светлому оттенку серого в «пробеле».

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

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

Answer 2

В этой статье рассматривается производительность, но возможно, что вы испытываете тот же эффект, который они описывают - при использовании поплавков он рисует ее как «нечеткую» между пикселями.

http://seb.ly/2011/02/html5-canvas-sprite-optimisation/

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

Answer 3

Эта проблема связана с тем, как объекты нарисованы на сетке с поплавком (особенно вертикальные и горизонтальные линии и, следовательно, прямые).

Смотрите здесь для объяснения и схем: http://canop.org/blog/?p=220

В зависимости от размера ваших объектов, вам нужно использовать целые или средние целочисленные координаты и размеры для ваших форм, цель в том, чтобы заполнить полные пиксели оба измерения.

Например:

• использования среднего целое число, для тонкой линии (ширина один пиксель)
• использовать целое число координат для 2 пикселов широкого линии

(и продлить логика для прямоугольников)