CreateJS -两个CreateJS . container之间的冲突检测

Question

我目前在桌面浏览器中工作，但不在触摸设备上工作，因为我更新了鼠标悬停时需要的变量。因此，为了解决这个问题，我试图检查两个容器之间的碰撞检测，然后更新所需的变量。当检测到两者之间的冲突时，项目应该捕捉到占位符位置。问题在于项目和占位符是动态放置的——任何项目必须能够捕捉到任何占位符。

 var placeholders,items,selectedItem,collision,startX, startY, snapX, snapY, xpos, ypos;
 var stage = new createjs.Stage("canvas");
 createjs.Touch.enable(stage);
 createjs.Ticker.addEventListener("tick", tick);
 function init(){
      xpos = 0;
      ypos = 120;
      container = new createjs.Container();
      stage.addChild(container);
      placeholders = new createjs.Container();
      placeholders.name = "placeholders"
      stage.addChild(placeholders);
      items = new createjs.Container();
      stage.addChild(items);
      for(i=0;i<2;i++){
           placeholder = new CustomContainer(i, "#ff0000", 100,100);
           placeholder.setBounds(0,0,100,100);
           placeholder.cursor = "pointer";
           placeholder.x = xpos;
           placeholder.name = "placeholder"+i
           container.addChild(placeholder)
           xpos+= (placeholder.getBounds().width + 10);
      }
      xpos = 0;
      for(j=0;j<2;j++){    
           item = new CustomContainer(j, "#0000ff", 100,100);
           item.active = false;
           item.setBounds(0,0,100,100);
           item.name = "item"+j;
           item.x = xpos;
           item.y = ypos;
           item.startX = xpos;
           item.startY = ypos;
           container.addChild(item)
           item.addEventListener("mousedown", selectItem);
           xpos+= (item.getBounds().width + 10);
      }
      stage.addChild(placeholders,items);
 }
 function selectItem(evt) {
      selectedItem = evt.target.parent;
      selectedItem.mouseEnabled = false;
      evt.addEventListener("mousemove", function(ev) {
           moveItem(ev);
      })
      evt.addEventListener("mouseup", function(ev) {
           selectedItem.mouseEnabled = true;
           if(collision){
                //New position based on the hitTest
                //selectedItem.x = ;
                //selectedItem.y = ;
           }else{
                selectedItem.x = selectedItem.startX;
                selectedItem.y = selectedItem.startY;
           }
      })
 }
 function moveItem(evt){
     pt = placeholders.globalToLocal(stage.mouseX, stage.mouseY);
     obj = evt.target.parent;
     obj.x = pt.x - 50;
     obj.y = pt.y - 50;
     //selectedItem collision with placeholder
     collision = obj.hitTest(pt.x,pt.y)
 }
 function tick(evt) {
     stage.update();
 }
 $(document).ready(init());

我只是没有得到正确的hitTest。您可以看到下面的工作代码。

http://jsfiddle.net/non_tech_guy/2d68W/4/

Answer 1

hittest将测试像素完美命中。我相信你在找一个碰撞测试。试试这个:https://github.com/olsn/Collision-Detection-for-EaselJS