Drawing lines along the cursor path in KineticJS

Question

I am using KineticJS to implement a drawing application. I have used it to draw shapes, straight lines. I have used way described in KineticJS - Drawing Lines with Mouse to draw straight lines. But now my requirement is to draw line along the mouse path! What should be the procedure for that? Can we use Kinetic.Path to do that?

Following code is used to draw straight lines,

    var Object,startingPoint;
    var down = false;

    layer.on("mousedown", function(e) {
        down = true;
        Object = new Kinetic.Line({
            points: [e.layerX, e.layerY,e.layerX+1, e.layerY+1],
            stroke: "red"
        });

        layer.add(Object);
    });

    layer.on("mousemove", function(e) {
         if (down) {
                var x = e.layerX;
                var y = e.layerY;
                Object.getPoints()[1].x = e.layerX;
                Object.getPoints()[1].y = e.layerY;
                down = true;
                layer.draw();
         }        
    });

    layer.on("mouseup", function(e) {
        down = false;
    });

I have replaced Kinetic.Line with Kinetic.Path to achieve the target. But it didn't work.

Sure you can. What code have you tried so far? – markE Mar 23 '13 at 15:43 — markE, Mar 23 '13 at 15:43
I have added the code to the question. Please have a look. – andunslg Mar 23 '13 at 19:51 — andunslg, Mar 23 '13 at 19:51
put together a jsfiddle or jsbin and people will help – SoluableNonagon Mar 25 '13 at 15:04 — SoluableNonagon, Mar 25 '13 at 15:04

score 0 · Answer 1 · answered Mar 25 '13 at 15:07

0

if you need to add points to a line you can do this:

  var points = line.getPoints();
  var pos = stage.getUserPosition();
  points = points.push(pos.x, pos.y);
  line.setPoints(points);

answered Mar 25 '13 at 15:07

SoluableNonagon

11,541
11
53
98

score 0 · Answer 2 · edited May 23 '17 at 11:49

Here how I implemented it. The key is to use spline shape of kineticJS and push points in it during mousemove and mouseup. ev._x, ev._y are the x, and y points calculated in the light of this post Tracking mouse position in canvas when no surrounding element exists

Please let me know if it helps

    tools.pencil = function () {
    var tool = this;
    this.started = false;
    var drawObject;

    this.mousedown = function (ev) {
     drawObject = new DrawObject();
     drawObject.Tool = DrawTool.Pencil;
     tool.started = true;
     drawObject.currentState = DrawState.Started;
     drawObject.StartX = ev._x;
     drawObject.StartY = ev._y;
     tool.DrawIt(drawObject);

   };

    this.mousemove = function (ev) {
        if (tool.started) {
           drawObject.currentState = DrawState.Inprogress;
           drawObject.CurrentX = ev._x;
           drawObject.CurrentY = ev._y;
           tool.DrawIt(drawObject);


    };

    this.mouseup = function (ev) {
        if (tool.started) {
            tool.started = false;
            drawObject.currentState = DrawState.Completed;
             drawObject.CurrentX = ev._x;
            drawObject.CurrentY = ev._y;
           tool.DrawIt(drawObject);
       }
    };

    this.mouseout = function (ev) {
        if (tool.started) {
        }
        tool.started = false;

    };


    this.DrawIt = function (drawObject) {

            switch (drawObject.currentState) {
                case DrawState.Started:
                    var x= drawObject.StartX, 
                        y = drawObject.StartY;
                    var pencil = new Kinetic.Spline({
                        points: [{
                            x: x,
                            y: y
                        }],
                        stroke: 'red',
                        strokeWidth: 2,
                        lineCap: 'round',
                        tension: 1,
                        name: shapes.length
                    });

                    drawObject.Shape = pencil;
                    layer.add(pencil);
                    layer.draw();


                    break;
                case DrawState.Inprogress:
                case DrawState.Completed:
                    var x = drawObject.CurrentX,
                        y = drawObject.CurrentY;

                    var pencil = drawObject.Shape;
                    pencil.attrs.points.push({ x: x, y: y });
                    pencil.setPoints(pencil.attrs.points);
                    layer.draw();
                    if (drawObject.currentState == DrawState.Completed) {
                        // dosomething
                    }

                    break;
            }

Where draw object is simple empty function in javascript

function DrawObject()
{
}

and drawstate is all the available state of pencil tool

var DrawState =
{
 Started: 0,
 Inprogress: 1,
 Completed: 2
}

and "layer" is simple KineticJS layer already added in KineticJS stage

Drawing lines along the cursor path in KineticJS

2 Answers2