mouse cursor and drawing position different

[Young Churl Kwon]

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.

[JoãoCésar]

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

[Young Churl Kwon]

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)

[JoãoCésar]

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).