Skip to main content
Young Churl Kwon
Inspiring
September 4, 2020
Question

mouse cursor and drawing position different

  • September 4, 2020
  • 2 replies
  • 415 views

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.

    This topic has been closed for replies.

    2 replies

    Young Churl Kwon
    Inspiring
    September 4, 2020

    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ésar17023019
    Community Expert
    Community Expert
    September 4, 2020

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

    JoãoCésar17023019
    Community Expert
    Community Expert
    September 4, 2020

    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