javascript - 如何将符号或文本放入图像的单击位置

Question

我正在尝试实现这样的东西，预定义的符号或文本应该放在单击的图像上。假设有一个图像，并且我单击了该图像的右上角。现在我想在点击的位置上显示一些东西。 我可以获得点击位置的坐标。但我不明白如何使用这个坐标在那个地方放置一些东西。 这是我尝试过的。

HTML 代码:

<img src="result.png" alt="" id="image">

JS代码:

$('#image').click(function (e) { 
var posX = $(this).position().left,
    posY = $(this).position().top,
    positionX = e.pageX - posX,
    positionY = e.pageY - posY;
$("#image").html('<p id="clicked">Clicked here</p>');
});

Answer 1

您正在尝试设置被单击的图像元素的 html。您无需对元素的 x 和 y 位置执行任何操作。

您需要附加一个元素并设置位置。

$('#myDiv').on("click", "img", function (e) { 
  var wrapper = $(this).parent(),
    position = wrapper.offset(), 
    posX = position.left,
    posY = position.top,
    positionX = Math.floor(e.pageX - posX),
    positionY = Math.floor(e.pageY - posY),
    marker = $('<p class="clicked">Clicked here</p>');
  marker.css({top: positionY + "px", left: positionX + "px"})
  wrapper.append(marker);
});

#myDiv {
  position: relative;
  border: 1px solid green;
}

#myDiv p {
  position: absolute;
  color: rgb(0, 255, 255);
  mix-blend-mode: difference;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Example</h1>
<div id="myDiv">
  <img src="http://placekitten.com/g/400/300" alt="">
</div>