Wie erstellt man einfache und fortschrittliche QuickInfo für Canvas Punkte

Question

Hey ich versuche einen Tooltip über Canvas Punkte zu erstellen. Ich habe ein sehr einfaches Dreieck und möchte eine Werkzeugspitze über jeder Kante seiner Punkte erstellen. Es bedeutet, dass ich 3 Tooltips für 3 Punkte des Dreiecks benötige. Das habe ich bisher erreicht, es ist mir gelungen, Zuhörer zu Mosueover und Mosueclick hinzuzufügen. Kann ich zu jedem Punkt einen Tooltip hinzufügen, wenn ja, kann ich einen solchen Tooltip zu einem Kreis hinzufügen?

Update:

gehe ich habe über den folgenden Link: tooltip canvas und implementieren es auf meinem Code. Das Problem ist, dass die Werkzeugspitze nicht über jeden Punkt im Dreieck zeigt und es Störungen aufweist. Ich habe den Code aktualisiert, bitte werfen Sie einen Blick darauf. das ist der neue Zusatz:

if (ctx.isPointInPath(mouse.x, mouse.y)) { 
    $tip.text("I have a tip for you:(x:" + mouse.x + "y:" + mouse.y + ")"); 
    $tip.css({ 
    left: e.clientX + 3, 
    top: e.clientY - 18 
    }).show(); 

Das Problem ist, dass der Tooltip weit weg von der aktuellen Position angezeigt, wenn ich innerhalb des Dreiecks klicken.

$(function() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 
    var triangle = [{ 
 
    x: 58, 
 
    y: 845 
 
    }, { 
 
    x: 984, 
 
    y: 845 
 
    }, { 
 
    x: 521, 
 
    y: 41 
 
    }]; 
 
    drawTriangle(triangle); 
 
    $tip = $('#tip'); 
 
    $tip.hide(); 
 

 
    // define tooltips for each data point 
 
    function drawTriangle(t) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(t[0].x, t[0].y); 
 
    ctx.lineTo(t[1].x, t[1].y); 
 
    ctx.lineTo(t[2].x, t[2].y); 
 
    ctx.closePath(); 
 
    ctx.strokeStyle = 'black'; 
 
    ctx.lineWidth = 2; 
 
    ctx.stroke(); 
 
    } 
 
    var canvasPosition = { 
 
    x: canvas.offsetLeft, 
 
    y: canvas.offsetTop 
 
    }; 
 

 
    canvas.addEventListener("click", function(e) { 
 
    e.preventDefault(); 
 
    // use pageX and pageY to get the mouse position 
 
    // relative to the browser window 
 
    var mouse = { 
 
     x: e.pageX - canvasPosition.x, 
 
     y: e.pageY - canvasPosition.y 
 
    } 
 
    if (ctx.isPointInPath(mouse.x, mouse.y)) { 
 
     $tip.text("I have a tip for you:(x:" + mouse.x + "y:" + mouse.y + ")"); 
 
     $tip.css({ 
 
     left: e.clientX + 3, 
 
     top: e.clientY - 18 
 
     }).show(); 
 
    } 
 

 
    }); 
 

 
})

#tip { 
 
    position: absolute; 
 
    background: white; 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="canvas-wrapper"> 
 
    <canvas id="canvas" width=1024 height=980></canvas> 
 
    <div id=tip>Tooltip</div> 
 
</div>

Answer 1

fast Ihre aktualisierte Code funktioniert, aber Sie müssen für Fenster Scrollen berücksichtigen.

Sie können dies tun, indem Sie das Ereignis window.onscroll abonnieren und dann die Canvas-Offset-Variablen aktualisieren. Die Größenänderung des Fensters wirkt sich auch auf die relative Position des Zeichenbereichs aus. Aktualisieren Sie daher auch die Zeichenbereichsversatzvariablen als Reaktion auf das Ereignis window.onresize.

// create vars that hold the canvas offset vs the window 
var offsetX,offsetY; 
reOffset(); 

// subscribe to scroll & resize events 
// and recalculate the offset 
window.onscroll=function(e){ reOffset(); } 
window.onresize=function(e){ reOffset(); } 

// calculate the current canvas offset vs the window 
function reOffset(){ 
    var BB=canvas.getBoundingClientRect(); 
    offsetX=BB.left; 
    offsetY=BB.top;   
}