Question

我一直在学习konva和html画布，在社区的帮助下，我有一个可拖动形状的画布，即使在旋转时也会保留在舞台的边界。

此外，我的konva代码检测dragboundfunc中的交叉点，并在检测到交叉点时将strokeEnabled设置为true。我使用自己的碰撞检测代码/功能直到昨天，但是因为我在旋转形状时没有得到正确的检测结果我改变了我的代码以将形状拖动到tempLayer中以使getIntersection在dragBoundFunc期间能够工作修复它，但它没有。

我的问题是，即使使用getIntersection而不是我自己的碰撞检测代码，我也无法获得正确的碰撞检测，并且自昨晚尝试以来一直在使用。如果形状旋转为0，我可以使用下面的代码来检测碰撞，这是我的形状dragBoundFunc。

我知道我离我不远，但我也不知所措。我也知道我的代码部分我设置collisionz可能是错误的方式，即使它适用于0度旋转，但我已经离开它以显示我尝试过的和我正在尝试。

有人知道答案可以帮我和Konva一起去吗？

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);
}

 isCollision = false;

// copy the boundary rect into a testRect which defines the extent of the dragbounds without
// accounting for the width and height of dragging rectangle.
// This is changed below depending on rotation.
var testRect={
  left: boundary.x, 
  top: boundary.y, 
  right: boundary.x + boundary.width,
  bottom: boundary.y + boundary.height
};


// the userRotation value is calculated in the rotation button onclick 
// to be one of 0, 90, 180, 270
switch (userRotation){

  case 0: // for 0 degrees compute as per a normal bounds rect
    testRect.right = testRect.right - thisRect.width;
    testRect.bottom = testRect.bottom - thisRect.height;
    break;


  case 90:  // for 90 degs we have to modify the test boundary left and bottom 
    testRect.left = testRect.left + thisRect.height;
    testRect.bottom = testRect.bottom - thisRect.width;
    break;

  case 180:  // for 180 degs we have to modify the test boundary left and top 
    testRect.left = testRect.left + thisRect.width;
    testRect.top = testRect.top + thisRect.height;
    break;

  case 270:  // for 270 degs we have to modify the test boundary right and top 
    testRect.right = testRect.right - thisRect.height;
    testRect.top = testRect.top + thisRect.width;
    break;

}

// get new pos as: if pos inside bounday ranges then use it, otherwise user boundary
var newX = (pos.x < testRect.left ? testRect.left : pos.x);

// looking at the far x pos we need to consider width of the dragging rect...
newX = (newX > testRect.right ? testRect.right : newX);

// get new pos as: if pos inside bounday ranges then use it, otherwise user boundary
var newY = (pos.y < testRect.top ? testRect.top : pos.y);

// looking at the far y pos we need to consider height of the dragging rect...      
newY = (newY > testRect.bottom ? testRect.bottom : newY);


 var collisionz = stage.getIntersection({x:newX+this.getClientRect().width,y:newY}, ".rect");
 if(!collisionz)collisionz = stage.getIntersection({x:newX,y:newY}, ".rect");
 else if(!collisionz)collisionz = stage.getIntersection({x:newX,y:newY+this.getClientRect().height}, ".rect");
 else if(!collisionz)collisionz = stage.getIntersection({x:newX,y:newY+this.getClientRect().height/2}, ".rect");
 else if(!collisionz)collisionz = stage.getIntersection({x:newX+this.getClientRect().width,y:newY+this.getClientRect().height/2}, ".rect");
 else if(!collisionz)collisionz = stage.getIntersection({x:newX + this.getClientRect().height/2,y:newY + this. getClientRect().height}, ".rect");
 if(!collisionz)collisionz = stage.getIntersection({x:newX + this.getClientRect().width,y:newY + this.getClientRect().height}, ".rect");
 var search_term = 'funcRect';


        if(collisionz && collisionz != this){
console.log("INTERSECTION detected"+collisionz.getName());
isCollision = true;
        }
        else
        isCollision = false;

    if(!isCollision && this.getStrokeEnabled())
    {
        this.setStrokeEnabled(false);
        layer.draw();
    }
    else if(isCollision && !this.getStrokeEnabled())
    {
        this.setStrokeWidth(2);
        this.setStroke('black');
        this.setStrokeEnabled(true);
        layer.draw();

    }
return {
x: newX,
y: newY
}   



}

即使在旋转时也能获得任何重叠

0 个答案: