悬停在画布弧上后，如何将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
}