Create dynamic rectangle/box using easelJs or KineticJs

StackOverflow https://stackoverflow.com/questions/13737221

Question

Hi I am looking to make a floor plan editor (something like MsPaint) using JavaScript. I have shortlisted EaselJS or KinetiJS as my preferred libraries.

I would like to know how to create a dynamic rectangular box/line with these libraries. I intend to draw a rectangle by clicking the mouse and dragging it (while the mouse button remains pressed). Thus the size of the rectangle will depend on how far the mouse is dragged.

Any help will be appreciated. If anyone feels that any other library like fabrisJs or paperJs will be better alternative then I am open to solutions in these libraries as well.

Was it helpful?

Solution

Ok... by trial and error and lots of googling and reusing net code I got the answer for KineticJs.

Heres the complete solution:

http://jsfiddle.net/sandeepy02/8kGVD/

<html>
    <head>
        <script>
            window.onload = function() {
                layer = new Kinetic.Layer();
                stage = new Kinetic.Stage({
                    container: "container",
                    width: 320,
                    height: 320
                });

                background = new Kinetic.Rect({
                    x: 0, 
                    y: 0, 
                    width: stage.getWidth(),
                    height: stage.getHeight(),
                    fill: "white"
                });


                layer.add(background);
                stage.add(layer);

                moving = false;

                stage.on("mousedown", function(){
                    if (moving){
                        moving = false;layer.draw();
                    } else {
                        var mousePos = stage.getMousePosition();
                        rect= new Kinetic.Rect({
        x: 22,
        y: 7,
        width: 0,
        height: 0,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
                        });
                        layer.add(rect);
                        //start point and end point are the same
                        rect.setX(mousePos.x);
                        rect.setY(mousePos.y);
                        rect.setWidth(0);
                        rect.setHeight(0);


                        moving = true;    
                        layer.drawScene();            
                    }

                });

                stage.on("mousemove", function(){
                    if (moving) {
                        var mousePos = stage.getMousePosition();
                        var x = mousePos.x;
                        var y = mousePos.y;
                        rect.setWidth(mousePos.x-rect.getX());
                        rect.setHeight(mousePos.y-rect.getY());
                        moving = true;
                        layer.drawScene();
                    }
                });

                stage.on("mouseup", function(){
                    moving = false; 
                });

            };
        </script>
    </head>
    <body>
        <div id="container" ></div>
    </body>
</html>
​
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top