Question

我正在创造一种很酷的东西，基本上，它只是在不使用画布的情况下绘画，因为我想“到底是什么，我会玩一些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

Answer 1

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

在绘制每个新div的处理程序上，跟踪最后绘制的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});
    }
}

Answer 2

最好的选择是在JavaScript中执行所有逻辑并使用数组进行跟踪。仅将DOM用于显示目的，您应该看到改进。

Answer 3

您可以使用document.elementFromPoint(x, y);

不要以为你能够在一个点上处理多个元素。可能必须迭代，同时有一个元素可以删除或忽略。

Answer 4

如果你想确保之前没有与元素具有相同位置的新元素，你可以创建Array来保持绘制的位置，并且只有在数组中不存在新位置时才绘制新元素。例如：

var mouseDown = "no";
var elements = 0;
var elmList = [];

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

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

document.body.onmousemove = function (e) {
    if ( mouseDown === "yes" ) {
        if ( elements < 4000 ) {
            var offset = (e.clientY - 25) + 'x' + (e.clientX - 25);

            if ( elmList.indexOf(offset) < 0 ) {
                var newCircle = document.createElement("div");
                newCircle.className = "circle";
                newCircle.style.top = e.clientY - 25 + 'px';
                newCircle.style.left = e.clientX - 25 + 'px';

                elements++;

                elmList.push(offset);

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

}

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

4 个答案: