jQuery- 单击图像上的坐标并在那里画一个圆圈

Question

我有一个 div，即 image_preview，里面有一张图片。有一个输入框可以从用户那里获取圆的半径。当我点击图像上的一个点时，我需要一个以该点为中心并以输入的半径为半径的圆。圆圈应该用记号笔标记。 id为hotspot_display的div作为标记，divcircle作为要显示的圆圈。两者都是绝对定位的。该标记的背景是一张尺寸为 24X24 的图像。

每当我单击时，都会制作标记和圆的克隆并将其放置在我单击的点周围。单击鼠标可更改标记和圆圈位置（您会在本题末尾找到 fiddle link）。

我可以用offset和clientX等捕捉我点击的点的坐标，代码如下：

HTML: 图片：

<input type="text" value="0"  class="radius" name="radius"/>

<div id="image_preview">

    <img src="https://i.imgur.com/B7VsSq3.png" alt="background" />



    <div id="hotspot_display"></div>

    <div class="circle" style="background-color: #858585; position: absolute;"></div>

</div><!-- end of id image_preview-->

<div id="hotspot_answer_points">


</div><!-- end of id hotspot_answer_points-->

JS:

   $('#image_preview').bind('click', function (ev) {

                var $div = $(ev.target);
                var $div = $(this);
                var $display =  $('#image_preview').find('#hotspot_display');
                var offset_t = $(this).offset().top - $(window).scrollTop();
                var offset_l = $(this).offset().left - $(window).scrollLeft();

                var left = Math.round( (ev.clientX - offset_l) );
                var top = Math.round( (ev.clientY - offset_t) );

                if(window.console){

                    console.log("left = "+left+" top = "+top);

                }


                var display_clone=$display.clone().show();
                display_clone.css({'top':top+33,'left':left+10,'display':'block'});

});

display_clone.css 的代码在其参数中添加了一些值（ 33 和 10 ）到 left 和 top 没有它们我无法获得图像标记的中心坐标.

问题1)我只是随机使用了33和10的值来相加。真正应该在这里进行什么计算，因为要添加的这些数字可能会有所不同如果我的 HTML 代码位于复杂的 HTML 页面中？

问题2: 我无法将圆心作为我点击的坐标。这里应该怎么走？

整个场景是 here fiddle。

编辑： 我的场景实际上有 2 个部分。上述情况发生在管理区域。在用户区，我再次显示 div 内的图像，即 hotspot_user_area。我从管理区域将点击的坐标保存在数据库中。在用户 I 区域，我有 HTML:

<div id="hotspot_user_area">

<img src="https://i.imgur.com/B7VsSq3.png" alt="background" />

</div>

我从数据库中获取坐标，并希望在图像的 hotspot_user_area 中用标记显示它们。假设我从数据库中得到的坐标在变量 x1 和 y1 中；现在，如果我使用 Roko C. Buljan 的回答中的以下代码，它将不起作用：

 $("<div />", {
      "class": "circle",
      css: {
        top: y1,
        left: x1,
        width: r * 2,
        height: r * 2,
      },
      appendTo: $this // append to #image_preview!
    }).

这不起作用，因为在管理面板中 left 和 top 属性分别具有值 x 和 y，它们具有以下计算：

y = ev.pageY - o.top,
x = ev.pageX - o.left;

那么，无论 div 再次放置图像，如何将标记放置在图像的同一位置？

Answer 1

这里有一个更简单的方法：

要获得中心，请使用 ev.pageX - el.offset().left
不要克隆元素。即时创建它们。
使用 CSS transform translate 使它们居中

var App = App || {};
App.points = []; // Use array to store objects like [{x,y,r}, {x,y,r} ...]


jQuery(function($) {

  const $radius = $(".radius");

  $('#image_preview').on('click', function(ev) {

    const $this = $(this),
       r = parseInt($radius.val().trim(), 10), // Parse as Integer radix 10
      o = $this.offset(),
      y = ev.pageY - o.top,
      x = ev.pageX - o.left;

    $("<div />", {
      "class": "circle",
      css: {
        top: y,
        left: x,
        width: r * 2,
        height: r * 2,
      },
      appendTo: $this // append to #image_preview!
    });

    // Append data to App.points
    App.points.push({x,y,r});
    // Test
    console.log( App.points )

  });

});

#image_preview {
  position: relative; /* Add this since child are absolute! */
  background: #eee;
  margin: 15px;
  cursor: crosshair;
}

#image_preview img {
  display: inline-block;
  vertical-align: top;
}

.circle {
  position: absolute;
  background: rgba(255, 0, 0, 0.2) url("https://i.imgur.com/qtpC8Rf.png") no-repeat 50% 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%); /* use translate instead of JS calculations */
}

.radius {
  position: absolute;
}

Radius: <input type="text" value="20" class="radius" name="radius">

<div id="image_preview">
  <img src="https://i.imgur.com/B7VsSq3.png" alt="graph">
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

jQuery- 单击图像上的坐标并在那里画一个圆圈

jQuery- click at a co-ordinate on an image and draw a circle there

jquery

overlay

position

click