Question

单击画布的某个区域时，我试图添加图像。我更喜欢使用jquery，但是香草js或css很好。问题是，我可以使用click和append添加click函数，但是它并没有出现在我单击的确切位置，这就是我想要发生的情况。我也试图在点击事件中添加一个触摸事件，但出现错误“期望一个参数但有两个参数”

（我正在使用打字稿/ scss / pug预处理程序，gulp编译器）

我尝试将x和y坐标随机化，但这只是将它们随机化，没有将它们“绑定”到我的click事件中。我也确实使用：Active〜选择器通过css尝试了此操作，但是它没有出现在用户处于活动状态的位置，仅在其所在容器的左上方。因此我不知道CSS是否是可行的方法。

$("#clickimage").click(function(){
$('<img src="https://www.placecage.com/c/200/300">').appendTo($("#clickimage"));
        });

$('#clickimage').ontouchstart = ();

css看起来像：

#clickimage {
    display: none;
}

尝试使用的CSS：

:active ~ #clickimage{
    display: block;
  }

html

<canvas width="632" height="418" id="clickimage"></canvas>

Answer 1

也许在香草JS中这样的东西会帮助您-诀窍是使用offsetX / Y固定的位置。

function paintImage(e){
  document.querySelector('#wrapper').innerHTML += `<img src="https://www.placecage.com/c/200/300" style="left:${e.offsetX}px;top:${e.offsetY}px">`;
 }
document.addEventListener('click', paintImage);

img {
  position: fixed;
  display: block;
  background: #f00;
  width: 100px;
  height: 100px;
}

#wrapper {
  width: 100%;
  height: 100vh;
  }

<div id="wrapper"></div>

如何使图像出现在点击时，以及点击发生的确切位置？

1 个答案: