Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.10.2013, 16:16   #1
Dexes
Пользователь
 
Регистрация: 27.12.2011
Сообщений: 86
Вопрос Поле боя из сот (шестиугольников)

Всем привет.
Нужно отрисовать поле боя из неправильных шестиугольников с помощью canvas или div'ов к примеру и определять в каждый момент времени в какой соте находится курсор.
Проблема не в отрисовке, проблема в определении на какой соте курсор.
Была идея отрисовывать на канвасе и по mousemove отлавливать где находится курсор, но окно браузера повисает, т.к. событие срабатывает даже когда курсор стоит на месте, а расчетов получалось не мало. И вызывалось это всё без остановки вообще. (Код могу скинуть по почте)
Само поле в итоге должно выглядеть примерно так http://puu.sh/4EQsd.jpg
Правильные соты отрисовывал с помощью трех дивов http://puu.sh/4EJup.png
И по событию mouseover на одном из трех дивов расчитывал на какой соте находится курсор.
Когда шестиугольник неправильный - дивы уже не подходят. Есть идеи как это лучше отрисовать, чтобы потом можно было отловить на какой соте курсор?

CSS для DIV'ов
Код:
.hexagon1, .hexagon2, .hexagon3 {
    position: absolute;
}
.hexagon1 {
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
    background: red;
}
.hexagon2 {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
    background: blue;
}
.hexagon3 {
    background: orange;
}
JS (использую jQuery) для создания DIV'ов
Код:
    function create_hexagon(top, left, w, h) {
        w = w || 300;
        h = h || 174
        
        for ( var i = 1; i < 4; i++ ) {
            var div = $('<div>', { 'class': 'hexagon' + i });
            div.css({
                'top': top,
                'left': left,
                'width': w,
                'height': h
            });
            $('body').append(div);
        }
    }

Последний раз редактировалось Dexes; 01.10.2013 в 16:33.
Dexes вне форума Ответить с цитированием
Старый 01.10.2013, 17:39   #2
Dexes
Пользователь
 
Регистрация: 27.12.2011
Сообщений: 86
По умолчанию

Решено. Сделал через канвас. Спасла оптимизация вычислений. Кому нужно решение - пришлю на почту.
Dexes вне форума Ответить с цитированием
Старый 02.10.2013, 09:57   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

http://jsfiddle.net/abHKL/
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вероятность исхода боя в браузерной игре. 13th Свободное общение 25 17.01.2012 18:46
Абстракция над Indy. Реализация сот, ptp внутри соты. IvanSCM Работа с сетью в Delphi 0 30.10.2010 17:46