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

New children of a Kinetic.js rotated group object have incorrect offsets

本文关键字:对象 不正确 js 旋转 Kinetic      更新时间:2024-01-29

我需要用户在圆中画一条线,然后旋转包括这些线的圆。然而,如果我用一个"组"来分组圆,然后画线,这些线就不会画在圆里。

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

如有任何帮助或建议,我们将不胜感激。感谢

工作副本:单击开始,然后单击圆圈旁边的两个红色圆圈以撤消按钮

微生物学游戏链接

这是代码:我首先点击获得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 的点