Kinetic.js - Draw a freehandline by following mousepointer

Question

I am new in Javascript and Kinetics and I need to implement a function to draw a freehandline with Kinetics.Js. I found this example but works only with start and endpoint. I will draw in realtime by following the mousepointer...I do not know how to change the functions or push some new coordinates...

Do you have an idea?

var moving = false;


function createLine() {
    line = new Kinetic.Line({
        points: [0, 0, 0, 0],
        stroke: "red",
        strokeWidth: 2,
        id: 'line',
        name: 'line',
        draggable: true
    });
    lineLayer.add(line);
    addHoverEffect(lineLayer, line);
    lineLayer.draw();
}

function drawLine() {
    stage.on("mousedown touchstart", function () {
        createLine();

        if (moving) {
            moving = false;
            lineLayer.draw();
        } else {
            var pos = stage.getPointerPosition();

            //start point and end point are the same
            line.getPoints()[0].x = parseInt(pos.x);
            line.getPoints()[0].y = parseInt(pos.y);
            line.getPoints()[1].x = parseInt(pos.x);
            line.getPoints()[1].y = parseInt(pos.y);

            moving = true;
            lineLayer.drawScene();
        }
    });
    stage.on("mousemove touchmove", function () {
        if (moving) {

            var pos = stage.getPointerPosition();

            line.getPoints()[1].x = parseInt(pos.x);
            line.getPoints()[1].y = parseInt(pos.y);
            moving = true;
            lineLayer.drawScene();
        }
    });
    stage.on("mouseup touchend", function () {
        moving = false;
        removeLineDrawEvents();
    });
}

score 3 · Answer 1 · edited May 23 '17 at 11:58

You’re on the right track. Here’s some more info you need to know:

The stage does not emit mouse events so stage.on(“mousedown” …) won’t work.

Instead, create a background rectangle that fills the entire stage. This background rectangle can emit mouse events.

var background = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: stage.getWidth(),
    height: stage.getHeight(),
    fill: 'white',
    stroke: 'black',
    strokeWidth: 1,
})

The background is an easy way of listening for stage-wide mouse events. However, there is a way to listen to stage mouse events without the background. It's discussed here: Detecting a Click on Stage but not on Shape in KineticJS

To turn your single line into a “polyline”, maintain an external array of line segments you want to be in your line and then set your line’s points property to that array

var points=[];
points.push( …another line segment endpoint…);
 myLine.setPoints(points);

Then just do what you were doing!

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/42RHD/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
}
</style>        
<script>
$(function(){

        // create a stage and a layer
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 400,
            height: 400
        });
        var layer = new Kinetic.Layer();
        stage.add(layer);

        // an empty stage does not emit mouse-events
        // so fill the stage with a background rectangle
        // that can emit mouse-events
        var background = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: stage.getWidth(),
            height: stage.getHeight(),
            fill: 'white',
            stroke: 'black',
            strokeWidth: 1,
        })        
        layer.add(background);
        layer.draw();

        // a flag we use to see if we're dragging the mouse
        var isMouseDown=false;
        // a reference to the line we are currently drawing
        var newline;
        // a reference to the array of points making newline
        var points=[];

        // on the background
        // listen for mousedown, mouseup and mousemove events
        background.on('mousedown touchstart', function(){onMousedown();});
        background.on('mouseup touchend', function(){onMouseup();});
        background.on('mousemove touchmove', function(){onMousemove();});

        // On mousedown
        // Set the isMouseDown flag to true
        // Create a new line,
        // Clear the points array for new points
        // set newline reference to the newly created line
        function onMousedown(event) {
            isMouseDown = true;
            points=[];
            points.push(stage.getMousePosition());
            var line = new Kinetic.Line({
                points: points,
                stroke: "red",
                strokeWidth: 5,
                lineCap: 'round',
                lineJoin: 'round'
            });
            layer.add(line);
            newline=line;
        }

        // on mouseup end the line by clearing the isMouseDown flag
        function onMouseup(event) {
            isMouseDown=false;
        }

        // on mousemove
        // Add the current mouse position to the points[] array
        // Update newline to include all points in points[]
        // and redraw the layer
        function onMousemove(event) {
            if(!isMouseDown){return;};
            points.push(stage.getMousePosition());
            newline.setPoints(points);
            layer.drawScene();
        }


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

When I open your fiddle in Chrome, I get `Uncaught TypeError: Failed to execute 'fill' on 'CanvasRenderingContext2D': parameter 1 ('[object CanvasRenderingContext2D]') is not a valid enum value.` — Martin Thoma, Apr 03 '14 at 16:14
Eventually, if it also works for touch screens (and if it works at all), you could adjust it to my question: http://stackoverflow.com/q/22423791/562769 — Martin Thoma, Apr 03 '14 at 16:15

Kinetic.js - Draw a freehandline by following mousepointer

1 Answers1

Linked