Как сделать прямоугольник с текстом на границе?

Я использую приложение Sketch и хочу создать точную иллюстрацию:

Прямоугольник приложения Sketch с текстом

Создавать прямоугольники очень просто, но как сделать текст на границе, как <html>показано выше?

Ответы (2)

Вы должны использовать плагин динамической кнопки https://github.com/ddwht/sketch-dynamic-button

Сделайте тексты тегов ( <html>, <head>, и т. д.) динамическими кнопками.
Установите цвет фона на белый.
Сделайте отступы на тестовых стилях до 0:10.

введите описание изображения здесь

Скачать образец файла эскиза

Спасибо! Выглядит здорово, но можно ли сделать закрывающий тег внизу?
Конечно, просто продублируйте динамическую кнопку с нужным тегом, внесите изменения в текст (добавив /) и поместите ее внизу.

Если вы хотите, чтобы это был прямоугольник, а не открытый путь, вам нужно замаскировать область, в которой вы хотите, чтобы текст отображался.

Шаги:

  1. Нарисуйте прямоугольник
  2. Разместите текст в нужном месте
  3. Создайте маску, чтобы показать или скрыть нужные области прямоугольника, которые касаются вашего текста.

Вот видео про маски в скетче: https://www.youtube.com/watch?v=Db2SjUZhcHI

Если я создаю маску своего прямоугольника, она просто исчезает, а текст правильно маскируется, то есть видна только область, которая находится прямо на границе прямоугольника. Однако это не то, чего я хочу. Нужно ли дублировать прямоугольник, чтобы создать маску для реального прямоугольника?
Как сделать прямоугольник с текстом на границе?
СпросиСетьПолитика конфиденциальности1y, 0v