<分区>
有谁知道如何在点击鼠标的位置添加一个点? 使用 Typescript(或)JavaScript 代码。
我想对于某些人来说,我是如何知道解决方案的,但我不知道如何实现它。我所知道的是如何获得特定点的 X 坐标和 Y 坐标,而我不知道的是如何实现它。
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
}
<分区>
有谁知道如何在点击鼠标的位置添加一个点? 使用 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 - 如何让一个div出现,然后一直向右滑动,然后慢慢淡出?