懸停在畫布弧上后，如何將div附加（顯示）到畫布弧上？

Question

簡而言之，我的程序是在圖像上添加注釋。 當用戶在圖像的特定點上單擊鼠標時，它將繪制一個包含數字的畫布弧（有效）。 我要添加的是用戶單擊圖像時，它繪制包含數字的畫布弧，並顯示一個包含兩個可編輯文本區域的div，並且當鼠標離開時，相對於兩個文本區域而言，它們將被隱藏以保存每個文本區域的位置帶2個文本區域中的值的注釋。

這是我的代碼：

<canvas width="1600" height="1600" 
style="background-image:url('dermatome.jpg');" id="special">
    <div id="re">
        <textarea id="text1" rows="4" cols="50" hidden></textarea>
        <textarea id="text2" rows="4" cols="50" hidden></textarea>
    </div>
</canvas>

    <script>

     var count = 1;

     jQuery(document).ready(function(){
     $("#special").click(function(e){ 

        //get mouse coordinates
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 


        var ctx= this.getContext("2d"); 
        ctx.beginPath();

        ctx.arc(x, y, 20,0, 2*Math.PI);
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fill();
        ctx.font = '17pt Calibri';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle'
        ctx.fillText(count, x, y);
        count++;

        $(this).mouseover(function() {
        $('#re').show();    })         });         })         </script>

Answer 1

我要添加的是用戶單擊圖像[ ＃1 ]時，它繪制包含數字[ ＃2 ]的畫布弧，並顯示一個包含兩個可編輯文本區域[ ＃3 ]的div，以及當鼠標離開[ ＃4 ]時]，則將兩個文本區域隱藏起來[ ＃5 ]，以將每個注釋的位置與兩個文本區域[ ＃6 ]中的值一起保存。

1. 使用.click的.click監聽畫布上的點擊。

2. 使用問題中的“編號弧”代碼。

3. 畫布不能是父項，因此請將#special＆#re包裝在新的容器div（#wrapper）中。

   • 將#wrapper設置為position:relative並將#special和#re設置為position:absolute 。
   • 在#special的點擊上，將#re的left和top位置設置為點擊位置。
   • 使用.show的.show將其可見性切換為可見。
   • 使用＃text1和＃text2的.val根據需要填充/清除其文本內容。 如果要重新顯示用戶先前的文本，請從相應的javascript對象中獲取這些先前的文本，然后使用.val(annotations[n].text1) and .val(annotations[n].text2)重新填充文本。

4. “……當鼠標離開時……”……嗯，離開了什么？ 也許通過在兩個文本區域中添加一個“保存”按鈕來幫助用戶更好地理解。

5. 使用.hide的.hide將其可見性切換為隱藏。

6. 使用javascript對象保存點擊位置和textarea值。

    var annotations=[]; annotations.push({ x:x, // == x from #special's click handler y:y, // == y from #special's click handler text1: $('#text1').val(), text2: $('#text2').val(), }); 

如果您希望用戶能夠單擊上一個編號的圓圈，則可以使用此圓形鼠標公式來測試mouseclick位置與annotations []中每個[x，y]的關系：

var dx=mouseX-annotations[n].x;
var dy=mouseY-annotations[n].y;
if(dx*dx+dy*dy<20*20){  // 20 is the radius of your circle ;-)
    // the mouse is inside circle#n
}