✨ 𝙋𝙪𝙩 𝙖𝙣𝙮 𝙤𝙗𝙟𝙚𝙘𝙩𝙨 𝙤𝙧 𝙩𝙚𝙭𝙩 𝙤𝙣 𝙖 𝙥𝙖𝙩𝙝! ✨
- выберите кривую
- выберите объект, группу или текст.
- нажмите «ссылка» и наблюдайте, как * происходит волшебство
* Это дрянной код, а не на самом деле магия
╭┈─────── ೄ ྀ ࿐ ˊˎ-
╰┈➤ 𝙄𝙈𝙋𝙊𝙍𝙏𝘼𝙉𝙏
Версия 1.5.0 Обновленные живые обновления и более поздние версии НЕ будут работать с предыдущими связанными путями, созданными этим плагином! Вы должны создать новую группу связанных путей!
☆ ゜ ・ 。。 ・ ゜ ゜ ゜ 。。 ・ ゜ ★
🌙 𝙄𝙨𝙨𝙪𝙚𝙨 𝙤𝙧 𝙁𝙚𝙖𝙩𝙪𝙧𝙚 𝙍𝙚𝙦𝙪𝙚𝙨𝙩𝙨 🌙
Откройте проблему на github:
https://github.com/codelastnight/to-path-figma
☆ ゜ ・ 。。 ・ ゜ ゜ ・ 。。 ・ ゜ ★
❤️ 𝙇𝙞𝙠𝙚 𝙬𝙝𝙖𝙩 𝙄 𝙙𝙤? ❤️
купите мне кофе 🙂
https://ko-fi.com/lastnight
─────────✧❁✧─────────
˚ ⊹ · * ✧ ⋆ · *. ·. · · … . · + · * ✫ * ⊹ * ˚. . · ⋆ *. *. . ·. ·. * ·. · · +. · ** ˚. . + · ⋆ *. *. . ·. ·. *
Как это работает
-
плагин генерирует массив точек (420 между каждой точкой, но вы также можете изменить это в меню «about») с помощью алгоритма Castejau, который следует по кривой, также находя угол касательной к каждой точке. длина от начала кривой до каждой точки также генерируется и сохраняется (подробнее здесь: https://javascript.info/bezier-curve)
-
вычисляется x-позиция n-го объекта + ширина объекта + интервал
-
плагин сравнивает x-позицию объекта с массивом точек. Выбираются 2 точки с ближайшей длиной
-
, затем плагин находит точку между этими двумя точками и находит точную точку для размещения объекта. используемый угол — это просто касательная к ближайшей точке.
-
объект размещается, и плагин перемещается на следующий объект.
настройка разработки
-
установить пакеты:
npm i
-
компиляция:
npm run prod
mfw кто-то уже выпустил что-то похожее на мой плагин, но я потратил на это слишком много времени, чтобы остановиться сейчас.