Highlighted

mouse cursor and drawing position different

Community Beginner ,
Sep 03, 2020

Copy link to clipboard

Copied

I am a beginner trying to create learning content with Animate. I found curveTo.html in createjs demos and wanted to embed it into Animate to make drawing lessons. The results are in the link. https://kong.or.kr/curveto_in_animate.html However, the mouse cursor and the drawing position are different.

Running the original source in createjs demos works fine. Here is the link. https://kong.or.kr/curveto.html I don't know why inserting the curveTo.html source in Animate makes the mouse cursor and drawing position different.

I am wondering if there is a way to match the mouse cursor and the drawing position in https://kong.or.kr/curveto_in_animate.html.

Views

46

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

mouse cursor and drawing position different

Community Beginner ,
Sep 03, 2020

Copy link to clipboard

Copied

I am a beginner trying to create learning content with Animate. I found curveTo.html in createjs demos and wanted to embed it into Animate to make drawing lessons. The results are in the link. https://kong.or.kr/curveto_in_animate.html However, the mouse cursor and the drawing position are different.

Running the original source in createjs demos works fine. Here is the link. https://kong.or.kr/curveto.html I don't know why inserting the curveTo.html source in Animate makes the mouse cursor and drawing position different.

I am wondering if there is a way to match the mouse cursor and the drawing position in https://kong.or.kr/curveto_in_animate.html.

Views

47

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
Sep 03, 2020 0
Adobe Community Professional ,
Sep 04, 2020

Copy link to clipboard

Copied

Hi.

 

When the Scale to fill the visible area is checked in the Publish Settings, the stage may be scaled up or down to fill the browser's inner width and/or height.

 

Because of this, evertime we use the stage.mouseX and/or stage.mouseY properties, we have to take the stage scale into account and so divide the mouse position by the stage scale.

 

With that being said, one of the lines of your code would change from:

oldPt = new createjs.Point(stage.mouseX, stage.mouseY);

to 

oldPt = new createjs.Point(stage.mouseX / stage.scaleX, stage.mouseY / stage.scaleY);

 

Also, if you want a sample of a drawing app in Animate, please checkout this link:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/painting_app

 

Please let us know if you need further assistance.

 

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...
Sep 04, 2020 0
Community Beginner ,
Sep 04, 2020

Copy link to clipboard

Copied

Thank you very much. As you told me, dividing the stage mouse coordinates by the stage scale solved the problem. https://kong.or.kr/curveto_in_animate.html감사합니다! (<- Thank you in korean)

 

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...
Sep 04, 2020 1
Adobe Community Professional ,
Sep 04, 2020

Copy link to clipboard

Copied

This is excellent! You're welcome!

 

My wife and I love South Korea.

 

Tenha um ótimo fim de semana! (<- Have a nice weekend in Brazilian Portuguese).

__________________________________________
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...
Sep 04, 2020 0