Векторная графика Adobe Animate CC Canvas (CreateJS) становится размытой при увеличении - PullRequest
Новая
       45

Векторная графика Adobe Animate CC Canvas (CreateJS) становится размытой при увеличении

0 голосов
/ 16 января 2019

Итак, я новичок в этом Flash-приложении следующего поколения, которое они называют «Adobe Animate CC», и я пытаюсь создать сцену интерактивной карты ... очень простой. Если вы нажмете на США, он должен увеличить. Нажмите еще раз, чтобы уменьшить.

Проблема, с которой я столкнулся, заключается в том, что, хотя моя карта была импортирована из файла SVG - и из того, что я могу сказать, находясь в рабочей области «Adobe Animate CC», она сохраняет свои векторные данные - когда я применяю масштаб При использовании CreateJS края графики становятся очень пикселированными.

Вот код, который я использую: 

var _this = this;
_this.stop();

_this.america.addEventListener("click", zoomMap);

 function zoomMap(event) { 

     createjs.Tween.get(exportRoot.world1).to({scaleX: 10, scaleY: 10, x: 4000, y: 1000}, 1000);

}

А вот несколько изображений с точечным результатом:

pixels

still

Еще большее разочарование вызывает тот факт, что этот сине-зеленый круг является внутренним объектом круга внутри символа. Не svg. Я ожидал бы, что по крайней мере это останется четким при преобразовании.

Это неизбежно? Кэширует ли приложение растровые версии моих векторных файлов при экспорте? Могу ли я остановить это? Могу ли я принудительно выполнить повторный рендеринг векторного файла во время и после анимации? Есть ли способ обойти это? Это приложение действительно поддерживает векторную графику?

1 Ответ

0 голосов
/ 16 января 2019

Animate может экспортировать в виде изображений, но это не должно происходить, если вы не сообщите об этом. Как выглядит ваша библиотека JavaScript? Экспортируются ли какие-либо изображения? Возможно, поищите в источнике .cache, чтобы узнать, не делает ли Adobe что-нибудь смешное под капотом.

Если карта является источником SVG: К сожалению, только единственная поддержка SVG в EaselJS (которая лежит в основе экспорта Animate) предназначена для svg в качестве «источника растрового изображения». Это означает, что оно обрабатывается как изображение определенного размера, и масштабирование его до «100%» будет интерполировать детали.

Может быть возможно загрузить его в виде большего растрового изображения и уменьшить его для запуска, но это будет:

  1. сделать его намного больше в памяти
  2. все еще позволяет вам масштабироваться

Другой вариант - импортировать ресурс SVG в Adobe Animate, который должен преобразовать его в векторную графику. Если в EaselJS это вектор, вы можете масштабировать его столько, сколько хотите, потому что он использует векторные API Canvas для рисования вместо источника изображения.

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

Надеюсь, это поможет!

...