嵌套組不保持絕對位置

Question

我發現了嵌套組的幾個問題。

從一段代碼開始。我已經對動態庫的v4.2.0和4.3.1都試過這個代碼。每個版本都給我不同的行爲，但都不是正確的，所以我會描述兩者。下面是代碼：

<script> 

     var stage = new Kinetic.Stage({ 
      container: "container", 
      x: 0, 
      y: 0, 
      width: 1000, 
      height: 800 
     }); 

     var layer = new Kinetic.Layer(); 
     stage.add(layer); 

     var grp1 = new Kinetic.Group(
     { 
      id: 'grp1', 
      name: 'grp1', 
      height: 100, 
      width: 100, 
      draggable: true 
     }); 
     grp1.setAbsolutePosition(100, 100); 

     var sqr1 = new Kinetic.Rect({ 
      x: 100, 
      y: 100, 
      width: 100, 
      height: 100, 
      fill: '#FFFFFF', 
      stroke: '#000000', 
      strokeWidth: .4, 
      id: 'sqr1', 
      name: 'sqr1' 
     }); 
     grp1.add(sqr1); 

     var grp2 = new Kinetic.Group(
     { 
      id: 'grp2', 
      name: 'grp2', 
      height: 50, 
      width: 50, 
      draggable: true 
     }); 
     grp2.setAbsolutePosition(110, 110); 

     var sqr2 = new Kinetic.Rect({ 
      x: 110, 
      y: 110, 
      width: 50, 
      height: 50, 
      fill: '#FFFFFF', 
      stroke: '#00FF00', 
      strokeWidth: .4, 
      id: 'sqr2', 
      name: 'sqr2' 
     }); 

     grp2.add(sqr2); 
     grp1.add(grp2); 

     layer.add(grp1); 

     grp2.on('click', function (evt) { 
      var pos = grp2.getAbsolutePosition(); 
      alert(pos.x + ', ' + pos.y); 
     }); 

     layer.draw(); 
</script> 

如果你運行這個對V4.2.0，你會看到GRP2放置不110，110相對於舞臺，但在210，210相對於舞臺（點擊在綠色的廣場上看到它的位置）。我嘗試刪除setAbsolutePosition調用，然後它將正確繪製組，但是如果拖動組然後再次單擊綠色方塊，則會看到該位置現在相對於嵌套組的初始位置，而不是階段。

如果您針對v4.3.1運行上述代碼，您將看到第二個組再次被放置在相對於舞臺的210,210處。如果您嘗試在此版本下點擊綠色方塊，則會顯示位置，然後sqaure將完全消失，不會拋出任何javascript錯誤。我有很多使用嵌套組的代碼，當我嘗試升級到4.3.1時，這種情況發生在每個地方 - 當我點擊組時，事情就會消失。我已經在IE9和Firefox中嘗試了這一結果。

有沒有人有任何建議如何獲得正確的絕對位置嵌套組？

Answer 1

http://jsfiddle.net/tbYLe/2/

你有一個額外的屬性添加到您的論壇dragOnTop「（4.3.1使用）

var grp1 = new Kinetic.Group(
    { 
     id: 'grp1', 
     name: 'grp1', 
     height: 100, 
     width: 100, 
     draggable: true, 
     dragOnTop: false //<-- right here is what you need, add this to your other group too 
    }); 

這可以防止元素被放置在一個新的層，而拖放將解決你正在消失的方形問題。

關於絕對位置：

您需要設置絕對位置你嵌套組完成後，不創建它們之後。看看：

grp1.add(sqr1); 
    grp2.add(sqr2); 

    grp1.add(grp2);      //nested groups 

    grp1.setAbsolutePosition(100, 100); //set absolute position after nesting groups 
    grp2.setAbsolutePosition(110, 110); //set absolute position after nesting groups 

    layer.add(grp1);