EaselJS линия нечеткости

Question

Я использую EaselJS в качестве API для холста HTML5.

Я заметил, что следующий код:

line.graphics.setStrokeStyle(1).beginStroke("black").moveTo(100,100).lineTo(200,200);
stage.addChild(line);

... производит следующую строку:

Я установил толщину на 1 - но линия все еще нечеткая. Если вы увеличите снимок, вы увидите, что он на самом деле занимает 3 пикселя. Я полагаю, что когда я читаю где-то, холст рисует точку между двумя пикселями, так что оба пикселя будут окрашены. И вам нужно сместить точку рисования на половину ширины пикселя, чтобы она приходилась на весь пиксель.

Мне нужно четкое изображение для моих приложений, пожалуйста, сообщите.

Answer 1

EaselJS - это просто абстракция для API Canvas, которая рисует все линии по указанным координатам. API SnapToPixel специально предназначен для автоматического округления, но не учитывает проблему полупикселя, которую вы описываете.

Лучший практический подход состоит в том, чтобы поместить все в контейнер и поместить контейнер в положительное или отрицательное значение (0,5,0,5) - это все отрегулирует, и вы сможете работать в обычном координатном пространстве, а не смещать все свои вычисления .