3

Добрый день,

Подскажите пожалуйста, возможно ли задать, например для блока div, фигурные границы, например по какой-то замысловатой формуле типа кривых Базье. Знаю, что в CSS есть набор простых фигур, Rectangle, triangle и т.д. Но не уверен как при этом JS видит границы такого блока. Например, есть наш фигурный div (пусть будет в форме облачка), в котором перемещается и от стенок оталкивается другой div круглой формы.

Спасибо.

1
  • вроде никак кроме задания фонового изображения и расчета на javascript находится ли внутренний див внутри нужных координат и вычисления когда надо сменить вектор движения
    – Grundy
    25 ноя 2015 в 12:46

2 ответа 2

2

UPD

Используйте svg Как для дива с облаками,так и для шара.Либо вообще flash)
По просьбам участников поясняю.
Возможности языка:
Описание путей (англ. path). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты.

Строка с данными задаётся атрибутом d тега path и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L, H, V), кривых Безье (C, S, Q, T) и дуг (A). В версиях SVG до 1.2 включительно описание путей возможно только в пикселях.

С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и SMIL анимацией это дает очень широкие возможности для разработчиков веб-графики.

Источник

4
  • 1
    Вот уж flash точно лесом.
    – Qwertiy
    25 ноя 2015 в 15:22
  • 1
    @Qwertiy, Тогда svg
    – HoPkInS
    25 ноя 2015 в 15:24
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 26 ноя 2015 в 10:04
  • @NicolasChabanovsky, Пояснил.От себя еще добавлю.Почему нельзя создать допустим облака в svg или наоборот шар. На сайте в конечном итоге все будет блоками.Тот же шар к примеру не сможет понять границы облаков.
    – HoPkInS
    26 ноя 2015 в 16:54
0

Может это подойдет CSS masking http://htmlhook.ru/css-masking.html

Ваш ответ

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

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