Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Помогите с картой изображения

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Описание: Помогите с картой изображения
Поиск в теме | Версия для печати
3d_killer
Отправлено: 09 Апреля, 2014 - 14:46:24
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
Не могу придумать как сделать что бы при убирании мышки с area объект канвас становился не видимым как правильно сделать вот какая ерунда у меня (китай)
http://share-know[dot]ru/johny/
не могу придумать Огорчение
 
My status
 Top
IllusionMH
Отправлено: 09 Апреля, 2014 - 14:50:29
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, посмотрите как это реализовано в http://davidlynch[dot]org/projects/maphilight/docs/
 
 Top
3d_killer
Отправлено: 09 Апреля, 2014 - 14:54:34
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
да вот же смотрел, у меня реализация немного другая у меня канвас не формируется каждый раз при наведении, а там формируется и такой код:

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(map).trigger('alwaysOn.maphilight').find('area[coords]')
  3.                                 .bind('mouseover.maphilight', mouseover)
  4.                                 .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });
  5.  

(Добавление)
Поисправлял ошибки в скрипте щас заработали китай казахстан и монголия с наведением все правильно определяет, но как только канвас обретает видимость, срабатывает mouseout с Area и начинается мерцание как это сделать по границам вобще не пойму, если кто в курсе поделитесь плз

(Отредактировано автором: 09 Апреля, 2014 - 14:55:12)

 
My status
 Top
3d_killer
Отправлено: 09 Апреля, 2014 - 16:55:21
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
кто-нибудь поможет?
 
My status
 Top
and_07
Отправлено: 09 Апреля, 2014 - 17:38:08
Post Id


Гость


Покинул форум
Сообщений всего: 91
Дата рег-ции: Сент. 2012  


Помог: 3 раз(а)
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).on('mousemove','.area1',function(){
  3.                 $('.xxx').css('visibility','hidden')
  4.                 var id=$(this).data('id');
  5.                 $('canvas[data-id='+id+']').css('visibility','visible');
  6.                 //$('canvas[data-id='+id+']').css('visibility','hidden');      
  7. });    
  8.  


CODE (html):
скопировать код в буфер обмена
  1.  
  2. <canvas id="myCanvas2" class="xxx" ...
  3.  
 
 Top
IllusionMH
Отправлено: 09 Апреля, 2014 - 18:09:52
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, в общем на area нужно вешать только 1 событие mouseenter - показать канву.(это уберет моргание).
На канву вешать mousemove, mouseleave. По второму сразу скрывать ее, по первому проверять "прозрачность" точки канвы под курсором.
 
 Top
3d_killer
Отправлено: 09 Апреля, 2014 - 20:14:00
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
IllusionMH немного не понял вторую строку
(Добавление)
and_07 ваш код не подходит, так как канвы между собой пересекаются
(Добавление)
вот как ваш код работает
http://share-know[dot]ru/johny/
(Добавление)
IllusionMH что значит
IllusionMH пишет:
проверять "прозрачность" точки канвы под курсором.
, есть какие либо примеры?
 
My status
 Top
IllusionMH
Отправлено: 09 Апреля, 2014 - 21:19:53
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, через getImageData можно получить цвет и альфу пикселя канвы. Остается только сопоставить координаты курсора с координтой точки на канвасе.

(Отредактировано автором: 09 Апреля, 2014 - 21:21:30)

 
 Top
3d_killer
Отправлено: 09 Апреля, 2014 - 21:41:11
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
http://share-know[dot]ru/johny/
сделал только для китая код такой:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).on('mouseout','.xxx',function(e)
  3.         {
  4.                 $(this).css('visibility','hidden');
  5.         });
  6. $(document).on('mousemove','.xxx',function(e)
  7.         {
  8.                 var c=document.getElementById("myCanvas");
  9.                 var ctx=c.getContext("2d");
  10.                
  11.                 var top=$('#myCanvas').position().top;
  12.                 var left=$('#myCanvas').position().left;
  13.                 var y=e.pageY-top;
  14.                 var x=e.pageX-left;
  15.                 var data = ctx.getImageData(x, y, 1, 1);
  16.  
  17.                
  18.                 $('#info').html(x+","+y+" - "+data.data[3]);
  19.                 if(data.data[3]==0)
  20.                         {
  21.                                 $(this).css('visibility','hidden');
  22.                         }
  23.                
  24.         });
  25.  

но дело в том что элемент получаю по id
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. var c=document.getElementById("myCanvas");
  3.                 var ctx=c.getContext("2d");
  4.  

как его можно сделать универсальным для всех канвасов на странице?
 
My status
 Top
IllusionMH
Отправлено: 09 Апреля, 2014 - 21:59:08
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, создайте переменную в которой будет хранится id активного канваса. Добавьте всем area соответствующий атрибут и его записывайте в переменную по наведению.
Ну или 1 на всех сделать и просто менять позицию/изображение(тоже по data- атрибутам).

(Отредактировано автором: 09 Апреля, 2014 - 21:59:46)

 
 Top
3d_killer
Отправлено: 09 Апреля, 2014 - 22:36:02
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
сделал так:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).on('mousemove','.xxx',function(e)
  3.         {
  4.                 var id=$(this).attr('id');
  5.                 var c=document.getElementById(id);
  6.                 var ctx=c.getContext("2d");
  7.                 var top=$(this).position().top;
  8.                 var left=$(this).position().left;
  9.                 var y=e.pageY-top;
  10.                 var x=e.pageX-left;
  11.                 var data = ctx.getImageData(x, y, 1, 1);
  12.                 $('#info').html(x+","+y+" - "+data.data[3]);
  13.                 if(data.data[3]==0)
  14.                         {
  15.                                 $(this).css('visibility','hidden');
  16.                         }
  17.         });
  18.  

стал подглючивать в експлорере на IPHONE вобще не работает Недовольство, огорчение
(Добавление)
на IPHONE заработало, а IE ошибки кидает
 
My status
 Top
IllusionMH
Отправлено: 10 Апреля, 2014 - 00:31:59
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, какие ошибки?
 
 Top
3d_killer
Отправлено: 10 Апреля, 2014 - 08:17:13
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
Объект не поддерживает свойство или метод
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $(document).on('mousemove','.xxx',function(e)
  3.         {
  4.                 var id=$(this).attr('id');
  5.                 var c=document.getElementById(id);
  6.                 var ctx=c.getContext("2d");
  7.                 var top=$(this).position().top;
  8.                 var left=$(this).position().left;
  9.                 var y=e.pageY-top;
  10.                 var x=e.pageX-left;
  11.                 var data = ctx.getImageData(x, y, 1, 1);
  12.                 $('#info').html(x+","+y+" - "+data.data[3]);
  13.                 if(data.data[3]==0){$(this).css('visibility','hidden');}
  14.         });
  15.  

строка 72 символ 2 это эта:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.         });
  3.  
 
My status
 Top
IllusionMH
Отправлено: 10 Апреля, 2014 - 13:09:24
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
3d_killer, IE9 - все отлично работает, консоль пустая. WP8(IE10) - все норм подсвечивается.
IE8- -не поддерживают канву вообще, только искать замены для них.
 
 Top
3d_killer
Отправлено: 10 Апреля, 2014 - 13:40:59
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
там подключена excanvas
если глянуть на IE8 сайт в разработке www[dot]share-know[dot]ru
внизу облако тегов на канве прекрасно работает
(Добавление)
на сколько я понял IE как-то не правильно getImageData метод обрабатывает
 
My status
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB