Skip to main content
Inspiring
February 21, 2022
Question

Drag, Drop and Constraining - HTML5 Canvas

  • February 21, 2022
  • 1 reply
  • 579 views

I have the following code to drag a symbol which I found from here 

 

A few questions:

 

  • Is there an Adobe tutorial or guide for drag, drop and constraining in HTML5 Canvas?  Anything else that might be recommended?
  • How would this code be modified to include a bounding box constraint?
  • How would it be modified to have a drop behaviour, and have it snap to the obejective?

 

createjs.Touch.enable(stage);

this.ConcaveSphereLens.on("mousedown", onMouseDown.bind(this));
this.ConcaveSphereLens.on("pressmove", onMouseMove.bind(this));
this.ConcaveSphereLens.on("pressup", onMouseUp.bind(this));
this.ConcaveSphereLens.objective = this.objective;


function onMouseDown(evt){
	var item = evt.currentTarget;
	item.offset = {x:0, y:0};

	var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
	item.offset.x = pt.x - item.x;
	item.offset.y = pt.y - item.y;
	item.drag = true;
}


function onMouseMove(evt){
	var item = evt.currentTarget;
	if(item.drag){

	var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
	item.x = pt.x - item.offset.x;
	item.y = pt.y - item.offset.y;
	}
}
    This topic has been closed for replies.

    1 reply

    FlatChatAuthor
    Inspiring
    February 21, 2022

    OK, I have the drag & drop sorted, and now need some help with the snap alignment.

     

    The snap is working, BUT I need to get the alignment of the draggable correct with the drop target.  At the moment the dropped symbol is sitting slightly below centre of the hitBox.  You can see this with the hitbox (large purple rectangle - for testing semi transparent) on the target and the smaller square purple symbol overlayed near the pupil - the dot mc on the droppable.

     

     

    Rather than adjust the transform points of the drop and target symbols, how can I change the code to play with the offset? 

     

    I can't change the transform points of the symbols, as I need to rotate them later after the drop on a common centre point (the centre of the lens and the middle of the holding frame (centered on the pupil)).

     

    //Drag and Drop lens onto trial frame behaviours
    createjs.Touch.enable(stage);
    
    var Lenses = [this.ConcaveSphereLens, this.ConvexSphereLens, this.ConcaveCylinderLens, this.ConvexCylinderLens, this.PrismLens, this.AccessoryLens];
    
    	// Apply the same code for each lens MovieClip symbol in the array Lenses with a For Loop
    for(var i = 0; i<Lenses.length; i++){	
    	Lenses[i].on("mousedown", onMouseDown.bind(this));
    	Lenses[i].on("pressmove", onMouseMove.bind(this));
    	Lenses[i].on("pressup", onMouseUp.bind(this));
    	Lenses[i].LFLensHolder = this.LFLensHolder;
    	Lenses[i].originX = Lenses[i].x;
    	Lenses[i].originY = Lenses[i].y;
    }
    
    function onMouseDown(evt){
    	var item = evt.currentTarget;
    	item.offset = {x:0, y:0};
    	var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
    	item.offset.x = pt.x - item.x;
    	item.offset.y = pt.y - item.y;
    	item.drag = true;
    }
    
    
    function onMouseUp(evt){
    	var item = evt.currentTarget;
    	item.drag = false;
    	var pt = item.localToLocal(item.dot.x, item.dot.y, item.LFLensHolder.hitBox);
    	if(item.LFLensHolder.hitBox.hitTest(pt.x, pt.y) ){
    		item.x = item.LFLensHolder.x;
    		item.y = item.LFLensHolder.y;
    	}
    }
    
    function onMouseMove(evt){
    	var item = evt.currentTarget;
    	if (item.drag){
    		var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
    		item.x = pt.x - item.offset.x;
    		item.y = pt.y - item.offset.y;
    	}
    }
    FlatChatAuthor
    Inspiring
    February 21, 2022

    Also, how would I change the above code to add another drop target? Currently its is 

    Lenses[i].LFLensHolder = this.LFLensHolder;

    Which is repeated in the onMouseUp function.

     

    I would like to add the following target as well.

    this.RFLensHolder