/ to-path-figma

✨ 𝙋𝙪𝙩 𝙖𝙣𝙮 𝙤𝙗𝙟𝙚𝙘𝙩𝙨 𝙤𝙧 𝙩𝙚𝙭𝙩 𝙤𝙣 𝙖 𝙥𝙖𝙩𝙝! ✨

  1. выберите кривую
  2. выберите объект, группу или текст.
  3. нажмите «ссылка» и наблюдайте, как * происходит волшебство

* Это дрянной код, а не на самом деле магия

╭┈─────── ೄ ྀ ࿐ ˊˎ-

╰┈➤ 𝙄𝙈𝙋𝙊𝙍𝙏𝘼𝙉𝙏

Версия 1.5.0 Обновленные живые обновления и более поздние версии НЕ будут работать с предыдущими связанными путями, созданными этим плагином! Вы должны создать новую группу связанных путей!

☆ ゜ ・ 。。 ・ ゜ ゜ ゜ 。。 ・ ゜ ★

🌙 𝙄𝙨𝙨𝙪𝙚𝙨 𝙤𝙧 𝙁𝙚𝙖𝙩𝙪𝙧𝙚 𝙍𝙚𝙦𝙪𝙚𝙨𝙩𝙨 🌙

Откройте проблему на github:

https://github.com/codelastnight/to-path-figma

☆ ゜ ・ 。。 ・ ゜ ゜ ・ 。。 ・ ゜ ★

❤️ 𝙇𝙞𝙠𝙚 𝙬𝙝𝙖𝙩 𝙄 𝙙𝙤? ❤️

купите мне кофе 🙂

https://ko-fi.com/lastnight

─────────✧❁✧─────────

˚ ⊹ · * ✧ ⋆ · *. ·. · · … . · + · * ✫ * ⊹ * ˚. . · ⋆ *. *. . ·. ·. * ·. · · +. · ** ˚. . + · ⋆ *. *. . ·. ·. *

Как это работает

  1. плагин генерирует массив точек (420 между каждой точкой, но вы также можете изменить это в меню «about») с помощью алгоритма Castejau, который следует по кривой, также находя угол касательной к каждой точке. длина от начала кривой до каждой точки также генерируется и сохраняется (подробнее здесь: https://javascript.info/bezier-curve)

  2. вычисляется x-позиция n-го объекта + ширина объекта + интервал

  3. плагин сравнивает x-позицию объекта с массивом точек. Выбираются 2 точки с ближайшей длиной

  4. , затем плагин находит точку между этими двумя точками и находит точную точку для размещения объекта. используемый угол — это просто касательная к ближайшей точке.

  5. объект размещается, и плагин перемещается на следующий объект.

настройка разработки

  1. установить пакеты: npm i

  2. компиляция: npm run prod

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

Оцените статью
Botgadget.ru
Добавить комментарий