HTML畫布懸停文本

Question

我有一個HTML畫布，它具有所有不同大小的所有不同形狀，並且它是通過解析來自外部文件的信息而構建的。 我想知道如何做到這一點，以便將鼠標懸停在每個形狀上會顯示其唯一名稱。 我找到了有關如何在整個畫布上的鼠標懸停時顯示文本的資源，但是我需要每個單獨的形狀來顯示唯一的文本。 謝謝！

Answer 1

您可以使用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> 

Answer 2

您願意使用一個庫，還是附加到純本地畫布實現？ 使用純天然畫布，這可能會很煩人，因為您不僅必須獲取指針的鼠標坐標，而且還必須跟蹤每個對象的位置，並在每次鼠標移動時檢查鼠標是否在該位置。鼠標移動。 我對該功能進行了一次編碼，只有幾個矩形可以跟蹤它，這已經足夠令人討厭了。

另一方面，如果您使用KineticJS進行畫布繪制（或者大概是其他人； KineticJS只是我使用的那個），那么所有煩惱都會為您處理。 使用KineticJS庫，您創建並添加到畫布的對象可以附加有事件處理程序，這比在任何其他HTML元素上對鼠標懸停事件做出反應的難度最小。 此鏈接顯示了如何進行。

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