Question

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

之后如果移动组，则不会在圆圈中绘制线条，而是在图层上的其他位置绘制线条。

非常感谢任何帮助或建议。感谢

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

这里是代码：我首先获得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();                     
            }
        }   
    }

});

Answer 1

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

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

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

newX和newY是相对于组的坐标0,0

的点

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

1 个答案: