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

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

CreateJS - 两个createjs.Containers之间的碰撞检测

1 个答案: