javascript - 可拖动人物与随机静态人物碰撞

我在画布上随机有许多静态方块。这些正方形是否可以检测到其他draggable图形何时在它们之间碰撞并打印rect的'name'属性？

这是代码（在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);

    }
});

最佳答案

一个非常有趣的问题。

通过使用以下SO问题stand on the shoulders of giants和这个KineticJS - update text layer with new mouse position

现在，我们唯一要做的就是获取正方形的坐标，鼠标的坐标，然后执行简单的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'
   });

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

要检测绿色点是否被拖动，我使用dragstart和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>");
     }
  }

}

演示版

您可以找到该实现的有效示例how to use draggable and click separately in kineticjs?。

局限性

注意两个重要的事情：


我使用鼠标坐标检查碰撞。不是圆的宽度。如果要使用圆的宽度，可以使用圆的半径（例如，使用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>");

您可以找到该代码HERE的实现。

关于javascript - 可拖动人物与随机静态人物碰撞，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17893934/