1

を呼び出すときにコンテナの取得に問題がありgetObjectsUnderPointます。のドキュメントによると、easeljsプロパティmouseEnabledがtrueコンテナに設定されている場合、呼び出すgetObjectsUnderPointと、子ではなくコンテナオブジェクトが返されます。

サンプルコードでは、2つのコンテナーがあり、各コンテナーには2つの子（形状と画像）があります。そのドラッグアンドドロップサンプル。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 に答える