Kineticjs - 如何在更改大小後更新x和y位置

Question

當使用頂部或底部調整組大小時左側錨點組的x和y位置未更新。 This is my fiddle（打開控制檯和調整。該集團的x，y將是相同的）

function update(activeAnchor) { 
     var group = activeAnchor.getParent(); 

     var topLeft = group.get('.topLeft')[0]; 
     var topRight = group.get('.topRight')[0]; 
     var bottomRight = group.get('.bottomRight')[0]; 
     var bottomLeft = group.get('.bottomLeft')[0]; 
     var image = group.get('.highlight')[0]; 

     var anchorX = activeAnchor.getX(); 
     var anchorY = activeAnchor.getY(); 

     // update anchor positions 
     switch (activeAnchor.getName()) { 
      case 'topLeft': 
       topRight.setY(anchorY); 
       bottomLeft.setX(anchorX); 
       break; 
      case 'topRight': 
       topLeft.setY(anchorY); 
       bottomRight.setX(anchorX); 
       break; 
      case 'bottomRight': 
       bottomLeft.setY(anchorY); 
       topRight.setX(anchorX); 
       break; 
      case 'bottomLeft': 
       bottomRight.setY(anchorY); 
       topLeft.setX(anchorX); 
       break; 
     } 

     image.setPosition(topLeft.getPosition()); 

     var width = topRight.getX() - topLeft.getX(); 
     var height = bottomLeft.getY() - topLeft.getY(); 
     if (width && height) { 
      image.setSize(width, height); 
     } 
    } 
    function addAnchor(group, x, y, name) { 
     var stage = group.getStage(); 
     var layer = group.getLayer(); 

     var anchor = new Kinetic.Circle({ 
      x: x, 
      y: y, 
      stroke: '#666', 
      fill: '#ddd', 
      strokeWidth: 2, 
      radius: 8, 
      name: name, 
      draggable: true, 
      dragOnTop: false 
     }); 

     anchor.on('dragmove', function() { 
      update(this); 
      layer.draw(); 
     }); 
     anchor.on('mousedown touchstart', function() { 
      group.setDraggable(false); 
      this.moveToTop(); 
     }); 
     anchor.on('dragend', function() { 
      group.setDraggable(true); 
      layer.draw(); 
      Diagnostics(layer); 
     }); 
     // add hover styling 
     anchor.on('mouseover', function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = 'pointer'; 
      this.setStrokeWidth(4); 
      layer.draw(); 
     }); 
     anchor.on('mouseout', function() { 
      var layer = this.getLayer(); 
      document.body.style.cursor = 'default'; 
      this.setStrokeWidth(2); 
      layer.draw(); 
     }); 

     group.add(anchor); 
    } 

    function initStage() { 
     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 578, 
      height: 400 
     }); 

     var testGroup = new Kinetic.Group({ 
      x: 20, 
      y: 50, 
      draggable: true 
     }); 

     var layer = new Kinetic.Layer(); 

     layer.add(testGroup); 
     stage.add(layer); 


     // test 
     var testImg = new Kinetic.Rect({ 
      x: 0, 
      y: 0, 
      fill:'green', 
      width: 93, 
      height: 104, 
      name: 'highlight' 
     }); 

     testGroup.add(testImg); 
     addAnchor(testGroup, 0, 0, 'topLeft'); 
     addAnchor(testGroup, 93, 0, 'topRight'); 
     addAnchor(testGroup, 93, 104, 'bottomRight'); 
     addAnchor(testGroup, 0, 104, 'bottomLeft'); 

     testGroup.on('dragstart', function() { 
      this.moveToTop(); 
     }); 

     testGroup.on('dragend', function() { 
      this.moveToTop(); 
      Diagnostics(testGroup) 
     }); 
     stage.draw(); 
    } 
    function Diagnostics(obj) { 
     var json = obj.toJSON() 
     console.log(json); 
    }; 

    initStage(); 

如何更新X，該集團的y位置？

Answer 1

好吧，我想我已經找到了解決我的問題（雖然也許有更好的方法？） 而不是嘗試更新我的組的x，y我只是更新組內的圖像（綠色rect）併爲其添加額外的屬性，以便我可以在服務器上讀取它們。 萬一有人需要它，我已經創建了一個功能：

function UpdatePosition(obj) { 
     var x = obj.getAbsolutePosition().x 
     var y = obj.getAbsolutePosition().y 
     obj.setAttr('x_pos', x); 
     obj.setAttr('y_pos', y); 

    }; 

，並呼籲它只是在更新功能的結束（見代碼在我的問題）

updatePosition(image);