Нечеткость линий EaselJS

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

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

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

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

введите здесь описание изображения

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

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


person William Sham    schedule 13.07.2011    source источник
comment
Вы пытались изменить moveTo(100,100) на moveTo(100.5,100.5)?   -  person kangax    schedule 13.07.2011
comment
Да. Оно работает! Но разве в Easel нет встроенного свойства SnapToPixel... так что это облегчит мою математику? Знаете ли вы какой-нибудь фрагмент кода для JS в целом, который будет делать это повсюду, поэтому мне не нужно делать 0,5 для каждой введенной координаты?   -  person William Sham    schedule 14.07.2011
comment
Ну, у вас может быть помощник для этого. Например: moveTo(coerce(100), coerce(100)) или moveTo('100'.toCanvas(), '100'.toCanvas()) — оба варианта, конечно, уродливые (и сбивающие с толку) :) Я не знаком с EaselJS и не знаю, есть ли в нем что-нибудь, чтобы обойти эту проблему. Я знаю, что в моей библиотеке (fabric.js, kangax.github.com/fabric.js /demos/kitchensink) об этом тоже нечего заботиться...   -  person kangax    schedule 14.07.2011
comment
Раньше я думал о том, чтобы Graphics поддерживал свойство snapToPixel, но это имело бы довольно заметные последствия для производительности, не нужно для чего-либо, кроме прямых линий, и довольно легко решается путем смещения вашей формы на 0,5. Например: myShape.regX = myShape.regY = 0,5;   -  person gskinner    schedule 01.02.2015


Ответы (1)


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

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

person Lanny    schedule 21.09.2011
comment
Есть лучший способ это сделать? Будет ли добавление контейнера увеличивать границы перерисовки до ВСЕГДА всего прямоугольника контейнера, а не только прямоугольника фактически измененных объектов? В любом случае кажется, что вам нужно будет вручную применить смещение {x: 0,5, y: 0,5} к таким вещам, как перетаскивание координат событий, которые предоставляют параметры непосредственно со сцены (evt.stageX и evt.stageY). - person Ashley Coolman; 24.04.2013
comment
Просто примечание: вы можете установить для stage.regX и stage.regY значение -.5, и это будет иметь тот же эффект без использования контейнера. - person Brent; 12.09.2013
comment
Даже для прямоугольника работает: shape_rec.graphics.drawRect(x+0.5, y+0.5, widthx, widthy); - отлично! - person Avatar; 08.12.2017
comment
Хороший совет @UltimateBrent Код: stage_a.regX = -0.5; stage_a.regY = -0.5; stage_a.update(); - person Avatar; 08.12.2017