Animate CC - Easeljs - 多个可拖动对象和多个目标放置

Question

我是 Whosebug、Javascript、Adobe Animate CC 和 EaselJS 世界的新手。所有这些我都在学习如何使用。我正在尝试为 html5 canvas 构建一个拖放 activity，其中包含 5 个可拖动对象和 5 个目标。我需要每个目标都能够接受并捕捉 [到位] 5 个可拖动对象中的任何一个。这个想法是让用户做出 5 个选择，然后在放置所有 5 个可拖动对象后检查答案。

周围有几个 EaselJS 拖放活动示例，但我发现最接近我需要的是 codepen. I noticed several other users have used this same example as a starting point too. I've created a branch on codepen from the original posting trying to show 我的目标。

我确信有更好的编码方法，但我觉得我还不具备这样做的知识。特别是在 codepen 的分支中，我刚刚复制并粘贴以创建更多的拖动器和目标。我制作了多个 "draggers" 和 "destinations"，每个都有自己的 .setBounds，然后将 "destinations" 推到一个数组中。我的计划是围绕 dragger.on("pressup", function(evt) 部分放置一个 for 循环，并用包含推送内容的数组 "destinations[i]" 替换所有目的地，希望它能让我在任何目标上放置任何可拖动对象。

这没有用。通过 google chrome 的开发人员工具，我不断收到相同的错误，指出无法读取属性 'getBounds' 未定义。此处指的是本节，var objBounds2 = obj2.getBounds().clone(); 代码末尾附近的相交函数。

如果您仍在阅读本文并且能够理解我正在尝试做的事情，那么谢谢您。我确定我正在使它变得比实际需要的更复杂。我需要我能得到的所有帮助。

此处是创建显示对象的地方[可拖动对象和目标。]

//VARIABLES
//Drag Object Size
dragRadius = 40;
//Destination Size
destHeight = 100;
destWidth = 100;

//Circle Creation
var label = new createjs.Text("RED", "14px Lato", "#fff");
label.textAlign="center";
label.y -= 7;

var circle = new createjs.Shape();
circle.graphics.setStrokeStyle(2).beginStroke("black")
.beginFill("red").drawCircle(0,0, dragRadius);


//Drag Object Creation
//Placed inside a container to hold both label and shape
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
dragger.setBounds(100, 100, dragRadius*2, dragRadius*2);
//DragRadius * 2 because 2*r = width of the bounding box

var label2 = new createjs.Text("RED", "bold 14px Lato", "#000");
label2.textAlign = "center";
label2.x += 50;
label2.y += 40;


var box = new createjs.Shape();
box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
var destination = new createjs.Container();
destination.x = 350;
destination.y = 50;
destination.setBounds(350, 50, destHeight, destWidth);

destination.addChild(label2, box);

这里是拖放部分：

//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
     evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
     stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
     if(intersect(evt.currentTarget, destination)){
       evt.currentTarget.alpha=0.2;
       box.graphics.clear();
       box.graphics.setStrokeStyle(3)
       .beginStroke("#0066A4")
       .rect(0, 0, destHeight, destWidth);

     }else{
       evt.currentTarget.alpha=1;
       box.graphics.clear();     box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
     }

});

//Mouse UP and SNAP====================
dragger.on("pressup", function(evt) {
  if(intersect(evt.currentTarget, destination)){
    dragger.x = destination.x + destWidth/2;
    dragger.y = destination.y + destHeight/2;
    dragger.alpha = 1;
    box.graphics.clear();     
    box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
    stage.update(evt);
  }
});

这里是用目标测试当前可拖动的函数：

//Tests if two objects are intersecting
//Sees if obj1 passes through the first and last line of its
//bounding box in the x and y sectors
//Utilizes globalToLocal to get the x and y of obj1 in relation
//to obj2
//PRE: Must have bounds set for each object
//Post: Returns true or false

  function intersect(obj1, obj2){
  var objBounds1 = obj1.getBounds().clone();
  var objBounds2 = obj2.getBounds().clone();

  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);

  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.width / 2;
  var w1 = -(objBounds1.width / 2 + objBounds2.width);
  var w2 = objBounds2.width / 2;


  if(pt.x > w2 || pt.x < w1) return false;
  if(pt.y > h2 || pt.y < h1) return false;

  return true;
}


//Adds the object into stage
stage.addChild(destination, dragger, destination2, dragger2, destination3, dragger3);
stage.mouseMoveOutside = true;
stage.update();

*抱歉，我没有代表指向 post 更多显示其他用户 post 或任何图像的链接。

Answer 1

我也遇到了这个错误。我对 EaselJS 和 Animate CC 也很陌生。什么似乎对我有用（我不知道这是否是一个真正的修复，但它似乎对我有用）。我尝试在其上使用 nominalBounds，但它使用了目标的原始未转换大小。所以我尝试了这个：

desination.setBounds(desination.x, desination.y, desination.width, desination.height);

我会在你设置好目的地之后坚持下去，但在 pressup、pressmove 或 intersect 功能之外。

这个 * 似乎 * 目前对我有用，请告诉我它是否对你有用。 :)

编辑：另外，我发现这是同一个人。他为多个目的地添加了一些内容 http://codepen.io/samualli/pen/azNroN/

Animate CC - Easeljs - 多个可拖动对象和多个目标放置

Animate CC - Easeljs - Multiple Draggables and Multiple Target drops

javascript

drag-and-drop

easeljs

jquery-animate