Я нашел библиотеку 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 файл как мне нужно?
Я не очень хорош в геометрии поэтому можете объяснить как можно подробнее.
X
Y
OY
и так далее и как сделать то что я задумал. хотя бы в общих чертах