Текст, шрифты, иконки, фигуры, градиенты и эффекты.

Здесь собран исходный draw API из PipKit API без упрощения: типографика, иконки, фигуры, градиенты и эффекты.

7. Текст, шрифты и иконки

7.1. Встроенные шрифты

Текущий шрифт настраивается отдельными методами:

ui.setFont(WixMadeForDisplay);   // выбирает семейство шрифта
ui.setFontSize(18);              // задаёт текущий размер в пикселях
ui.setFontWeight(Semibold);      // вес шрифта

В библиотеке есть два встроенных семейства: WixMadeForDisplay и KronaOne.

7.2. Текстовые стили

ui.setTextStyle(H1);

Доступные стили: H1, H2, Body, Caption.

7.3. Обычный текст

ui.drawText()
    .pos(center, 32)
    .font(WixMadeForDisplay, 18)
    .weight(Semibold)
    .text("Hello")
    .color(ui.rgb(255, 255, 255))
    .align(Center);

Если текст обновляется на одном и том же месте, используйте updateText():

ui.updateText()
    .pos(center, 32)
    .text("Updated")
    .color(ui.rgb(255, 255, 255))
    .align(Center);

7.4. Бегущая строка и многоточие

ui.drawTextMarquee()
    .pos(20, 80)
    .width(140)
    .text("Very long text that does not fit")
    .speed(30)
    .align(Left);

ui.drawTextEllipsized()
    .pos(20, 110)
    .width(140)
    .text("Very long text that does not fit");

7.5. Иконки

ui.drawIcon()
    .pos(20, 20)
    .size(18)
    .icon(warning)
    .color(ui.rgb(255, 255, 255));

Анимированные иконки:

ui.drawAnimIcon()
    .pos(92, 120)
    .size(56)
    .icon(setting_anim)
    .color(ui.rgb(235, 235, 235));

Чтобы добавить свою иконку:

  • положить .svg или .json файл в tools/icons/sources/
  • пересобрать проект (генератор обновит файлы)
  • использовать иконку по имени файла: .icon(checkmark)

8. Фигуры

ui.drawRect()
    .pos(20, 40)
    .size(100, 40)
    .radius(10)
    .fill(ui.rgb(0, 120, 255))
    .border(1, ui.rgb(255, 255, 255));

Доступные фигуры:

  • drawLine().from(x, y).to(x, y)
  • drawCircle().radius(r)
  • drawEllipse().radiusX(rx).radiusY(ry)
  • drawTriangle().point0(x, y).point1(x, y).point2(x, y)
  • drawArc().start(-90).end(90)
  • drawSquircleRect().size(w, h).radius(r)

9. Градиенты

Вертикальный и Горизонтальный

ui.gradientVertical()
    .pos(20, 20)
    .size(120, 40)
    .TColor(ui.rgb(255, 0, 72))
    .BColor(ui.rgb(0, 87, 250));

4 угла и Радиальный

ui.gradientRadial()
    .pos(20, 220)
    .size(120, 60)
    .center(80, 250)
    .radius(40)
    .innerColor(ui.rgb(255, 255, 255))
    .outerColor(ui.rgb(0, 87, 250));

10. Эффекты

10.1. Blur (Размытие)

ui.drawBlur()
    .pos(0, 180)
    .size(240, 40)
    .radius(10)
    .direction(TopDown)
    .material(160, -1);

Для обновления части экрана на месте: ui.updateBlur(...)

10.2. Glow (Свечение)

ui.drawGlowCircle()
    .pos(60, 90)
    .radius(18)
    .fillColor(ui.rgb(255, 255, 255))
    .glowColor(ui.rgb(0, 120, 255))
    .glowSize(16)
    .glowStrength(220)
    .anim(Pulse);

Поддерживает анимации: None, Pulse.