Search code examples
kineticjs

how to resize the line using kineticjs?


I need to resize the line using kineticjs, I am using kinetic-v5.0.1.js and kinetic-v5.0.1.min.js. Can anyone help me out?
Thanks in Advance,


sample code:

var image = group.find('.' + anchorId + '')[0];
 if (anchorId == "line") {
        var startpoint = group.find('.start')[0];
        var endpoint = group.find('.end')[0];
        var anchorX = activeAnchor.x();
        var anchorY = activeAnchor.y();
        switch (activeAnchor.name()) {

            case 'start':
                console.log("x" + lx + ", y" + ly);
                if (event.pageY < ly && event.pageX > lx) {
                    image.Points([startpoint.x + 1, startpoint.y - 1, endpoint.x, endpoint.y]);
                }
                else if (event.pageY < ly && event.pageX < lx) {
                    image.points([startpoint.x - 1, startpoint.y - 1, endpoint.x, endpoint.y]);
                }
                else if (event.pageY > ly && event.pageX > lx) {
                    image.points([startpoint.x + 1, startpoint.y + 1, endpoint.x, endpoint.y]);
                }
                else {
                    image.points([startpoint.x - 1, startpoint.y + 1, endpoint.x, endpoint.y]);
                }
                //image.setPoints([startpoint.x+1, anchorY, endpoint.x, endpoint.y]);
                ly = event.pageY;
                lx = event.pageX;
                layer.draw();
                break;`enter code here`

            case 'end':
                //image.setPosition(activeAnchor.getPosition());
                image.points([startpoint.x, startpoint.y, anchorX, anchorY]);
                layer.draw();
                break;
        }

image defines the shape , start and end are anchors of line when click and drag of any anchor line needs to resize. this code works fine to resize rectangle, circle and text its not working for line.


Solution

  • A Kinetic.Line is controlled by its points property.

    To change a line you can change its points:

    myLine.points([50,50, 100,100]);
    
    layer.draw();