KineticJs錨點不會在同一組中跟隨矩形

我抓住了一個縮放和從HTML5 Canvas Tutorials拖動圖像的工作示例，但我希望使用矩形實現相同的效果。KineticJs錨點不會在同一組中跟隨矩形

當我調整代碼以使用Rect s時，錨停止在Rect之後。獲得這項工作的祕訣是什麼？

感謝您的任何提示！

<!DOCTYPE HTML> 
<html> 
<head> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script> 

    <style> 
     #container{ 
      float:left; 
      border:1px solid red; 
      width:930px; 
      height:400px; 
     } 
    body { 
    margin: 0px; 
    padding: 0px; 
    } 
</style> 
</head> 
<body onmousedown="return false;"> 
<div id="container"></div> 
<script> 
    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 mask = group.get('.mask')[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; 
    } 

    mask.setPosition(topLeft.getPosition()); 

    var width = topRight.getX() - topLeft.getX(); 
    var height = bottomLeft.getY() - topLeft.getY(); 
    if(width && height) { 
     mask.setSize(width, height); 
    } 
    } 

    function addAnchor(group, x, y, name) { 
    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(); 
    }); 
    // 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: 930, 
     height: 400 
    }); 
    var redGroup = new Kinetic.Group({ 
     x: 270, 
     y: 100, 
     draggable: true 
    }); 
    var greenGroup = new Kinetic.Group({ 
     x: 100, 
     y: 110, 
     draggable: true 
    }); 
    var layer = new Kinetic.Layer(); 

    layer.add(redGroup); 
    layer.add(greenGroup); 
    stage.add(layer); 

    // red 
    var redRect = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     name: 'mask', 
     width: 100, 
     height: 100, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 1, 
     opacity:0.5, 
     draggable:true 
    }); 

    redGroup.add(redRect); 
    addAnchor(redGroup, 0, 0, 'topLeft'); 
    addAnchor(redGroup, 100, 0, 'topRight'); 
    addAnchor(redGroup, 100, 100, 'bottomRight'); 
    addAnchor(redGroup, 0, 100, 'bottomLeft'); 

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

    // green 
    var greenRect = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     name: 'mask', 
     width: 100, 
     height: 100, 
     fill: 'green', 
     stroke: 'black', 
     strokeWidth: 1, 
     opacity:0.5, 
     draggable:true 
    }); 

    greenGroup.add(greenRect); 
    addAnchor(greenGroup, 0, 0, 'topLeft'); 
    addAnchor(greenGroup, 100, 0, 'topRight'); 
    addAnchor(greenGroup, 100, 100, 'bottomRight'); 
    addAnchor(greenGroup, 0, 100, 'bottomLeft'); 

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

    stage.draw(); 
    } 

    initStage(); 

</script> 

</body> 
</html>

來源

2013-12-12 Dakisan

因爲使您的矩形可拖動，只要刪除它，它的工作原理。順便說一句，感謝您的解決方案，我需要一些非常相似的東西。 :)

這裏是你的工作之一：

<!DOCTYPE HTML> 
<html> 
<head> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script> 
    <style> 
     #container { 
      float: left; 
      border: 1px solid red; 
      width: 930px; 
      height: 400px; 
     } 

     body { 
      margin: 0px; 
      padding: 0px; 
     } 
    </style> 
</head> 
<body onmousedown="return false;"> 
    <div id="container"></div> 
    <script> 
     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 mask = group.get('.mask')[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; 
      } 

      mask.setPosition(topLeft.getPosition()); 

      var width = topRight.getX() - topLeft.getX(); 
      var height = bottomLeft.getY() - topLeft.getY(); 
      if (width && height) { 
       mask.setSize(width, height); 
      } 
     } 

     function addAnchor(group, x, y, name) { 
      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(); 
       update(this); 
      }); 
      // 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: 930, 
       height: 400 
      }); 
      var redGroup = new Kinetic.Group({ 
       x: 270, 
       y: 100, 
       draggable: true 
      }); 
      var greenGroup = new Kinetic.Group({ 
       x: 100, 
       y: 110, 
       draggable: true 
      }); 
      var layer = new Kinetic.Layer(); 

      layer.add(redGroup); 
      layer.add(greenGroup); 
      stage.add(layer); 

      // red 
      var redRect = new Kinetic.Rect({ 
       x: 0, 
       y: 0, 
       name: 'mask', 
       width: 100, 
       height: 100, 
       fill: 'red', 
       stroke: 'black', 
       strokeWidth: 1, 
       opacity: 0.5 
      }); 

      redGroup.add(redRect); 
      addAnchor(redGroup, 0, 0, 'topLeft'); 
      addAnchor(redGroup, 100, 0, 'topRight'); 
      addAnchor(redGroup, 100, 100, 'bottomRight'); 
      addAnchor(redGroup, 0, 100, 'bottomLeft'); 

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

      // green 
      var greenRect = new Kinetic.Rect({ 
       x: 0, 
       y: 0, 
       name: 'mask', 
       width: 100, 
       height: 100, 
       fill: 'green', 
       stroke: 'black', 
       strokeWidth: 1, 
       opacity: 0.5 
      }); 

      greenGroup.add(greenRect); 
      addAnchor(greenGroup, 0, 0, 'topLeft'); 
      addAnchor(greenGroup, 100, 0, 'topRight'); 
      addAnchor(greenGroup, 100, 100, 'bottomRight'); 
      addAnchor(greenGroup, 0, 100, 'bottomLeft'); 

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

      stage.draw(); 
     } 

     initStage(); 

    </script> 

</body> 
</html>

來源

2013-12-13 00:00:12 Abs

真棒，謝謝這是完美的！ – Dakisan

KineticJs錨點不會在同一組中跟隨矩形

回答

相關問題