To select any Dynamic shapes added to the canvas in kinetic.js

Question

Let me explain what i have done. Firstly I have made a stage and than added rectangle of the same size as stage to the stage. After that i have defined certain function which can draw the rectangle dynamically on MOUSE-DOWN event. Till this every thing went right, After that what i need is that when i double click any shape than I cannot change the color of that shape.

Let see the code below-

<!DOCTYPE html>
<html>
    <head>
        <title>Drawing the custom shapes</title>

        <script src="kinetic-v4.6.0.min.js"></script>

        <script defer="defer">
            function Execute()
            {
                //Defining the stage
                var stage= new Kinetic.Stage({
                    container:'container',
                    width:400,
                    height:400
                });

                //Adding a rectangle layer

                var backLayer= new Kinetic.Rect({
                    x:0,
                    y:0,
                    width:stage.getWidth(),
                    height:stage.getHeight(),
                    fill:'black'

                });
                // Creating a layer
                var layer= new Kinetic.Layer();
                //Adding the background to it!
                layer.add(backLayer);
                stage.add(layer);

                //============ADDING THE FUNCTIONALITY FOR THE RECTANGLE=================
                //Defining the variables
                var isMouseDown=false;
                var refRect,refRect1;
                var Enable=false;
                var originX= new Array();
                var originY=new Array()

                backLayer.on('mousedown',function(){
                    onMouseDown();
                });

                backLayer.on('mousemove',function(){
                    onMouseMove();
                });

                backLayer.on('mouseup',function(){
                    onMouseUp();
                });

                //Defining the global variables
                var initialX=10, initialY=10;

                //Defining the functions
                function onMouseDown()
                {
                    //Code goes here

                    //Setting the mouse
                    isMouseDown=true;

                    //Getting the coordinates
                    var pointerPosition= stage.getPointerPosition();

                    //Reflush the array
                    originX=[];
                    originY=[];
                    originX.push(pointerPosition.x);
                    originY.push(pointerPosition.y);

                    //Creating the rectangle Shape
                     var rect= new Kinetic.Rect({
                        x:originX[0],
                        y:originY[0],
                        width:0,
                        height:0,
                        stroke:'white',
                        strokeWidth:4,
                        name:'Rectangle'

                    });
                    //Creating a copy of it!
                    refRect=rect;
                    refRect1=rect;  //<<<<<<Recently created rectangle as active
                    rect.setListening(true);

                    // Adding to the layer
                    layer.add(rect);
                    Enable=false;
                    //stage.add(layer);

                }

                //<<<<<<<<<<<<<<CODE TO CHANGE THE COLOR OF THE SELECTED SHAPE
                stage.on('dblclick',function(evt){
                    var selected1=evt.targetNode;
                   // var selected=evt.targetNode;
                    alert(selected1.setFill('red'));

                });


                function onMouseMove()
                {
                    //Code goes here

                    if(!isMouseDown)   // ie, is mouse pointer not down iff true than return
                    {
                        return;
                    };
                    var pointerPosition= stage.getPointerPosition();
                    refRect.setWidth(pointerPosition.x-refRect.getX());
                    refRect.setHeight(pointerPosition.y-refRect.getY());
                    layer.drawScene();

                }

                function onMouseUp()
                {
                    isMouseDown=false;
                    stage.add(layer);
                }


            }
        </script>
    </head>

    <body onload="Execute()">
        <div id="container" style="width: 400px; height: 400px; border: 1px solid red"></div><br/>
        <input type="button" id="fill" value="FILL">
    </body>

</html>

please let me know what the problem behind this, and why i am unable to select that particular shape

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

You need to use the draw() or drawScene() function after performing changes to the stage/layer so that they can be rendered onto the scene.

//<<<<<<<<<<<<<<CODE TO CHANGE THE COLOR OF THE SELECTED SHAPE
stage.on('dblclick',function(evt){
    var selected1=evt.targetNode;
    selected1.setFill('red');
    stage.draw(); //or layer.draw();
});

See this question for more information about the differences between Kinetic Draw functions: What is the difference between KineticJS draw methods?

edited May 23 '17 at 12:28

Community

1
1

answered Sep 11 '13 at 13:40

projeqht

3,160
3
18
32

1

thanks....projeqht. I was literally worried on this ...and yopu solved it thanks. – Anurag Singh Sep 11 '13 at 13:54
No worries, don't forget console.log is your friend! When in doubt, use console.log(evt.targetNode); to see if it's selecting properly, and check out the properties of the object :) – projeqht Sep 11 '13 at 14:07

To select any Dynamic shapes added to the canvas in kinetic.js

1 Answers1