Настройки›Геометрия
Геометрия
Круги, эллипсы, плавные кривые и SVG-контуры используют существующий оптический движок.
Попробовать контур
Доступные формы
| Значение | Геометрия |
|---|---|
rounded-rect | По умолчанию; радиус из CSS. |
circle | Круг, вписанный в меньшую сторону. |
ellipse | Эллипс по ширине и высоте элемента. |
superellipse | Плавная кривая; curvature от 2 до 8, по умолчанию 4. |
path | SVG-контур, вписанный из view box. |
<edinstvo-glass shape="superellipse" curvature="5"></edinstvo-glass>
<edinstvo-glass shape="path" path="M50 0L100 100H0Z"
view-box="0 0 100 100" fill-rule="evenodd"></edinstvo-glass>JavaScript API
const surface = attachGlass(element, {
geometry: { shape: "path", path: "M50 0L100 100H0Z", viewBox: [0, 0, 100, 100] },
material: { depth: 12, refraction: 0.4 },
});
surface.set({ geometry: { shape: "ellipse" } });
glassElement.geometry = { shape: "superellipse", curvature: 6 };Контуры и нормали определяют преломление, дисперсию, свет, обводку и отражения. Работают существующие слияние и слои. У слитой группы один материал, а формы отдельных элементов могут отличаться.
SVG и ограничения
Принимаются только данные пути: без XML-разметки, скриптов и внешних ресурсов. Пределы: 64 КиБ, 4096 команд, конечные координаты в пределах ±1 000 000. Для контура кэшируется поле расстояний 256×256. Обычное взаимодействие его не пересчитывает.
Мелкие детали, вогнутые контуры и сильное масштабирование могут давать артефакты. HTML-разметка и попадание мыши остаются прямоугольными; содержимое не обрезается автоматически. У произвольного контура нет автоматической тени. CSS fallback сохраняет обычный скруглённый прямоугольник.