@zeni1agent

Объясните как гнуть svg слои с помощью js кода?

Я нашел библиотеку 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) ])

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

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

Я просто хочу создать массив опорных точек с параметрами
например
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)

5f60bac05dc7f499826498.png
5f60ba9b5e3c6419678977.png
  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега JavaScript
Грубо говоря, там модифицируются кривые в соответствии с параметрами переданными в функцию. Функция определяет точки и делает сдвиг. Потом генерирует строку и подставляет ее в атрибут d.

Чтоб понять что происходит следует разобраться каким образом формируются пути в svg и что они собой представляют.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы