1

调用时我在获取容器时遇到问题getObjectsUnderPoint。根据文档easeljs，当mouseEnabled属性设置为true容器时，调用getObjectsUnderPoint它时应该返回容器对象而不是其子对象。

在示例代码中，我有两个容器，每个容器都有两个孩子（形状和图像）。它的拖放示例。在 mouseup 事件中，我正在检查两个容器是否重叠。但是当我打电话时stage.getObjectsUnderPoint，它返回的数组是[Shape, Image, Shape, Image]. 我所期待的是两个容器。

我可能缺少设置舞台的其他一些属性或其他东西。

试图通过网络找到，没有运气。

   var canvas = null;
    var stage = null;
    var update = false;

    function tick(){
          if(update){
                stage.update();
                update = false;
          }
    }

function init(){
    canvas = document.getElementById("mycanvas");
    stage = new createjs.Stage(canvas);
          createjs.Ticker.setFPS(60);
          createjs.Ticker.addListener(window);
          stage.enableMouseOver(36);

          var getContainer = function(cname, x, y, imageName){

                var container= new createjs.Container();
                container.mouseEnabled = true;
                container.onPress= function(event){
                      var target= event.target;

                      stage.addChild(target);

                      var offset = {
                            x: target.x - stage.mouseX,
                            y: target.y - stage.mouseY
                      };

                      event.onMouseMove = function (ev) {
                            target.x = ev.stageX + offset.x;
                            target.y = ev.stageY + offset.y;
                            update = true;
                      }

                      event.onMouseUp = function(ev){
                            var objects = stage.getObjectsUnderPoint(ev.stageX, ev.stageY);
                            event.stageX, event.stageY
                            objects.forEach(function(object){
                                  console.log('name: ' + object.name);
                            });
                      }
                };

                container.name = cname;

                var shape = new createjs.Shape();
                shape.graphics
                      .setStrokeStyle(10)
                      .beginFill('#f0f0f0')
                      .beginStroke("#000")
                      .drawCircle(x, y, 100);
                shape.name = cname + ' - shape';

                container.addChild(shape);

                var image = new Image();
                image.onload = function(event){
                      var bitmap = new createjs.Bitmap(image);
                      bitmap.regX = image.width/2;
                      bitmap.regY = image.height/2;
                      bitmap.x = x, bitmap.y = y;
                      bitmap.scaleX = bitmap.scaleY = 0.8;

                      bitmap.name = cname + ' - image';

                      container.addChild(bitmap);
                      update = true;
                };
                image.src = imageName;

                return container;

          };

          var container= getContainer("Original Container", 200, 300, 'cat1.png');

          var diffContainer = getContainer("Different Container", 600, 300, 'cat2.png');

          stage.addChild(container);
          stage.addChild(diffContainer);

          update = true;
}

任何帮助，将不胜感激。谢谢

4

1 回答 1

0

我建议在社区论坛http://community.createjs.com中发布 CreateJS 问题

您的样本按预期工作。您在释放鼠标时正在检查鼠标下方的对象。getObjectsUnderPoint 只会告诉您哪些对象将在单个 x/y 坐标处填充像素。

如果你想确定整个容器是否重叠，你需要做更多的事情，比如检查边界框（或者更复杂的东西来做圆->框碰撞）。

干杯。

于 2013-02-20T23:27:43.957 回答