Kineticjs: how to use pen tool using kineticjs?

Question

I would like to use pen tool (like photo shop) using kineticjs, I don't have any idea about how to achieve this.

whether it is possible or not?. If possible means help me to find out the solution.

I am using kinetic-v5.0.1.min.js and kinetic-v5.0.1.js files.

Thanks in advance.

Answer 1

Here is a complete solution.

Working Demo: http://jsfiddle.net/JSdc2/LjJ8W/

 document.body.addEventListener( 'mousedown', startListening, false );

    // -- /init


    // add ins for testing

    var stage = new Kinetic.Stage({

        width: window.innerWidth - 30,
        height: window.innerHeight - 70,
        container: 'container'

    });

    var freeHandLayer = new Kinetic.Layer({

        x:0,
        y:0,
        width: window.innerWidth/2,
        height: window.innerHeight/2

    });

    var background = new Kinetic.Rect({

        width: window.innerWidth - 30,
        height: window.innerHeight - 70,
        fill: '#DDDDDD'

    });

    freeHandLayer.add( background );
    stage.add( freeHandLayer );

    // -- /add ins


  var ctx = freeHandLayer.getContext('2d');

    // ------- freeHand Functions
    // thanks to http://nick.zoic.org/

    function draw_marker(x, y, r) {

        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI*2);
        ctx.closePath();
        ctx.fillStyle = "#0F0";
        ctx.fill();

    }

    function draw_segment(x1, y1, x2, y2) {

        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = "#0F0";
        ctx.stroke();
        ctx.closePath();

    }

    // -----

    var pos, ox, oy, xys, nx, ny, dx, dy, dd;
    var points = [];
    var xnums = [];
    var ynums = [];


    function startListening() {

        points=[]; // clear array 
        xnums=[];
        ynums=[];

        pos = stage.getPointerPosition();

        ox = pos.x;
        oy = pos.y;
        xnums[0] = ox;
        ynums[0] = oy;

        document.body.removeEventListener( 'mousedown', startListening );
        document.body.addEventListener( 'mousemove', handleMovement, false );

    }

    function handleMovement() {

        document.body.addEventListener('mouseup', finalizeSpline, false );

         pos = stage.getPointerPosition();
         nx = pos.x;
         ny = pos.y;

         dx = nx - ox;
         dy = ny - oy;
         dd = Math.sqrt(dx*dx + dy*dy);

        if (dd > 10) {
            draw_segment(ox, oy, nx, ny);
            xnums.push(nx);
            ynums.push(ny);
            ox = nx;
            oy = ny;
        }
    }

    var ID = 0;
    var customShape = [];

    function finalizeSpline() {

        ID++;

        document.body.removeEventListener('mousemove', handleMovement );
        document.body.removeEventListener('mouseup', finalizeSpline );

        for ( var i = 0; i < xnums.length; i++ ) {

            points.push (xnums[ i ]);
            points.push (ynums[ i ]);

        }

        // Create a Group for the new shape to live inside

        customShape[ID] = new Kinetic.Group({

            x: 0,
            y: 0,
            rotationDeg: 0

         });

        customShape[ID].id = 'L06customShape' + ID;
        customShape[ID].attrs.id = 'L06customShape' + ID;
        customShape[ID].selectable = true; 
        customShape[ID].selectStyle = "group" ;
        customShape[ID].colorable = true;
        customShape[ID].colorStyle = "single" ;
        customShape[ID].description = "A custom shape." ;
        customShape[ID].difficulty = 1;

        // Create the shape from user input

        var spline = new Kinetic.Line({

            id:'L06spline' + ID,
            points: points, // uses the points we collected from user pointer movement
            tension: 0, // TO DO: don't like the range Kinetic offers 0 to 1, create something better.
            closed: false,
            fill: '#ccc',
            draggable: true

          });

        // add some tweaks

        customShape[ID].on('mousedown touchstart', function( e ) { signals.mouseDown.dispatch( this, e ); });
        customShape[ID].on('mouseup touchend', function( e ) { signals.mouseUp.dispatch( this, e ); });

        customShape[ID].add( spline );
        customShape[ID].className = 'Blob';

        freeHandLayer.add( customShape[ID] );
    document.body.addEventListener( 'mousedown', startListening, false );

    }

       function getPointerPos( e ) {

        var position = ctx.getBoundingClientRect();

        return {

            x: e.clientX - position.left,
            y: e.clientY - position.top

        };
    }