Xpoint
   [напомнить пароль]

Заливка векторных картинок

Метки: [без меток]
2006-10-10 18:36:41 [обр] Илья Лебедев aka WingedFox(0/65)[досье]

Здравствуйте,

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

Я остановился на векторных картинках стран, но что делать дальше - непонятно.
Вопросы (по AS):
Как задать фон для векторной картинки (с пределах самой картинки)?
Как подсветить границы страны?

В силу обстоятельств, я ограничен AS1.0 и FP6. На них основаны FusionCharts, на базе которых я и делаю новый чарт. Совместимости с FP8 у них нет.

С флешем я сталкиваюсь впервые, буду благодарен ссылкам на любые хорошие статьи/мануалы.

спустя 8 часов [обр] Алексей В. Иванов(276/2861)[досье]
Как задать фон для векторной картинки (с пределах самой картинки)?

Не совсем понимаю, что Вы имеете в виду, но, видимо, Вам нужно изменение цвета клипа. см. методы setColor и setTransform класса Color.

Как подсветить границы страны?

В FP<8 никак, но если векотрная граница в отдельном клипе, то см. ответ 1.

В Вашей ситуации было бы удобно создать карту регионов из MovieClip'ов (один регион — один клип). Фон белым, а бордюр чёрным. У такого клипа Вы можете динамически менять цвет борюра и цвет фона по отдельности, с помощью setTransform.

спустя 8 часов [обр] Илья Лебедев aka WingedFox(0/65)[досье]

Алексей В. Иванов[досье]
RTFM я уже делал - не помогло =(
setColor устанавливает цвет для всего MovieClip, стирая и границу и заливку.
setTransform - меняет все цвета, это тоже не нужно. Векторная картинка содержит достаточно много разноцветных объектов (дороги, города, реки/озёра), для которых менять цвета нельзя.

Ролик имеет как раз такую структуру, как Вы предложили.

Читая ман я дошел до setMask.
Вроде бы можно нарисовать квадрат в MovieClip, потом наложить на него маску в виде области.
Так получить фон.... Но, получается плохо.
Вернее, никак не получается, пока что.

спустя 32 минуты [обр] Алексей В. Иванов(276/2861)[досье]
Реки, города и т.п. пусть будут слоем выше поверхности, а всё остальное, как я уже описал — через setTransform. Если пораскинуть мозгами, то эта функция изменит белый и чёрный цвет на любые, причем по-отдельности.
спустя 1 час 16 минут [обр] Илья Лебедев aka WingedFox(0/65)[досье]

К сожалению, этот вариант не очень подходит из-за большой трудоёмкости в реализации.
Карт планируется более 100 штук, что создаёт черезвычайно большой объём работы для дизайнеров.

Как вычислить правильные параметры для setTransform я плохо представляю, т.к. цвета не фиксированы.
В ролик приходит цвет 0 (белый) и 100% (оранжевый). Далее, для каждой области вычисляется цвет заливки (что делается достаточно просто). А вот что дальше делать - это большой вопрос, т.к. влияние параметров setTransform на цвета толком не описано.

спустя 1 час 4 минуты [обр] Илья Лебедев aka WingedFox(0/65)[досье]

Победил я эту чуду-юду, осталось прикрутить к реальным картам: http://debugger.ru/temp/cb.jpg
Не сказать, что красиво... но работает.

var level = 1;
for (var z in mapchart_mc) {
    if (z=='mask' || typeof(mapchart_mc[z]) != 'movieclip') continue;
    var tmp = mapchart_mc.createEmptyMovieClip(z+"_bg",level);
    tmp.beginFill(0xff0000,50)
    tmp.lineStyle(0, 0xFFCC00);
    tmp.lineTo(0, mapchart_mc[z]._height);
    tmp.lineTo(mapchart_mc[z]._width, mapchart_mc[z]._height);
    tmp.lineTo(mapchart_mc[z]._width, 0);
    tmp.endFill();
    tmp._xscale = 1000; // без масштабирования нижняя фигура получается без фона
    tmp._yscale = 1000;
    var mask = duplicateMovieClip(mapchart_mc[z],'MC_C_MASK_'+z,level+1000);
    tmp.setMask(mapchart_mc[z]);
    level++;
    delete tmp;
    delete mask;
}

Буду благодарен за комментарии.

Остались вопросы:

  1. можно ли сделать более аккуратно?
  2. почему без масштабирования нижняя фигура остаётся без фона?

Спасибо за внимание 8*)

