个人中心
gpt4 book ai didi

javascript - 如何检查一个元素是否与另一个javascript处于同一位置

转载 作者：太空宇宙 更新时间：2023-11-04 03:03:03 25 4
gpt4 key购买 nike

我正在创建一个很酷的东西，基本上，它只是在不使用 Canvas 的情况下进行绘图，因为我想“管他呢，我会玩一些 JS”。现在，我的计算机在变得迟钝之前可以处理大约 4,000 个不同的元素，如果我能判断我正在创建的新 div 下是否有一个 div，然后删除它，我可以把这个数字调大。

如何在不使用外部库的情况下检测脚本是否已存在要创建新元素并删除现有元素的元素？

<!DOCTYPE html>
<html>
<head>
    <title>Drawing thing</title>
</head>
<body onmousedown="setYes()" onmouseup="setNo()">

    <div id="appendThingsHere"></div>


<style>
.circle{
    height:50px;
    width:50px;
    background:blue;
    border-radius:50%;
    position:absolute;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
body{
    overflow:hidden;
}
#appendThingsHere{
    height:100%;
    width:100%;
    background:none;
    position:absolute;
    top:0;
    left:0;
}
</style>
<script>
var mouseDown = "no";
var elements = 0;

function setYes(){
    mouseDown = "yes";
}

function setNo(){
    mouseDown = "no";
}

document.body.onmousemove = function(e){

    if(mouseDown === "yes"){
        if(elements < 4000){

            var newCircle = document.createElement("div");
            newCircle.className = "circle";
            newCircle.style.top = e.clientY - 25 + 'px';
            newCircle.style.left = e.clientX - 25 + 'px';

            try{
                var elem = document.elementFromPoint(e.clientX - 25 + 'px', e.clientY - 25 + 'px');
                elem.parentElement.removeChild(elem);
                elements = elements - 1;
                alert("Got one!");
            }
            catch(err){

            }

            elements ++;

            document.getElementById('appendThingsHere').appendChild(newCircle);

        }
    }

}



</script>
</body>
</html>

http://jsbin.com/hocowa/edit?html,output

最佳答案

假设这是一个修改 js 的实验......你可以这样做

在绘制每个新 div 的处理程序上，跟踪最后绘制的一个

var previousCircle,
    yThreshold = 10,
    xThreshold = 10;
document.body.onmousemove = function(e){

    if(mouseDown === "yes"){
        if(elements < 4000){

        var ty = Math.abs(parseInt(previousCircle.style.top, 10) - e.clientY) < yThreshold;
        var tx = Math.abs(parseInt(previousCircle.style.left, 10) - e.clientX) < xThreshold;

         if (ty && tx){
               // if thresholds pass (new is far away enough from old) then draw a new one
               var newCircle = document.createElement("div");
               newCircle.className = "circle";
               newCircle.style.top = e.clientY - 25 + 'px';
               newCircle.style.left = e.clientX - 25 + 'px';
               previousCircle = newCircle;
         }

您基本上决定是否绘制新圆，取决于与上一个绘制的圆的距离。您可以使用阈值变量、阈值条件 ìf (ty || tx) 调整“决定”，或者您甚至可以计算矢量幅度(每个圆心的半径)以保持几何正确: radius = sqrt( (newY - oldY)^2 + (newX - oldX)^2 )。

当然，这只会按顺序跟踪绘图，而不是之前的迭代。为此，您需要对每个绘制周期进行碰撞检查，这意味着遍历所有绘制的 div 并将它们的位置与新圆的位置进行比较。这是非常低效的。如果您在索引中跟踪绘制的圆圈，避免查询 DOM，仅查询内存，您可以加快速度。

var drawnCircles = [];

for (var i in drawnCircles){
    if (Math.abs(drawnCircles[i].top - e.clientY) < yThreshold && //same for x){
        // draw your new circle
        var newCircle = document.createElement("div");
               newCircle.className = "circle";
               newCircle.style.top = e.clientY - 25 + 'px';
               newCircle.style.left = e.clientX - 25 + 'px';
        // and keep track of it
        drawnCircles.push({top: e.clientY, left: e.clientX});
    }
}

关于javascript - 如何检查一个元素是否与另一个javascript处于同一位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30992069/

25 4 0
文章推荐： c - strcastr 中的读取大小无效
文章推荐： c - nm 和 addr2line 函数地址不匹配
文章推荐： javascript - 当 popover 出现时如何显示背景，当 popover 消失时背景消失？
文章推荐： jquery - 打开 Accordion 时按下页脚
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com