Highlighted

Canvas HTML5/Scale Stage And Drag-And-Drop

Participant ,
Oct 07, 2019

Copy link to clipboard

Copied

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

 

Views

127

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Canvas HTML5/Scale Stage And Drag-And-Drop

Participant ,
Oct 07, 2019

Copy link to clipboard

Copied

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

 

Views

128

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 07, 2019 0
Adobe Community Professional ,
Oct 07, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 0
Participant ,
Oct 07, 2019

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 07, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Oct 08, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2019 0