Вы находитесь на странице: 1из 20

EasyUI

Руководство по созданию
конструктора циферблатов для
Xiaomi Mi Watch
Описание инструмента
Этот инструмент поддерживает создание циферблатов, созданных с помощью
программного обеспечения для рисования, таких как Photoshop и Sketch, и не
поддерживает пользовательские формы и слои для создания циферблатов в этом
инструменте.
*Файл в формате PNG вы конечно можете нарисовать в своем любимом редакторе.

Затем возьмем цифровой циферблат «DIGITAL»


в качестве примера, чтобы продемонстрировать
процесс производства.
Шаг 1. Создайте новый проект

Вызов меню создания


проекта.

Указываем название
нового проекта и его
расположение на
диске.

После того как


программа создаст
проект временно
закрываем ее.
Шаг 2 - набор изображений для циферблата
1. Созданные изображения размещаем в папке \images - можно создать подпапки,
как в примере. Исходные файлы PSD не нужны.
2. При компиляции программа сама изменит ресурс набора.
3. Предложения по названию каждого элемента данных -
рекомендуется добавить имя элемента данных к названию каждого элемента
данных, например, количество шагов шкалы, иначе его легко перепутать с другими
элементами данных в производственном инструменте.
4. Погодные иконки
Шаг 3 - откройте созданный проект
Шаг 3 - проект
После открытия проекта все файлы будут отображаться внутри проекта.
Шаг 4 - создаем фон
Кликаем в Toolbox панель images - и выделяем область изображения и перетаскиваем фоновое изображение в часть [изображение]
панели свойств слоя. После добавления фона - изменяем координаты на 0,0 - что бы отцентрировать его
Шаг 5 - Импортируйте элемент времени
Кликаем в Toolbox панель Digital display - и
выделяем область изображения.
Добавляем цифровые картинки в поле Image set
Шаг 5 - Импортируйте элемент времени

Измените координаты, цифры и источник данных


в соответствии с данными координат - верхний
левый угол прямоугольника

Подобные элементы можно быстро скопировать и вставить с помощью Ctrl + C / Ctrl + V. После вставки вы можете изменить координаты,
источник данных и другую информацию об атрибутах.
Продолжайте импортировать остальные элементы - батарея, энергию, пульс, шаги, дату в соответствии с указанным выше методом. Обратите
внимание, что макет элемента данных может включать [режим сопряжения], панель атрибутов, установите значение в соответствии с
эффектом дизайна.
Шаг 5-Импортируйте верхние элементы - стресс, индикатор
энергии, пульса и калорий

1. Используйте слой с круглым индикатором выполнения, чтобы нарисовать предварительный


индикатор выполнения, а затем используйте курсор для точной настройки; данные на панели
свойств справа также можно использовать для настройки
Шаг 5 - импорт верхнего элемента-недели (day of week icon)

Как создать неделю: используйте слой списка изображений для создания прямоугольника, разверните список изображений на
панели свойств и перетащите изображение каждой недели на соответствующую панель свойств. Обратите внимание, что
воскресенье - первое. Другие атрибуты могут последовать примеру. )
Шаг 5 - импорт верхнего элемента-месяц (Image List)
Шаг 6. Определите название циферблата и загрузите
изображение для предварительного просмотра.
Шаг 7 - компиляция проекта

Выходной файл находится в


выходной папке по созданному
пути, имя файла.face
Приложение: Как сделать аналоговый циферблат
Шаг 1. Используйте "Аналоговые часы" на панели инструментов
слева, чтобы нарисовать
Шаг 2. Координаты X и Y по умолчанию установлены на «0», а
ширина и высота - на 454
Шаг 3. Перетащите изображение стрелок по одному (фон можно
игнорировать), центр поворота X составляет 1/2 ширины
вырезанного изображения, а центр поворота Y - это расстояние от
круга стрелки до верха изображения
Шаг 4: Если вы обнаружите, что стрелки не появляется на изображении
после заполнения всех полей, вам нужно щелкнуть, чтобы отменить, а
затем щелкнуть, чтобы повторить, справа от значка отмены (в этой версии
программы есть ошибка)
Шаг 5: стрелки созданы

Вам также может понравиться