#javascript #html #css #geometry
#javascript #HTML #css #геометрия
Вопрос:
Предположим, у меня есть квадрат, и я делю его на диагонали, в результате чего получается четыре одинаковых треугольника (не считая их поворота).
- Используя CSS / HTML / Javascript, каков наилучший способ превратить каждый треугольник в область, доступную для просмотра, не разделяя при этом охватывающий квадрат?
Я изучал возможность создания треугольников с использованием карт изображений ( <map> ), но мне кажется, что это работает так, как ожидалось, только в Internet Explorer.
В качестве другого возможного решения я попробовал прямоугольные подразделения, имитирующие треугольники, размещая постепенно уменьшающиеся прямоугольники к центру охватывающего квадрата со всех четырех «сторон света». Однако это не элегантное решение, и на самом деле это не то, к чему я стремлюсь, поскольку я хочу «гладкие», а не неровные треугольники.
Комментарии:
1. Я еще не успел этого сделать, но для меня это было бы хорошей причиной заглянуть в html5 canvas.
2. Методы, описанные здесь: russellheimlich.com/blog / … может представлять для вас интерес.
3. Я бы счел карту изображений хорошим решением. Это проверенный и надежный метод, который будет работать даже в самых старых браузерах, практически не вызывая проблем с доступом. Можете ли вы показать код, который вы пробовали? Скорее всего, это просто ошибка.
4. @Alohci: Интересная идея. Однако страница, на которую вы ссылаетесь, выглядит неправильно в IE9 или Chrome 10. В FF4 это выглядит так, как задумал автор (я полагаю). Кроме того, я не совсем уверен, как сделать границы «хитзонами»?
5. @RoToRa: На самом деле, image maps нормально работает в разных браузерах, если я в
<area>определениях используюhref="javascript:Function()"вместо того, чтобы полагаться исключительно на рабочий javascript для классов, назначенных<area>определениям. Однако тогда у меня возникает новая проблема, о которой я не упоминал в первоначальном вопросе: мне нужно разместить видимый div поверх / под изображением с картой изображения. Я не могу заставить порядок z-индекса работать вне IE.
Ответ №1:
Я бы сделал это так:
- Создайте div и оформите его в виде квадрата. Используйте фоновое изображение для иллюстрации треугольников
- Создайте переменную square в javascript для хранения элемента square
- Получите положение, высоту и ширину квадрата в вашем js
- Выполните некоторые математические вычисления, чтобы определить координаты вершин каждого треугольника
- Напишите функцию getQuadrant(), которая определяет, в каком треугольнике находится любая данная точка внутри квадрата
- Добавьте прослушиватель событий, чтобы нажимать события на квадрате. Прослушиватель событий должен вызвать функцию getQuadrant
- Используйте переключатель / регистр для выполнения любого кода, который вам нужно вызвать, при условии, в каком квадранте выполняется щелчок
Комментарии:
1.Итак, предполагая, что у нас есть (0,0) в верхнем левом углу квадрата, и x растет вниз, а y растет вправо, код для getQuadrant() будет выглядеть примерно так:
if(x < height/2 amp;amp; x < width-y amp;amp; x < y) then: top triangle;if(y > width/2 amp;amp; x > width-y amp;amp; x < y) then: right triangle;if(x > height/2 amp;amp; x > width-y amp;amp; x > y) then: bottom triangle;if(y < width/2 amp;amp; x < width-y amp;amp; x > y) then: left triangle;Мне нужно протестировать это, чтобы увидеть, допустил ли я какие-либо ошибки.2. Проблема решена. 🙂 Спасибо, @Adam. Мой приведенный выше псевдокод должен быть правильным. Я использовал jQuery, чтобы получить положение щелчка, что-то вроде этого:
$('#square').click(function (e) { var squareHeight = 100; var squareWidth = 100; var vertiPos = e.pageY - this.offsetTop; var horizPos = e.pageX - this.offsetLeft; getQuadrant(vertiPos, horizPos, squareHeight, squareWidth)); });3. Круто! Теперь для вашей следующей задачи выясните, как заставить каждый квадрант показывать анимационные эффекты при наведении курсора мыши!
4. Вероятно, вы могли бы сделать это с помощью CSS-спрайтов
5. Ну, это должно быть в следующей версии 🙂