Javascript Kinetic.js旋转组对象的新子对象具有不正确的偏移

我需要用户画一个圆线，然后旋转包括线的圆。 但是，如果我使用“组”对圆进行分组，然后绘制线，则线不会在圆中绘制

在此之后，如果我移动组，则不会在圆中绘制线，而是在层的其他位置绘制线

任何帮助或建议都将不胜感激。 谢谢

工作副本： 单击开始，然后单击“撤消”按钮旁边圆圈旁边的两个红色圆圈

下面是代码：我首先在单击时获得x和y坐标，然后在鼠标移动时绘制一条线

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();                     
            }
        }   
    }

});

---

解决方案是将圆放置在组的左上角，这些坐标为0,0，这将是圆的中心

同样，在鼠标移动时绘制线条时，获取鼠标相对于图层的坐标，然后从鼠标坐标中减去组的位置，这将给出 相对于组的x和y点

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

---

newX和newY是相对于组坐标0,0的点，我假设在您使用的绘图方法中使用

ctx.rotate（）

？查看转换。您的问题可以通过一些简单的

ctx.save（）、ctx.translate（）、ctx.rotate（）、ctx.restore（）转换来解决。