спустя 1 час 29 минут [обр] Алексей В. Иванов(276/2861)[досье]
Это ж страшный ужас. Во-первых, создание маски не имеет никаких преимуществ перед методом setColor, а во-вторых, делать масштабирование — ошибка. Просто, Вы создаете прямоугольник в координатах 0,0, а не z._x,z._y.
спустя 20 минут [обр] Илья Лебедев aka WingedFox(0/65)[досье]

Ужас, но работает именно так, как требуется.
Преимущество перед setRGB и setTransform явное - не требуется нагружать дизайнеров дополнительной работой.

С координатами разобрался, спасибо =)

спустя 28 минут [обр] Алексей В. Иванов(276/2861)[досье]
сообщение промодерировано

Какой работой? Не понимаю о чём Вы.
Я сделал пример.
Скачать fla (70Kb)

То, что Вы пишите. Можно было бы заменить кодом:

var c = new Color(z);
c.setRGB(0xFF0000);

Это было бы на порядок быстрее и занимало бы, конечно, меньше памяти.

спустя 20 минут [обр] Илья Лебедев aka WingedFox(0/65)[досье]

Алексей В. Иванов[досье]
Спасибо за пример, стало более понятно, как работает setTransform.

Но, добавьте на картинку синее "озеро" и бордовую "дорогу" и посмотрите, что с ними будет происходить.
Выносить же их в отдельные слои - слишком дорогое удовольствие.

спустя 31 минуту [обр] Алексей В. Иванов(276/2861)[досье]
Выносить же их в отдельные слои - слишком дорогое удовольствие.
Ерунда. Во-первых, этот коментарий к задаче мало относится. Вам так и так придётся это делать и Ваш метод (с созданием бесмыссленных масок) эту проблему никак не решает, а во-вторых, Вы же будете фигуры дёргать с готовой карты, соответственно, проще будет выделить только регион, не выделяя рек. Более того, выделить реки на всей карте и перенести на другой слой во Flash не составит труда. Это вопрос нескольких кликов.
спустя 1 час 29 минут [обр] Илья Лебедев aka WingedFox(0/65)[досье]

Алексей В. Иванов[досье]
Оцените, пожалуйста, затраты на

  1. перевод карты в вектор
  2. вынос содержимого регионов в отдельный слой
  3. нарезку страны на отдельные области, по границам административных территорий.

http://www.lib.utexas.edu/maps/europe/germany.jpg

спустя 26 минут [обр] Алексей В. Иванов(276/2861)[досье]
сообщение промодерировано
  1. перевод карты в вектор
Так никто не делает. У Вас в результате перевода в вектор получится либо карта другой страны, либо весить она будет больше, чем растровое изображение и будет очень сильно тормозить при отрисовке. Чтобы хорошо развекторить изображение нужно уйма времени в любом случае.
Возьмите готовый вектор.
спустя 16 минут [обр] Илья Лебедев aka WingedFox(0/65)[досье]
Это требование заказчика - использовать эти карты.
Но это уже - оффтоп.
спустя 30 минут [обр] Алексей В. Иванов(276/2861)[досье]
Тогда, если не стоит задача сделать дерьмо, Вы просто обязаны региона обвести руками. Трейсить такую карту не получится вовсе. Никак.
спустя 5 минут [обр] Илья Лебедев aka WingedFox(0/65)[досье]
Дизайнеры уже сидят и кипят... Потому я и ищу пути максимального облегчения их труда.
А поскольку флешки не будут публичными, размер не сильно страшен.
Powered by POEM™ Engine Copyright © 2002-2005