Question

我正在尝试创建一个konva画布，其中形状可拖动，保持在画布的范围内并且也不重叠，因此如果检测到碰撞，那么我需要以某种方式处理它。我设法使前两个工作正常但无法正确处理碰撞检测。

我能够实时检测到碰撞，50％的时间按照我的意愿处理它，让它们在x或y轴-20或+20上反弹，具体取决于拖动方向，但其他50我有多少时间将我的形状放在彼此之上，这正是我想要避免的，然后形状似乎完全停止接收事件（它们不再突出显示哪个是鼠标悬停和鼠标输出）。

我会添加我的代码，但我想我正在寻找一些关于我应该如何处理碰撞的建议，因为我不认为我的方法是最好的（我仍然需要考虑如果还有另一个碰撞时形状碰撞）但是当我发现碰撞时，我应该碰到x或y + 20 / -20吗？当它工作时它看起来确实很好，也是如何最好地确定我应该调整哪个轴 - 我可以改进检测阻力方向的方法吗？（因为我真的认为这是导致形状有时重叠并变得无法响应的原因）

感谢您提供任何建议。我只提供了相关代码（因为它足够了！），它是形状的dragFunc的一部分，然后是检测碰撞的函数。

function intersectRect( a,  b) {
 if (a.x() < b.x + b.width  && a.x() + a.width()  > b.x &&
    a.y() < b.y + b.height && a.y() + a.height() > b.y) {
        console.log("COLLISION!!!");
        return true;
}
else{
    console.log("NO COLLISION!!!");
    return false;
}
    }

function theDragFunc(pos) {
var thisRect;
if(parseInt(this.getClientRect().width) != parseInt(this.width())){
if(userRotation == 90 || userRotation == 270)
thisRect = {x: this.x(), y: this.y(), width: this.getClientRect().height, height: this.getClientRect().width};
else
thisRect = {x: this.x(), y: this.y(), width: this.getClientRect().width, height: this.getClientRect().height};
console.log("must have changed userRotation="+userRotation);
}
else{
thisRect = {x: this.x(), y: this.y(), width: this.width(), height: this.height()};
//console.log("must not have changed userRotation="+userRotation);
}

var isCollision = false;
for(var i=0; i < shapes.length; i++) {


    var a = shapes[i];
    var b = thisRect;
    if((a.x() === thisRect.x) && (a.y() === thisRect.y) && (a.width() === thisRect.width) && (a.height() === thisRect.height))
    {
        console.log("this is the same item");

    }
    else
    {
    isCollision =intersectRect(shapes[i], thisRect);
    if(isCollision)
    break;
    }
}


    if(isCollision)
    {
    var newX = 0;
    var newY = 0
    console.log("pointer x was "+startPointX + " and is now" + stage.getPointerPosition().x);
    console.log("pointer y was"+startPointY + " and is now " + stage.getPointerPosition().y);
    var threshold = 5;
    var restraint = 5;
   var distX =  startPointX  >  stage.getPointerPosition().x  ? startPointX  -  stage.getPointerPosition().x :     stage.getPointerPosition().x - startPointX;// get horizontal dist traveled by finger while in contact with surface
    var distY =  startPointY  >  stage.getPointerPosition().y  ? startPointY  -  stage.getPointerPosition().y :     stage.getPointerPosition().y - startPointY;// get horizontal dist traveled by finger while in contact with surface
     var swipedir = "nodirection";
    if (distX > distY && distX > 1){ // 2nd condition for horizontal swipe met
            swipedir = stage.getPointerPosition().x  < startPointX ? 'left' : 'right' ;// if dist traveled is negative, it indicates left swipe
        }
        else if (distY > distX && distY > 1){ // 2nd condition for vertical swipe met
            swipedir = stage.getPointerPosition().y  < startPointY ? 'up' : 'down'; // if dist traveled is negative, it indicates up swipe
        }

console.log("swipedir = "+ swipedir);
if(swipedir == "left")
{
    newX = thisRect.x +10;
    startPointX = newX;
    newY = thisRect.y;
    startPointY = newY;
}
else if(swipedir == "right")
{
    newX = thisRect.x -10;
        startPointX = newX;
    newY = thisRect.y;
        startPointY = newY;
}
else if(swipedir == "up")
{
    newX = thisRect.x ;
        startPointX = newX;
    newY = thisRect.y + 10; 
    startPointY = newY;
}
else if(swipedir == "down")
{
    newX = thisRect.x ;
        startPointX = newX;
    newY = thisRect.y - 10;
        startPointY = newY;
}
else
{
        newX = thisRect.x ;
            startPointX = newX;
    newY = thisRect.y;
        startPointY = newY;
}

this.setDraggable(false);
this.setX(newX);
this.setY(newY);
layer.draw();
this.setDraggable(true);
 return {

x: newX,
y: newY
}   
}

处理碰撞的提示

0 个答案: