javascript - easeljs - 容器 mouseEnabled 不起作用

Question

我在调用 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;
}

如有任何帮助，我们将不胜感激。谢谢

Answer 1

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

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

如果您想确定整个容器是否重叠，您将需要做更多的事情，例如检查边界框(或者更复杂的东西来进行圆->框碰撞)。

干杯。