HTML Canvas Hover Text

Question

У меня есть HTML-холст со всеми различными формами всех разных размеров, и он создается путем анализа информации из внешнего файла. Мне интересно, как я могу это сделать, чтобы наведение мыши на каждую фигуру отображало свое уникальное имя. Я нашел ресурсы о том, как отображать текст при наведении мыши на весь холст , но мне нужна каждая отдельная фигура для отображения уникального текста. Благодаря!

Answer 1

Готовы ли вы использовать библиотеку, или вы привязаны к исключительно встроенной реализации холста? С чисто нативным холстом это может стать довольно раздражающим, потому что вам нужно будет не только получить координаты мыши указателя, но и следить за положением каждого объекта и проверять, находится ли мышь в этом положении каждый раз, когда мышь движется. Я закодировал эту функциональность один раз, и это было довольно раздражающе, только с несколькими прямоугольниками, чтобы отслеживать.

С другой стороны, если вы используете KineticJS для рисования холста (или, предположительно, для других, KineticJS - это тот, который я использовал), все это раздражение обрабатывается для вас. Объекты, которые вы создаете и добавляете в холст, могут иметь связанные с ними обработчики событий, используя библиотеку KineticJS, и это будет минимально сложнее, чем реагировать на события mouseover на любом другом элементе HTML. Эта ссылка показывает, как это сделать.

http://www.html5canvastutorials.com/kineticjs/html5-canvas-listen-or-dont-listen-to-events-with-kineticjs/

Answer 2

Вы можете использовать context.isPointInPath, чтобы проверить, если ваша мышь зависает над одной из ваших фигур.

1. Создайте объект javascript, представляющий каждую форму из внешнего файла.

   var triangle={ 
       name:'triangle', 
       color:'skyblue', 
       points:[{x:100,y:100},{x:150,y:150},{x:50,y:150}] 
   }; 
   

2. Создайте функцию, которая принимает форму-объект и делает путь от этой формы-объекта:

   function defineShape(s){ 
       ctx.beginPath(); 
       ctx.moveTo(s[0].x,s[0].y); 
       for(var i=1;i<s.length;i++){ 
        ctx.lineTo(s[i].x,s[i].y); 
       } 
       ctx.closePath(); 
   } 
   

3. Используйте context.isPointInPath, чтобы проверить, если указатель мыши находится внутри самой последней определенной траектории (с шага № 2).

   // define the path to be tested 
   defineShape(triangle); 
   
   // test if the mouse is inside that shape 
   if(context.isPointInPath(mouseX,mouseY){ 
       // the mouse is inside the shape 
   } 
   

Вот пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
ctx.font='14px verdana'; 
 

 
var shapes=[]; 
 

 
var triangle1={ 
 
    name:'triangle1', 
 
    color:'skyblue', 
 
    drawcolor:'skyblue', 
 
    points:[{x:100,y:100},{x:150,y:150},{x:50,y:150}] 
 
}; 
 

 
var triangle2={ 
 
    name:'triangle2', 
 
    color:'palegreen', 
 
    drawcolor:'palegreen', 
 
    points:[{x:220,y:100},{x:270,y:150},{x:170,y:150}] 
 
}; 
 

 
shapes.push(triangle1,triangle2); 
 

 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 

 
drawAll(); 
 

 
function drawAll(){ 
 
    for(var i=0;i<shapes.length;i++){ 
 
    var s=shapes[i]; 
 
    defineShape(s.points); 
 
    ctx.fillStyle=s.drawcolor; 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
    if(s.color!==s.drawcolor){ 
 
     ctx.fillStyle='black'; 
 
     ctx.fillText(s.name,s.points[0].x,s.points[0].y); 
 
    } 
 
    } 
 
} 
 

 

 
function defineShape(s){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(s[0].x,s[0].y); 
 
    for(var i=1;i<s.length;i++){ 
 
    ctx.lineTo(s[i].x,s[i].y); 
 
    } 
 
    ctx.closePath(); 
 
} 
 

 
function handleMouseMove(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 

 
    for(var i=0;i<shapes.length;i++){ 
 
    var s=shapes[i]; 
 

 
    // define the shape path we want to test against the mouse position 
 
    defineShape(s.points); 
 
    // is the mouse insied the defined shape? 
 
    if(ctx.isPointInPath(mouseX,mouseY)){ 
 
     // if yes, fill the shape in red 
 
     s.drawcolor='red'; 
 
    }else{ 
 
     // if no, fill the shape with blue 
 
     s.drawcolor=s.color; 
 
    } 
 

 
    } 
 

 
    drawAll(); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Hover the mouse over the shape.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>