Scissors Tool в Sketch оказывается, это невероятно полезный и простой инструмент.

Вы, наверное, заметили инструмент «Ножницы» (Scissors) в панели инструментов Sketch и подумали «что это за ерунда?» Вы, наверняка, покрутили этот инструмент в руках, и еще больше озадачились.

Когда я в первый раз решил поэкспериментировать с инструментом Ножницы, я заметил, что с его помощью можно убрать границу с одной стороны фигуры. И я подумал: «можно использовать этот инструмент, если мне нужен прямоугольник только с тремя сторонами» — на самом деле, не самая нестандартная задача. Я также заметил, что Ножницы могут преобразовать любой изогнутый сегмент фигуры в прямую линию. Но как только я пробовал применить Ножницы к более, чем одному сегменту фигуры, я получил неожиданные результаты. «В чем дело, Sketch! Ты такой глючный и непредсказуемый!» Не совсем…

Оказалось, в моем понимании работы векторных фигур был небольшой пробел. Никто никогда не объяснял мне:

1-Q5kWYWzfR7A0gGJI6knfFQ@2x

Когда вы думаете о фигуре, вам, скорее всего, приходит на ум окружность, прямоугольник или какой-то изогнутый объект, который можно заполнить цветом. Но компьютеры немного по-другому воспринимают векторные фигуры; они расценивают фигуру как набор контуров. У контура есть начало и конец, а также направление, по которому двигается «компьютерный карандаш», чтобы его нарисовать.

1-wYMYrR-w3VDY6dzm2KiRhA@2x

Давайте возьмем, к примеру, прямоугольник. Линия должна начаться в верхнем левом углу, спуститься вниз к нижнему левому углу, затем к нижнему правому углу, подняться к верхнему правому углу и, наконец, закончить свой путь в той же точке, в которой он начался. Важно отметить, что линия заканчивается в той же точке, в которой начинается. Это называется «замкнутая» линия, которую мы привыкли называть «фигурой».

1-agUq3UfbZs5MSwJ0G2b_7g@2x

А что, если контур заканчивается в каком-то другом месте? Возможно, что прямоугольник начинается в верхнем левом углу и заканчивается в верхнем правом. Тогда получается «незамкнутый» контур, который языком обывателя зовется «линией».

1-qujAjBn6YHiIFLeoAV7byA@2x

Компьютеры воспринимают фигуры и линии одинаково это просто контуры. Некоторые из них незамкнутые, некоторые замкнутые.

1-7VLxqsSr-C9xDuWKYvKA1A@2x

В Sketch, где вы используете фигуру (Shape), линию (Line), или вектор (Vector), по сути это все контуры. Вы уже, вероятно, догадались, что делает инструмент Ножницы — он просто размыкает контур между двумя точками вектора. Если у вас замкнутый контур (фигура), ножницы превратят его в незамкнутый (в линию).

1-ykG_0Y5d3bamnQaBnf2T5w@2x

Пользоваться ножницами очень просто:

  1. Выберите инструмент из панели меню (Layers > Paths > Scissors) или из выпадающего списка «Tools» (Инструменты) в панели инструментов.
  2. Наведите курсор на любой сегмент вашего контура. Кликните мышкой, чтобы удалить его.1-88y78ZmxJGfRLlk2VmDGWQ@2x

Если вместо размыкания вы хотите сомкнуть контур, войдите в режим редактирования (Edit). Для этого нужно дважды кликнуть на контуре и выбрать пункт «Edit» в панели инструментов, и нажать кнопку «Close Path» (замкнуть контур) в правом верхнем углу инспектора. Этой же кнопкой можно воспользоваться, чтобы снова разомкнуть контур, но ножницы предлагают вам более гибкий подход.

1-JpyfpYi2DAThiZXUc-3M6A@2x

Принцип открытия контура довольно прост, хотя результат не всегда будет таким, как вы ожидаете. Вот несколько важных моментов:

Что вы получаете в случае с открытым контуром

  • Заливки (они же фоны): К контуру можно применить заливку, сплошную или градиентную. В случае заливки открытого контура начальная и конечная точки контура как будто бы будут соединены прямой линией. Заливка применится так, как будто бы это замкнутый контур (А). Если фрагменты контура пересекают прямую линию, соединяющую начальную и конечную точки контура, результат получится слегка причудливым (B).

1-yg07xaeoM7q90M0r_8fcuw@2x

  • Границы (они же штрихи): Границы будут применены только от начала контура до его конца. В отличие от заливки, границы не соединят начальную и конечную точки контура. Разомкнутый контур без заливки — это то, что большинство людей просто назовут «линиями».

1-aGUnch32fHABMUM_lPFDDA@2x

  • Концы разомкнутого контура могут иметь острые или закругленные углы. Sketch называет их «краями» (Ends). Они заслуживают отдельной статьи, я упомянул их, потому что линии / разомкнутые фигуры всегда имеют такие края. Вы можете получить к ним доступ через маленькую иконку в виде «колесика» в разделе Borders (Границы) в инспекторе.

1-laon2kXBJ5CNXxuc8tEkWQ

  • Помните, что у контура есть только одна начальная точка и одна конечная  —он не может размыкаться в более чем одном месте. Поэтому, если ваш контур уже разомкнут, и вы удаляете сегмент, близлежащий к разомкнутому участку, открытый сегмент просто увеличивается. Если вы удалите сегмент из другого участка контура (где-то посередине), контур разомкнется на два отрезка. Эти два отрезка называются полуконтуры, и они все равно будут сгруппированы в Sketch. Узнайте больше о полуконтурах.

1-CClGz8J3dnywqJ_cnVVfnw@2x

Где используется инструмент

Помните, когда я описывал мой опыт выборочного удаления границы на части контура? Вобщем, это не самый лучший пример использования ножниц. Всегда, когда вы используете заливку, контур должен быть замкнутый. Если вы хотите управлять границами отдельно, я советую продублировать фигуру и использовать один слой для границы, а другой для заливки. Если вы хотите спрятать часть границы или фигуры, лучше всего использовать маску.

Когда же использовать ножницы? Хороший ответ только один. Когда вы хотите превратить замкнутый контур в разомкнутый; превратить фигуру в линию. Хотя и тут есть свои фокусы

Я работаю над полным курсом обучения Sketch, поэтому новые уроки не за горами.