Question

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

有几个EaselJS拖放活动的例子，但我发现最接近我需要的是codepen。我注意到其他几个用户也使用了同样的例子作为起点。我已经在原始发布中尝试show我的目标，在codepen上创建了一个分支。

我确定有更好的方法对此进行编码，但我觉得我还没有这方面的知识。特别是在我刚刚复制和粘贴的codepen分支中，创建了更多的拖拉机和目标。我制作了多个＆＃34;拖拉机＆＃34;和＃34;目的地＆＃34;每个人都有自己的.setBounds然后推送＆＃34;目的地＆＃34;到一个数组。我的计划是在dragger.on（＆＃34; pressup＆＃34;，function（evt）部分周围放置一个for循环，并用数组替换所有目的地＆＃34;目的地[i]＆＃34;包含推送希望它允许我在任何目标上放置任何可拖动的内容。

这没有用。通过谷歌浏览器开发人员的工具，我不断得到同样的错误，说明无法读取属性＆＃39; getBounds＆＃39;在未定义。这里引用了这一部分，代码末尾附近的交叉函数的 var objBounds2 = obj2.getBounds（）。clone（）; 。

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

这是创建显示对象的位置[draggables and targets。]

//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();

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

Answer 1

我也遇到了这个错误。我也是EaselJS和Animate CC的新手。似乎对我有用（我不知道这是否是一个实际修复，但它似乎对我有用）。我尝试使用nominalBounds，但它使用原始的，未转换的目标大小。所以我试过了：

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

在你设定了目的地后，我会坚持这一点，但是在按下之后，按下移动或交叉功能。

这*似乎*现在正在为我工作，让我知道它是否适合你。：）

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

动画CC - Easeljs - 多个可拖动和多个目标丢弃

1 个答案: