javascript - 如何在我点击的地方添加一个点?

标签 javascript typescript

<分区>

有谁知道如何在点击鼠标的位置添加一个点? 使用 Typescript(或)JavaScript 代码。

我想对于某些人来说,我是如何知道解决方案的,但我不知道如何实现它。我所知道的是如何获得特定点的 X 坐标和 Y 坐标,而我不知道的是如何实现它。

    function getClickPosition(e) {
     var xPosition = e.clientX;
     var yPosition = e.clientY;
    }

最佳答案

片段展示了一种快速的方法

function getClickPosition(e) {
  var p = {
    x: e.clientX,
    y: e.clientY
  }
  drawAt(p);
  return p
}

function drawAt(point) {
  var dotSize = 10; // in px
  var div = document.createElement('div');
  div.style.backgroundColor = "#000"
  div.style.width = dotSize + "px";
  div.style.height = dotSize + "px"
  div.style.position = "absolute"
  div.style.left = (point.x - dotSize / 2) + "px"
  div.style.top = (point.y - dotSize / 2) + "px"
  div.style.borderRadius = "50%"
  root.appendChild(div);
}

document.getElementById("root").addEventListener('click', function(e) {
  getClickPosition(e);
})
<div id="root" style="width: 400px; height: 300px; background-color: #ccc"></div>

但是,您可能想查看 HTML Canvas

关于javascript - 如何在我点击的地方添加一个点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52144991/

相关文章:

javascript - Wordpress Ajax 插入不起作用

knockout.js - Typescript KnockoutJS 点击绑定(bind)错误

typescript - 尝试将多个 keyof 分配给 Typescript 中的动态描述对象

javascript - Angular 4 : How to define custom validator for input which wont allow numbers?

javascript - 使用 Highcharts 深入钻取 1 个以上的子报表

PHP 文件输出 javascript 以包含为 JS 文件 - 需要限制,使其不会在浏览器窗口中打开

javascript - 如何使删除出现在同一行?

javascript - 如何让一个div出现,然后一直向右滑动,然后慢慢淡出?

visual-studio - 如何从 Visual Studio 项目中删除 Typescript 支持?

typescript - 类型 'Ref<never[]>[]' 上不存在属性