Question

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

每当我单击时，都会制作标记和圆圈的克隆并将其定位在我单击的点周围。鼠标单击可以更改标记和圆圈的位置（您将在此问题的结尾找到小提琴链接）。

我可以使用circle和offset等捕获单击点的坐标。其代码如下：

HTML： 图片：

clientX

JS：

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

$('#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'}); });的代码在其参数中将一些值（33和10）添加到display_clone.css和left中，如果没有这些值，我将无法使图像标记的中心仅位于co -纵坐标。

问题1）我只是随机使用了要添加的33和10个值。如果我的HTML代码位于复杂的HTML页面中，那么实际上要进行什么计算，因为要添加的这些数字可能会有所不同？

问题2 ：我无法使圆心成为单击的坐标。这里应该怎么办？

整个场景都是here摆弄。

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

hotspot_user_area

我从数据库中获取了坐标，并希望在图像的<div id="hotspot_user_area"> <img src="https://i.imgur.com/B7VsSq3.png" alt="background" /> </div>中用标记显示它们。假设我从DB获得坐标在变量hotspot_user_area和x1中；现在，如果我使用 Roko C. Buljan 的回答中的以下代码，它将无法正常工作：

y1

这不起作用，因为在管理面板中，$("<div />", { "class": "circle", css: { top: y1, left: x1, width: r * 2, height: r * 2, }, appendTo: $this // append to #image_preview! }).和left属性的值分别为top和x，这些值具有以下计算方式：

那么无论如何再次放置图像，y = ev.pageY - o.top, x = ev.pageX - o.left;中的标记如何放置在图像的相同位置？

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-单击图像上的坐标并在其中绘制一个圆圈

1 个答案: