Question

I need the user to draw line in a circle and then rotate the circle including the lines.
However, if i use a “group” to group the circle , then draw the lines, the lines are not drawn in the circle.

after this if i move the group the lines are not drawn in the circle but some where else on the layer.

Any help or suggestion would be much appreciated.
Thanks

working copy:
click begin, then click on two red circles beside the circle next to undo button

Micbiology game link

here is the code: i first get the x an y co-ordinates on click and then draw a line on mouse move

petriDish.on("click", function(event) {        

    var item = new UndoObjects();
    item.id= this.getId();
    item.name = this.getName();
    item.Xaxis = this.getX();
    item.Yaxis = this.getY();
    item.itemLayer = 'itemsLayer';
    undoManager.push(item);

    if(petridishGroup.getLayer().getName() == 'gamePlayLayer')
    {
        CanPerformStreaking();
        petridishGroup.setDraggable(true);

        gamePlayLayer.draw();
        itemsLayer.draw();

        document.body.style.cursor = "default";
        x= event.layerX;
        y= event.layerY;
        startX = x; 
        startY = y;

        // if click and were drawing then stop drawing 
        if(drawing)
        {
            drawing = false;
            clearInterbal(mouseStopTimer);                  
        }
        else{
            drawing = true;  
            MoveStopDetector();
        }
    }else
    {
        //this.setY(notificationLayer.getY()+120);
        petridishGroup.moveTo(gamePlayLayer);            
        petriDish.setRadius(50);
        itemsLayer.draw();
    }                  

    petriDish.draggable = false; 
});

petriDish.on("mouseover mousemove", function(event) {
    document.body.style.cursor = "pointer";

    if(petridishGroup.getLayer().getName() != 'gamePlayLayer')
    {
        petriDish.setRadius(40);
        itemsLayer.draw();
    }  
    else{
        if(drawing)
        {
            clearInterval(mouseStopTimer);                    
            MoveStopDetector();
            if(x >0 && y> 0 && drawing && allowStreaking)
            {
                var redLine = new Kinetic.Line({
                    points: [x,y, event.layerX, event.layerY],
                    stroke: "red",
                    strokeWidth: 3,
                    lineCap: "round",
                    lineJoin: "round"
                });
                x = event.layerX;
                y = event.layerY;

                petridishGroup.add(redLine);
                petridishGroup.setDraggable(true);
                petriDish.draggable=false;     
                gamePlayLayer.draw();                     
            }
        }   
    }

});

Answer 1

Solution is to place the circle at the top left corner of the group, these co-ordinates being 0,0 which will be the center of the circle.

Also when drawing the lines on mouse move, get the mouse co-ordinates relative to the layer and then subtracting the position of the group from the mouse co-ordinates which will give the
x and y points relative to the group.

var newX = event.layerX - group.getX();
var newY = event.layerY - group.getY();

newX and newY are points relative to the group’s co-ordinates 0,0