0

ユーザーが円に線を描いてから、線を含む円を回転させる必要があります。ただし、「グループ」を使用して円をグループ化し、線を描画すると、線は円に描画されません。

この後、グループを移動すると、線は円ではなく、レイヤーの他の場所に描画されます。

どんな助けや提案も大歓迎です。ありがとう

作業コピー: [開始] をクリックし、[元に戻す] ボタンの横にある円の横にある 2 つの赤い円をクリックします。

微生物学ゲーム リンク

ここにコードがあります：私は最初にクリックで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 に答える