Qatar Airways : paperjs

15/08/2013

Нюансов много, но в этом письме я бы хотел остановиться на подготовительных моментах. В проекте, над которым я в настоящий момент работаю, потребовалось создание картинки, которая является результатом выбора пользователем нескольких опций. Готовая картинка выглядит следующим образом, для ее создания я использовал Paper.js – библиотеку для работы с canvas графикой:

Готовая картинка Qatar Airways
  1. В таких проектах удобно разрабатывать canvas функциональность отдельно от основного проекта, для которого эта часть предназначена. Это позволит не дожидаться готовности серверной части, а на какой-то стадии готовности просто встроить ваш компонент. У меня это был просто html проект, можно было его даже в репозиторий добавить. С какого-то момента все исправления я стал вносить уже в общий проект.
  2. Требуйте четких инструкций и разъяснений по дизайну. В моем случае после долгой переписки появился вот такой конкретный styleguide для моего компонента, который во многом облегчил реализацию:
Уточненная картинка Qatar Airways
  1. Нужно сразу согласовать с дизайнерами что будет на выходе, т.е. точные размеры всех готовых картинок. Я, к примеру, до последнего не знал что облака на заднем плане будут включаться в готовую картинку или что для facebook шаринга нужны картинки больше чем 810px. Вообщем, все в чем вы сомневаетесь, нужно уточнять и переуточнять даже если уже уточнили в начале проекта.
  2. Ассеты – для правильного отображения шрифтов и картинок, используемых в canvas, все они должны быть загружены к моменту инициализации canvas.
  1. Шрифты – если сайт будет портирован на несколько языков, заранее проверьте что шрифт содержит специфические языковые глифы (например немецкие умляуты), иначе получится так:
Картинка на немецком Qatar Airways

    Для отслеживания момента загрузки шрифтов я использовал Web Font Loader.Здесь все достаточно просто:

    • Берем и создаем fonts.css куда добавляем все шрифты которые нужно загрузить.
    • Подключаем font loader как-то так:
    • Затем вызываем собственно загрузчик:
  1. Картинки – тоже должны быть загружены, иначе на канве они не появятся. Делаем это достаточно просто, создаем скрытый div и кладем туда все картинки: Потом с помощью imagesLoaded проверяем все ли картинки загрузились и если да, то стартуем imagesLoaded:

В следующем письме постараюсь рассказать непосредственно про сам проект и в большей степени про paper.js


Следующая:  less // source maps

Предыдущая:  Баг с шириной в процентах и как его фиксить

Другие статьи


Тел. 8 (800) 7075374
8 (351) 2251874