Question

我在画布上随机有很多静态正方形。这些方块是否有任何方法可以检测到另一个draggable图形在它们之间发生碰撞并打印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);

    }
});

Answer 1

一个非常有趣的问题。

让我们stand on the shoulders of giants使用这个问题：KineticJS - update text layer with new mouse position和这个问题：how to use draggable and click separately in 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'
   });

现在我需要检测拖动绿点的时间，然后启动检查碰撞的功能。

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

}

演示

您可以找到此实施的实际示例HERE。

限制

注意两件重要的事情：

我使用鼠标坐标来检查碰撞;不是圆的宽度。如果您想使用圆的宽度，可以使用半径（例如，而不是使用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的实现。

可拖动的图形与随机静态图形碰撞

1 个答案:

守则

演示

限制

更新