Anchors are not visible in kineticjs?

Question 1

the problem was fixed now. What i was done means , i have added a separate group for each type of shape(like grouprect for rectangle shapes).

Question 2

I'm not a fan of creating anchor objects for resizing rectangles.

For example, the browser you're using to view this post is probably resizable by dragging edge of the browser window. It does not have resizing anchors at all.

Attaching the same set of anchors to different rectangles is certainly achievable, but requires retooling the anchors for each new rectangle. It also requires some logic to let the anchors know which other rectangle to attach themselves to now.

Instead...

Borrow a concept from operating systems and let the outer 10(+/-) border pixels of a rectangle be a resizing handle.

A Demo: http://jsfiddle.net/m1erickson/F6wmv/

Here's an outline of how to do that:

Listen for mouse events.

In mousedown:

Determine if a rectangle is under the mouse
If yes, also determine if the mouse is over one of the 4 side borders
Activate drag-resizing on this rectangle
(Activate means saving which rect is selected and saving which border is selected)
Save the mouse position at the start of the drag
Set a flag indicating that a resizing has begun

In mousemove:

Determine how far the mouse has moved from its starting position
Keep the side of the rectangle that's opposite to the drag border fixed in place
Resize the rectangle based on how far the mouse has moved from its starting position

In mouseup:

Clear the resizing flag (the resizing is over)

About how to actually resize:

Keep the following info about each rectangle:

left side x-coordinate
right side x-coordinate
top side y-coordinate
bottom side y-coordinate

Then when the user is dragging the mouse, change the selected side by the distance the mouse has dragged.

For example, assume:

The user has selected the right side border of a rect to drag-resize with.
The left x-coordinate starts at 100.
The right x-coordinate starts at 200.

The left x-coordinate is fixed during the drag (always == 100)

startingLeftX = 100;

The right x-coordinate changes depending on the distance & direction the mouse is dragged.

startingMouseX = 198;  // the starting mouseX is saved during mousedown

rightX += startingRightX + ( currentMouseX - startingMouseX );

So if the mouse is dragged 50 pixels rightward:

currentMouseX = 248;  // 198+50

rightX = 200 + ( 248 - 198 );  // so the new right-side is at 250

So now the rectangle has been resized 150 pixels wide

newWidth = rightX - leftX;  // 250 - 100 = 150

context.fillRect( leftX, topY, newWidth, oldHeight );

Why resize this way?

Resizing is done in a way already familiar to the user -- dragging borders
No anchors are required (no complicated anchor management code!)
Any existing/new rectangle can be resized using only 4 pieces of info (LeftX, RightX, TopY, BottomY).

Here's code for a working example:

Note: this example shows optional visible dragging anchors.

These anchors are purely cosmetic (you can resize by grabbing any border even outide the anchors)

This example uses html canvas. You can easily adapt it for KineticJS by subscribing to the dragstart, dragmove and dragend events of your kinetic rectangles.

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isDown=false;

    var iW;
    var iH;
    var iLeft=50;
    var iTop=50;
    var iRight,iBottom,iOrientation;

    var img=new Image();
    img.onload=function(){
        iW=img.width;
        iH=img.height;
        iRight=iLeft+iW;
        iBottom=iTop+iH;
        iOrientation=(iW>=iH)?"Wide":"Tall";
        draw(true);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";

    var border=10;
    var isLeft=false;
    var isRight=false;
    var isTop=false;
    var isBottom=false;
    var iAnchor;

    canvas.onmousedown=handleMousedown;
    canvas.onmousemove=handleMousemove;
    canvas.onmouseup=handleMouseup;
    canvas.onmouseout=handleMouseup;


    function hitResizeAnchor(x,y){

        // which borders are under the mouse
        isLeft=(x>iLeft && x<iLeft+border);
        isRight=(x<iRight && x>iRight-border);
        isTop=(y>iTop && y<iTop+border);
        isBottom=(y<iBottom && y>iBottom-border);

        // return the appropriate anchor
        if(isTop && isLeft){ return(iOrientation+"TL"); }
        if(isTop && isRight){ return(iOrientation+"TR"); }
        if(isBottom && isLeft){ return(iOrientation+"BL"); }
        if(isBottom && isRight){ return(iOrientation+"BR"); }
        if(isTop){ return("T"); }
        if(isRight){ return("R"); }
        if(isBottom){ return("B"); }
        if(isLeft){ return("L"); }
        return(null);
    }

    var resizeFunctions={

        T: function(x,y){ iTop=y; },
        R: function(x,y){ iRight=x; },
        B: function(x,y){ iBottom=y; },
        L: function(x,y){ iLeft=x; },

        WideTR: function(x,y){
            iRight=x;
            iTop=iBottom-(iH*(iRight-iLeft)/iW);
        },
        TallTR: function(x,y){
            iTop=y;
            iRight=iLeft+(iW*(iBottom-iTop)/iH);
        },

        WideBR: function(x,y){
            iRight=x;
            iBottom=iTop+(iH*(iRight-iLeft)/iW);
        },
        TallBR: function(x,y){
            iBottom=y;
            iRight=iLeft+(iW*(iBottom-iTop)/iH);
        },

        WideBL: function(x,y){
            iLeft=x;
            iBottom=iTop+(iH*(iRight-iLeft)/iW);
        },
        TallBL: function(x,y){
            iBottom=y;
            iLeft=iRight-(iW*(iBottom-iTop)/iH);
        },

        WideTL: function(x,y){
            iLeft=x;
            iTop=iBottom-(iH*(iRight-iLeft)/iW);
        },
        TallTL: function(x,y){
            iBottom=y;
            iLeft=iRight-(iW*(iBottom-iTop)/iH);
        }
    };

    function handleMousedown(e){
         // tell the browser we'll handle this mousedown
         e.preventDefault();
         e.stopPropagation();
         var mouseX=e.clientX-offsetX;
         var mouseY=e.clientY-offsetY;
         iAnchor=hitResizeAnchor(mouseX,mouseY);
         isDown=(iAnchor);
    }

    function handleMouseup(e){
         // tell the browser we'll handle this mouseup
         e.preventDefault();
         e.stopPropagation();
         isDown=false;
         draw(true);
    }

    function handleMousemove(e){
         // tell the browser we'll handle this mousemove
         e.preventDefault();
         e.stopPropagation();
         // return if we're not dragging
         if(!isDown){return;}
         // get MouseX/Y
         var mouseX=e.clientX-offsetX;
         var mouseY=e.clientY-offsetY;

         // reset iLeft,iRight,iTop,iBottom based on drag
         resizeFunctions[iAnchor](mouseX,mouseY);

         // redraw the resized image
         draw(false);
    }


    function draw(withAnchors){
        var cx=iLeft+(iRight-iLeft)/2;
        var cy=iTop+(iBottom-iTop)/2;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,iLeft,iTop,iRight-iLeft,iBottom-iTop);   
        if(withAnchors){
            ctx.fillRect(iLeft,iTop,border,border);
            ctx.fillRect(iRight-border,iTop,border,border);
            ctx.fillRect(iRight-border,iBottom-border,border,border);
            ctx.fillRect(iLeft,iBottom-border,border,border);
            ctx.fillRect(cx,iTop,border,border);
            ctx.fillRect(cx,iBottom-border,border,border);
            ctx.fillRect(iLeft,cy,border,border);
            ctx.fillRect(iRight-border,cy,border,border);
        }
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Drag image borders (or anchors)</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>