0

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

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

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

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

微生物学游戏链接

这是代码：我首先在单击时获取 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();                     
            }
        }   
    }

});
4

1 回答 1

0

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

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

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

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

于 2012-07-25T14:53:15.407 回答