Javascript 动画CC-Easeljs-多个拖拽和多个目标放置

我对stackoverflow、Javascript、Adobe Animate CC和EaselJS的世界还不熟悉。所有这些我都在学习如何使用。我正在尝试为html5画布构建一个包含5个拖放表和5个目标的拖放活动。我需要每个目标都能够接受并捕捉到5个可拖动目标中的任何一个。我们的想法是让用户做出5个选择，然后在所有5个拖拽表都放置好后检查答案

这里有几个EaselJS拖放活动的例子，但我发现最适合我需要的例子就在这里。我注意到其他几个用户也使用了相同的示例作为起点。我已经在codepen上创建了一个分支，从最初的帖子到我的目标

我确信有更好的方法来编写代码，但我觉得我还没有这样做的知识。特别是在codepen上的分支中，我刚刚复制并粘贴了它，以创建更多的拖动器和目标。我已经制作了多个“拖拽器”和“目的地”，每个都有自己的“拖拽器”和“目的地”。我的计划是在dragger.on（“pressup”），function（evt）部分周围放置一个for循环，并用包含推送内容的数组“destinations[i]”替换所有目的地，希望它能让我在任何目标上放置任何可拖动的内容

这不起作用。通过google chrome的开发人员工具，我不断收到相同的错误，声明无法读取未定义的属性“getBounds”。它指的是代码末尾附近intersect函数的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();

//测试两个对象是否相交
//查看obj1是否通过其属性的第一行和最后一行
//x和y扇区中的边界框
//利用GlobalTopolocal获得obj1的x和y与
//到obj2
//PRE：必须为每个对象设置边界
//Post：返回true或false
函数相交（obj1、obj2）{
var objBounds1=obj1.getBounds（）.clone（）；
var objBounds2=obj2.getBounds（）.clone（）；
var pt=obj1.globalToLocal（objBounds2.x，objBounds2.y）；
变量h1=-（objBounds1.height/2+objBounds2.height）；
var h2=objBounds2.width/2；
变量w1=-（objBounds1.width/2+objBounds2.width）；
var w2=objBounds2.width/2；
如果（pt.x>w2 | | pt.xh2 | | pt.y

---

*很抱歉，我没有代表点来发布更多显示其他用户帖子或任何图像的链接。

我也遇到了这个错误。我对EaselJS和动画CC也很陌生。什么似乎对我有效（我不知道这是否是一个实际的修复，但似乎对我有效）。我尝试在其上使用nominalBounds，但这使用了目标的原始、未转换的大小。因此我尝试了以下方法：

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

在设置好目的地后，我会坚持这样做，但不包括pressup、pressmove或intersect功能

这个*似乎*现在对我有效，如果对你有效，请告诉我。：）

---

编辑：还有，我是同一个人发现的。他为多个目的地添加了一些东西

这就是示例代码块：）我建议进行分支，并尝试使其在循环中工作，直到遇到特定问题，这更容易帮助解决。请注意，您需要以某种方式将您的目标与其各自的框相关联，因为您当前的版本会影响每个dragger中的相同框。感谢Lanny的建议。我会用我肯定会遇到的任何问题更新帖子。谢谢迈克。我很高兴尝试这种方法，如果它对我有效，我会让你知道。还有，在Samual Li post上找到了很棒的发现。我现在有点不知所措，因为我看到了一个Dragable需要花多少代码才能到达两个不同的目标。我一直在研究这个项目的两个不同版本。一种是使用李的方法，这将是一个体面的编码量，另一种是使用形状和循环来创建所有显示对象（而不是在动画中创建所有对象-将它们转换为符号-然后将它们放置在容器中）。我当前的问题是，只有在循环中创建的最后一个形状捕捉到它的目标。更新：我在上面代码中的JS部分从1192-1364行开始。其余部分在发布时通过Animate CC生成。对我来说，我认为创建它的循环是很好的，它就是你可以拖动的地方“代码”…对我来说需要在它之外。然后你会有一个用于drag_1、drag_2等的事件侦听器。它有很多代码，但你可以做一件事来缩短它，那就是让每一个调用一个“drag函数”，然后调用一个“drop函数”他们在传递事件时都做相同的事情。我个人会在第一次按Move/pressup功能中这样做，比如dragFun（evt）；或类似的东西。这有意义吗？哦，可能想对目标做一些类似的事情，因为它看起来只是让最后一个目标成为一个工作目标。创建它看起来很好，只是听众除了最后一个目标之外什么都不看：）好消息是我有些东西在工作，而且看起来很稳定。我最终使用了第一个版本。谢谢大家的帮助和建议！注意：如果您没有看到它在fiddle上工作，请尝试将javascript设置切换为“N”