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

Итак, я новичок в этом 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);

}

А вот несколько изображений пиксельного результата:

пиксели

все еще

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

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


vector-graphics createjs adobe-animate
person WillD    schedule 16.01.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

person Lanny    schedule 16.01.2019
comment
Я вижу этот вывод при предварительном просмотре: WARNINGS: ** 593 Bitmaps packed successfully into 7 spritesheet(s). - person WillD; 16.01.2019
comment
нормальное обновление: я смог избавиться от пикселизации, сняв флажок «Экспортировать документ как текстуру», однако это создает гораздо более прерывистый / резкий эффект во время анимации масштабирования. - person WillD; 16.01.2019
comment
Да, если на карте МНОГО деталей, это будет реальностью. Есть, вероятно, вещи, которые вы можете сделать, чтобы оптимизировать вектор, или подумайте о том, чтобы кэшировать его самостоятельно до нужного вам размера. - person Lanny; 16.01.2019