This function actually draws the line and is used to handle the mousemove
event. This is our main function to handle drawing.
The source code of the mousemove
function is as follows:
function handleMouseMove(event) { var midPt = new createjs.Point(oldPt.x + stage.mouseX>> 1,oldPt.y + stage.mouseY>> 1); drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y,oldMidPt.x, oldMidPt.y); oldPt.x = stage.mouseX; oldPt.y = stage.mouseY; oldMidPt.x = midPt.x; oldMidPt.y = midPt.y; stage.update(); }
This function is called continuously while the mouse cursor is dragging over stage
. In this function, we draw the line using the beginStroke
function and then save the current mouse position again in order to use it in the following function calls; actually, the following mouse move. By each move of the mouse cursor, this function is called again, so we will have the line.
After that, we update the stage using the update
function to apply changes to the stage and render everything to the canvas.
18.224.54.255