Обнаружение наведения мыши и отображение текста всплывающей подсказки для точек на холсте HTML - PullRequest
Новая
       30

Обнаружение наведения мыши и отображение текста всплывающей подсказки для точек на холсте HTML

1 голос
/ 11 января 2011

Я недавно создал «карту», ​​хотя и не очень сложную (я работаю над ней), она имеет основную функцию и, как правило, движется в правильном направлении.красные точки, и на этих крошечных красных точках я хочу навести на них курсор мыши и увидеть текст в основном, но у меня возникли некоторые проблемы с получением правильного кода.

http://hummingbird2.x10.mx/website%20creation/mainpage.htm

Это весь код на данный момент. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Oynx Warrior</title>
 <link rel="stylesheet" type="text/css" href="mystyle.css" />

 </head>
 <body>
 <h1>Oynx Warrior</h1>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
 Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
 var c=document.getElementById("myCanvas");
 var cxt=c.getContext("2d");
 cxt.fillStyle="#red";
 cxt.beginPath();
 cxt.arc(50,50,1,0,Math.PI*2,true);
 cxt.closePath();
 cxt.fill();

</script>
</body>
</html>

1 Ответ

1 голос
/ 12 января 2011

Вот четыре варианта:

  1. Отслеживание местоположения всех точек и отслеживание события mousemove на теле.Когда мышь наведется на точку, заново нарисуйте холст с текстом.Когда мышь отключится, очистите холст и заново нарисуйте его без текста.Вы должны написать свой собственный код обнаружения «попадания», чтобы сравнить положение мыши с ограничивающими рамками / радиусом всех точек.Это сложно, но не невозможно.

  2. Вместо одного холста для всей карты, используйте холст для создания своей пользовательской точки, вызовите toDataURL() на холсте, чтобы получить для нее строкусоздайте новый абсолютно позиционированный элемент <div> для каждой точки и установите .style.backgroundImage = url('+myDotDataURL+');.Теперь вы можете просто установить атрибут title для каждого элемента div и позволить браузеру обрабатывать отображение мыши и всплывающую подсказку.Недостаток: вы увидите всплывающую подсказку для квадратной области вокруг точки, а не для самой точки.

  3. Вместо HTML Canvas используйте SVG.В SVG нарисованные «элементы» - это реальные объекты, которые имеют свои собственные события и обнаружение попаданий.При этом вы можете рисовать собственные точки и позволить браузеру делать все нажатия мыши за вас.

...