Как найти центр элемента при помощи JavaScript

В последнем проекте я работал над картой (изображением), которое было поделено на области. Задача сводилась к тому, что я должен был найти центр каждой из этих областей.

Готового решения я не нашёл, поэтому пришлось писать своё. Это оказалось не так уж сложно.

Функция принимает два параметра:

Фигура – тип фигуры (круг, квадрат и т.д.)

Координаты – список разделённый запятыми

Все данные передаются в виде текста.

Сам метод:

function getAreaCenter(shape, coords) {
    var coordsArray = coords.split(','),
        center = [];
    if (shape == 'circle') {
        // для окружности одни вычисления
        center = [coordsArray[0], coordsArray[1]];
    } else {
        // для квадрата другие
        var coord,
            minX = maxX = parseInt(coordsArray[0], 10),
            minY = maxY = parseInt(coordsArray[1], 10);
        for (var i = 0, l = coordsArray.length; i < l; i++) {
            coord = parseInt(coordsArray[i], 10);
            if (i%2 == 0) { 
                if (coord < minX) {
                    minX = coord;
                } else if (coord > maxX) {
                    maxX = coord;
                }
            } else { 
                if (coord < minY) {
                    minY = coord;
                } else if (coord > maxY) {
                    maxY = coord;
                }
            }
        }
        center = [parseInt((minX + maxX) / 2, 10), parseInt((minY + maxY) / 2, 10)];
    }
    return(center);
}

Функция возвращает массив из двух значений – точка X и Y. Пример вызова метода:

var area = document.getElementById('area-1');
var center = getAreaCenter(area.getAttribute('shape'), area.getAttribute('coords'));
alert('X-center: ' + center[0] + ', Y-center: ' + center[1]);

В моём случае, я прошёл по элементу area и собрал нужные мне координаты.

Надеюсь, информация была вам полезна.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/wjRoY8WPdyE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Как найти центр элемента при помощи JavaScript | | 2012-06-19 12:07:22 | | Статьи Web-мастеру | | В последнем проекте я работал над картой (изображением), которое было поделено на области. Задача сводилась к тому, что я должен был найти центр каждой из этих областей.Готового решения я не нашёл, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: