Как распределить элементы на адаптивной, векторной кривой?
Есть векторная кривая, которая должна подстраиваться под размер контейнера.
На этой кривой нужно распределить несколько элементов, с которыми будет взаимодействовать указатель.
Самое простое решение offset-path, но мне он не подходит из за ограниченной поддержки.
Подскажите какие еще есть варианты реализовать эту задачу.
Дополнительно:
Здесь скорее всего нужны библиотеки вроде three.js
Здесь скорее всего нужны библиотеки вроде three.js
Скорее не нужны ) Three.js немного для другого предназначена )
Ещё можно канвас или свг
SVG!.. Действительно, если вопрос о векторных кривых. А что есть еще много вариантов для рисования кривых в веб-разработке?)))
Canvas не хранит графику в виде DOM-элементов, и поэтому не так хорошо подходит для решения описанной задачи.
Хорошего нативного и кроссбраузерного решения у нас пока нет. Но у path в SVG есть методы getTotalLength и getPointAtLength, а из них можно сообразить себе утилиту для расположения кружков вдоль кривой в удобных единицах измерения. Это не так здорово, как на CSS, но тем не менее:
function putCircleOnPath(path, circle, percent) { const length = path.getTotalLength(); const point = path.getPointAtLength(length * percent / 100); circle.setAttribute('cx', point.x); circle.setAttribute('cy', point.y); } |
function putCircleOnPath(path, circle, percent) { const length = path.getTotalLength(); const point = path.getPointAtLength(length * percent / 100); circle.setAttribute('cx', point.x); circle.setAttribute('cy', point.y); }
Получится что-то такое:
snippet
- Ivan Bogachev
Хорошего нативного и кроссбраузерного решения у нас пока нет.
В итоге пришлось абсолютно позиционировать элементы внутри контейнера : / поверх SVG с `preserveAspectRatio="none"`.
Богомерзко, но задачу решает и пуленепробиваемо..За метод `getPointAtLength()` большое спасибо! Пойду эксперементировать ).
- Big Wheel,
SVG!.. Действительно, если вопрос о векторных кривых. А что есть еще много вариантов для рисования кривых в веб-разработке?)))
. . .
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для распределения элементов на адаптивной, векторной кривой можно использовать CSS и SVG. Вот пример кода на HTML, CSS и SVG, который поможет вам реализовать данную задачу:
HTML:
```html
```
CSS:
```css
.curve-container {
position: relative;
}
.item {
position: absolute;
width: 50px;
height: 50px;
background-color: #f0f0f0;
}
#curve {
fill: none;
stroke: #000;
stroke-width: 2;
}
```
SVG позволяет создавать векторные элементы, такие как кривые. В данном примере мы создаем кривую с помощью элемента `path` и задаем ее координаты. Затем с помощью CSS задаем позиционирование элементов `.item` относительно этой кривой.
Вы можете настроить параметры кривой, меняя значения в атрибуте `d` элемента `path`. Также можно добавить больше элементов `.item` и расположить их на кривой с помощью CSS.
Надеюсь, данное решение поможет вам распределить элементы на адаптивной, векторной кривой. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.