4

Я нашел библиотеку warp.js которая позволяет гнуть svg файлы.

Но я так и не понял как это сделать в документаций есть только два примера и общее описание функций.

https://github.com/benjamminf/warpjs

Как в

 const svg = document.getElementById('svg-element')
 const warp = new Warp(svg)

 warp.interpolate(4)
 warp.transform(([ x, y ]) => [ x, y + 4 * Math.sin(x / 16) ])

Установить свои значения а если точнее то - я просто хочу создать массив опорных точек с параметрами.

arr = [
  [x=0,y=0,r=10,p=10, n[x=10,y=10]],
  [x=10,y=10,r=10,p=10, n[x=10,y=10]]
]

где

x=положение по вертикали,
y=положение по горизонтали,
r=радиус воздействия
p=жесткость воздействия
n=направление движения по которому идет воздействие

Если установлена другая статична опорная точка то она будет удерживать часть фигуры на своем месте.

Примерно как в марионеточной деформаций (Puppet Warp)

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

Кто ни будь может мне объяснить по какому принципу код работает?

Особенно мне не понятно что находится внутри X и Y и как я должен ориентироваться что бы исказить свой svg файл как мне нужно?

Я не очень хорош в геометрии поэтому можете объяснить как можно подробнее.

3
  • 2
    @Stranger in the Q Костя, ты наверное уже посмотрел этот вопрос, но на всякий случай пишу. Вдруг захочется тебе ответить. Было бы интересно посмотреть. 15 сен 2020 в 19:21
  • math любой работает из этой инструкции в квадратных скобках можно прибавлять и отнимать то есть тем самым мы смещаете точку деформации то есть если к примеру обернуть в группу отдельно любой элемент то можно добиться следующего i.ibb.co/FWBpBFQ/warp.png 16 сен 2020 в 23:43
  • @MaximLensky Вы просто сказали что можно воздействовать на отдельные слои и то что код использует Объект Math. Но я так и не понял что означает X Y OY и так далее и как сделать то что я задумал. хотя бы в общих чертах
    – zeni1agent
    17 сен 2020 в 8:08

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.