samedi 27 février 2016

Drag and Drop Tutorial with Animate CC easeljs (HTML5 Canvas)




this is the full code in the tutorial hope you find it useful

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

//Circle Creation

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


var box = new lib.box();
var destination = new createjs.Container();
destination.x = 850;
destination.y = 250;
destination.setBounds(850, 250, destHeight, destWidth);

destination.addChild(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;
       //.rect(0, 0, destHeight, destWidth);
     
     }else{
       evt.currentTarget.alpha=1;
     }

});

//Mouse UP and SNAP====================
dragger.on("pressup", function(evt) {
  if(intersect(evt.currentTarget, destination)){
test.gotoAndPlay(0);
destination.alpha =0;
dragger.alpha = 0;
    dragger.x = destination.x + destWidth/2;
    dragger.y = destination.y + destHeight/2;
    //dragger.alpha = 1;
    stage.update(evt);
  }else{
       dragger.x = dragger.y = 200;
     }
});
//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);
stage.mouseMoveOutside = true;
stage.update();

4 commentaires:

  1. Hi, Thank you for the tutorial, i follow the complete video but when finally finish i found that this example doesn't work on iPad, do you know how can i do to improve this code and see if can work on iOS devices??

    thank you on advice

    RépondreSupprimer
    Réponses
    1. if (Touch.isSupported()) { Touch.enable(stage); } this chould do the trick

      Supprimer
    2. Add this before the code:
      createjs.Touch.enable(stage);

      Supprimer
  2. Seems, this has changed now.

    var stage = new createjs.Stage( 'myCanvasId' );

    // Enable touch events on this stage.
    createjs.Touch.enable( stage );

    RépondreSupprimer