Kineticjs：如何使用 kineticjs 使用钢笔工具？

Question

我想通过 kineticjs 使用钢笔工具（如 photo shop）， 我不知道如何实现这一点。

这是否可能？如果可能，请帮助我找出解决方案。

我正在使用 kinetic-v5.0.1.min.js 和 kinetic-v5.0.1.js 文件。

提前致谢。

Answer 1

你尝试了什么？搜索后发现了什么？无论如何，您必须在舞台上监听鼠标事件，然后绘制Kinetic.Line。 Stackoverflow 上的这两个问题应该会对您有所帮助，以防您没有看到它们。

KineticJS - Drawing Lines with Mouse

Kinetic.js - Draw a freehandline by following mousepointer

Answer 2

这是一个完整的解决方案。

工作演示：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

        };
    }