Использование Raphael js с картой изображений и jQuery - PullRequest
Новая
       1

Использование Raphael js с картой изображений и jQuery

2 голосов
/ 20 июля 2011

У меня есть изображение со связанной картой изображений (ниже), и я использую jQuery для определения, когда наведем курсор мыши на элементы карты изображения.Затем я хочу нарисовать «вещи» поверх карты с помощью Raphael js. 

   <map name="regionMapView" id="regionMapView">
      <area id="Carlisle" shape="circle" coords="305,505,10" alt="Carlisle" title="Carlisle" />
   </map>
   <img id="imgMap" src="MapLarge.gif" width="585" height="1135" border="0" usemap="#regionMapView" />
   <script type="text/javascript" src="./Scripts/jquery-1.6.2.min.js"></script>
   <script type="text/javascript" src="./Scripts/raphael-min.js"></script>
   <script type="text/javascript">
      $(document).ready(function () {
         var paper = Raphael(0,0, 585, 1135);
         var t = paper.text(200, 200, "Text at 200, 200");
         $("#Carlisle").hover(function () { alert('in'); }, function () { alert('out'); });
      });
   </script>

Выше показан текст, как и должно быть, но jQuery не будет запускать события, потому что холст Raphaelнаходится поверх карты изображений (что я и хочу визуально), но предотвращает запуск событий jQuery.Если я изменю Рафаэля на использование идентификатора изображения следующим образом: 

     var paper = Raphael(document.getElementById("imgMap"), 585, 1135);

Тогда произойдет обратное, я получу события из jQuery, но текст не будет виден.

Изображениесама по себе карта сплошного цвета без прозрачности.

Ответы [ 2 ]

3 голосов
/ 27 августа 2011

Если вы внимательно посмотрите на пример кода http://raphaeljs.com/australia.html, вы увидите, что есть div "paper", включенный в div "canvas" ... "div" paper "более или менее является контейнером игде происходит большинство действий ...

В моем случае у меня не было выбора, кроме как использовать изображение членов комитета по бизнес-администрированию в фоновом режиме ... поэтому я использовал CSS "background-image: url ('myImage.jpg ') no-repeat; "свойство, чтобы поместить мое изображение в фоновом режиме "бумаги" div и установить его ширину и высоту, чтобы они были такими же, как изображение.Это добилось цели.

На самом деле эффект, который я хотел придумать, состоял в том, чтобы у каждого члена комитета был хорошо выделен четкий выделенный раздел с подробной информацией во всплывающей подсказке, когда пользователь наводит указатель мыши на каждого члена на картинке.Квадратный прозрачный .png не позволил бы мне достичь необходимой точности, поэтому я решил пойти на векторы SVG и кодирование Рафаэля ... Я создал все свои пути, используя Microsoft Expression Blend (я думаю, вы можете использовать любой редактор SVGвы хотите) ...

Дело в том, что я использовал инструмент Expression Blend loooooot с WPF и приложением Silvelright BI, поэтому рисование и вырезание части пути было для меня довольно простым ... Тогда мне просто нужно быловырезать и вставлять сгенерированный параметр "M ....... z" в коде Рафаэля - почти так же, как в исходном коде http://raphaeljs.com/australia.html.

Я тестировал код в большинстве браузеров (IE, Firefox, Chrome, Safari ...), и он работал довольно хорошо, и я должен сказать, что я очень доволен результатом.Как и клиенты:)

3 голосов
/ 22 июля 2011

Вы можете просто забыть карту изображения и jQuery и просто использовать Рафаэля поверх самого изображения.

Вы можете использовать Raphael для определения окружностей / областей (которые могут быть изначально прозрачными), к которым вы можете прикрепить пользовательские функции / события. Таким образом, когда пользователь наводит курсор на область нижележащего изображения, функции Raphael могут срабатывать, и вы можете получить необходимую визуальную обратную связь.

Здесь вы можете найти хороший учебник, который объясняет, как прикреплять события к объектам, которые вы создаете для событий наведения и щелчка. http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html

Также просмотрите исходный пример http://raphaeljs.com/australia.html.

т.е. что-то вроде следующего нарисует круг на вашей карте, а затем оживит его. Но вы можете изменить событие наведения, чтобы отобразить ваш текст и т. Д. 

var circle = paper.circle(50, 40, 10);
circle.hover(function(){
               this.animate({
                 fill: '#1669AD'
               }, 300);
             },
             function(){
               this.animate({
                 fill: attributes.fill
               }, 300);
             })
           });
...