キャンバスポイントのシンプルで高度なツールチップを作成する方法

Question

ちょっとキャンバスポイント上にツールチップを作成しようとしています。私は非常に単純な三角形を持っており、彼のポイントの各辺にツールチップを作成したい。つまり、三角形の3つの点に3つのツールチップが必要です。 これは私がこれまで達成してきたことですが、私は催眠術とモースクイックにリスナーを追加することに成功しました。 円にそのようなツールチップを追加できる場合は、各ポイントにツールチップを追加できますか？

更新：

私は次のリンクを乗り越えてきた：tooltip canvasと私のコードでそれを実装します。 問題は、ツールチップが三角形の各点に表示されず、グリッチがあることです。 私はコードを更新しました。見てください。 これは、新たに追加さ：

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(); 

問題は、私は三角形の内側をクリックしたときにツールチップが遠く離れた現在位置から見えるということです。

$(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

更新されたコードはほとんど動作しますが、あなたは、ウィンドウのスクロールを考慮する必要があります。

window.onscrollイベントにサブスクライブし、キャンバスのオフセット変数を更新することで、これを行うことができます。ウィンドウのサイズを変更すると、キャンバスの相対位置にも影響しますので、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;   
}