Canvas HTML5/Scale Stage And Drag-And-Drop

[avtutorials]

Hello,

If I scale the Stage, objects get scaled, but mouse drag movement is not scaled.  I'm using: Publish Settings > Basic tab > Make responsive = Both and Scale to fill visible area = Fit in view.  With the Stage filling the browser window, I'll drag the circle, yet the circle moves beyond the mouse movement.  It's probably something simple I'm missing, but I couldn't find the answer in other threads.  Basically, I need the mouse to drag the circle, no matter how the Stage is scaled.  If anyone has an idea, please reply.  Thank you!

// NOTE: This assumes there's a circle MovieClip in the Library, with a Linkage of Circle1.

//VARIABLES
dragRadius = 40;
destHeight = 100;
destWidth = 100;

//Circle Creation
var circle = new lib.Circle1();

//Drag Object Creation
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle);
dragger.setBounds(100, 100, dragRadius*2, dragRadius*2);

//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
	evt.currentTarget.x = evt.stageX;
	evt.currentTarget.y = evt.stageY;
	stage.update();
});

//Adds the object into stage
stage.addChild(dragger);
stage.mouseMoveOutside = true;
stage.update();

[JoãoCésar]

Hi.

To correctly drag an object, basically what you have to do is to get the distance between the mouse position and the instance origin when the mouse is pressed down and also divide the mouse position by the stage scale.

I have here a video tutorial on this subject in case you're interested.

Regards,

JC

[avtutorials]

Thanks, JC.  I see what you mean.  I ran some tests, and I get the idea of how to do it.

If I've got a ton of code, it seems like a lot of work to patch it all up with additional math to make it work right, however.

I'm wondering if there's some sort of alternative to stageX/stageY, or some way to modify stageX/stageY globally to prevent a lot of surgery writing additional code.  Do you have any thoughts on this idea?  Again, thank you for your help!

[ClayUUID]

This is exactly why you should put frequently reused code in shared library functions. Sounds like it may be time to refactor.