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);