Как сделать так, чтобы изображение появлялось при клике именно там, где он был? - PullRequest
Новая
       318

Как сделать так, чтобы изображение появлялось при клике именно там, где он был?

0 голосов
/ 15 апреля 2019

Я пытаюсь добавить изображение при нажатии области холста.Я бы предпочел использовать JQuery, но ваниль JS или CSS хорошо.Проблема в том, что я могу добавить функцию щелчка, используя щелчок и добавление, однако она не отображается в том месте, где я щелкнул, и это то, что я хочу, чтобы это произошло.также я пытаюсь добавить событие касания к событию click, и я получаю сообщение об ошибке «ожидал один аргумент, но получил два»

(я использую препроцессор typcript / scss / pug, компилятор gulp)

Я пытался рандомизировать координаты x и y, однако это просто рандомизировало их и не «привязывало» их к моему событию щелчка.Я также попытался сделать это с помощью css, используя селектор: Active ~, однако он не отображался там, где был активен пользователь, только в левом верхнем углу контейнера, в котором он находится. Поэтому я не знаю, подходит ли 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>

1 Ответ

0 голосов
/ 16 апреля 2019

Может быть, что-то вроде этого в vanilla 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>
...