2

我在画布上随机有许多静态方块。这些方块有什么方法可以检测到另一个draggable图形何时在它们之间发生碰撞并打印 'name' 属性rect？

这是代码（也可在JSFiddle中找到）

var arrowMode = true;

var stage = new Kinetic.Stage({
    container: 'container',
    height: 400,
    width: 800
});

var arrowsLayer = new Kinetic.Layer();
stage.add(arrowsLayer);

$(stage.getContainer()).on('click',function(e){
    if(arrowMode){

        arrowMode=false;

        var x = stage.getMousePosition().x;
        var y = stage.getMousePosition().y;

        for(var i=0;i<6;i++){

            //Rects will be collide for a circle
            var rect = new Kinetic.Rect({
                name:'rect'+(i+1),
                x: i<3? x + (i)*60:x + (i-3)*60,
                y: i<3? y : y +60,
                width: 50,
                height: 50,
                fill:'black'
            });

            arrowsLayer.add(rect);
        }

        var circle = new Kinetic.Circle({
            draggable: true,
            stroke: "black",
            fill: "#0FF30F",
            strokeWidth: 2,
            radius: 10,
            x:x+400,
            y:y+100
        });

    arrowsLayer.add(circle);  
    stage.add(arrowsLayer);

    }
});
4

1 回答 1

2

一个非常有趣的问题。

让我们通过使用这个 SO 问题站在巨人的肩膀上： KineticJS - update text layer with new mouse position和这个 SO 问题：如何在 kineticjs 中分别使用可拖动和单击？

现在我们唯一要做的就是获取方块的坐标，鼠标的坐标，然后做一个简单的 switch 语句来根据需要输出文本。

编码

为了获得正方形的坐标（软编码），我使用了一个二维数组：

var poss = new Array(6);
  for (var i = 0; i < 6; i++) {
    poss[i] = new Array(2);
}

现在，当用户第一次单击画布并生成正方形时，我将它们的坐标附加到数组中：

for(var i=0;i<6;i++){

      var posX = i<3? x + (i)*60:x + (i-3)*60;
      var posY = i<3? y : y +60;

      poss[i][0] = posX;
      poss[i][1] = posY;

      var rect = new Kinetic.Rect({
      name:'rect'+(i+1),
      x: posX,
      y: posY,
      width: 50,
      height: 50,
      fill:'black'
   });

现在我需要检测何时拖动绿点，然后启动一个检查碰撞的函数。

为了检测绿点是否被拖动，我使用dragstartand dragend：

circle.on('dragstart', function(e){
    indrag = true;
});

circle.on('dragend', function(e){
    indrag = false;
});


$(stage.getContent()).on('mousemove', function (e) {
   if (indrag)
   {            
     checkCollision(e);
   }
});

现在我需要做的就是定义checkCollision(e)迭代所有正方形坐标（保存在数组中）以检查碰撞的函数：

function checkCollision(event) {

  var pos = stage.getMousePosition();
  var mouseX = parseInt(pos.x);
  var mouseY = parseInt(pos.y);

  $("#coordinates").replaceWith("<div id='coordinates'>X-axis: "+mouseX+"<br />Y-axis: "+mouseY+"</div>");

  $("#inSquare").replaceWith("<div id='inSquare'>Nothing is happening</div>");

  //check if collision with squares
  for (var k = 0; k < 6; k++)
  {
     if (mouseX >= poss[k][0] && mouseX <= (poss[k][0]+50) && mouseY >= poss[k][1] && mouseY <= (poss[k][1]+50))
     {   
         $("#inSquare").replaceWith("<div id='inSquare'>You have just dragged the green dot in square number " +(k+1)+"</div>");
     }
  }

}

演示

您可以在此处找到此实现的工作示例。

局限性

注意两个重要的事情：

  • 我使用鼠标坐标来检查碰撞；不是圆的宽度。如果您想使用圆的宽度，您可以使用圆的半径（例如，而不是mouseX使用(mouseX + widthCircle)您widthCircle在某个变量中定义的位置）来实现。

  • 我的一些代码是多余的（我定义了一些变量两次）。因此，如果您愿意，您仍然可以缩短我的代码。

我希望这能回答你的问题。祝你好运！

更新

要显示指定的名称属性，我建议保持代码干净并使用switch如下语句：

var name;
switch (k)
{
   case 0: name = "I'm in the upper left";                   break;
   case 1: name = "I'm more awesome than the other squares"; break;
   case 2: name = "I'm a black square";                      break;
   case 3: name = "I'm in the bottom left";                  break;
   case 4: name = "I like coffee";                           break;
   case 5: name = "Nanos gigantum humeris insidentes";       break;
}

$("#inSquare").replaceWith("<div id='inSquare'>"+name+"</div>");

您可以在此处找到该代码的实现。

于 2013-07-27T12:14:21.127 回答