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.
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);
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:
Please let us know if you need further assistance.
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).