KineticJS在一個舞臺上拖動對象導致在另一個舞臺上移動對象

我的頁面上有兩個階段;當我用相同的值拖動第一個階段的一行時，我想在第二個階段移動一行。這是我的腳本：KineticJS在一個舞臺上拖動對象導致在另一個舞臺上移動對象

<script src="../../Scripts/KineticJS.js" type="text/javascript"></script> 
    <div id="container1" style="width: 512px; height: 512px;"> 
    </div> 
    <div id="container2" style="width: 512px; height: 512px;"> 
    </div> 
    <script type="text/javascript"> 
     var stage2 = new Kinetic.Stage({ 
      container: 'container2', 
      width: 512, 
      height: 512 
     }); 
     var Greenlinelayer2 = new Kinetic.Layer(); 
     var GreenLine2 = new Kinetic.Line({ 
      points: [0, 256, 512, 256], 
      stroke: '#00ff00', 
      strokeWidth: 2, 
      lineCap: 'round', 
      lineJoin: 'round', 
      draggable: true, 
      dragBoundFunc: function (pos) { 
      if (GreenLine1) { 
      GreenLine1.points = [0, 256 + pos.y, 512, 256 + pos.y]; 
      } 
      return { 
       x: this.getAbsolutePosition().x, 
       y: pos.y 
      } 
     } 
     }); 
     Greenlinelayer2.add(GreenLine2); 
     Greenlinelayer2.draw(); 
     stage2.add(Greenlinelayer2); 
     var stage1 = new Kinetic.Stage({ 
      container: 'container1', 
      width: 512, 
      height: 512 
     }); 
     var Greenlinelayer1 = new Kinetic.Layer(); 
     GreenLine1 = new Kinetic.Line({ 
     points: [0, 256, 512, 256], 
     stroke: '#00ff00', 
     strokeWidth: 2, 
     lineCap: 'round', 
     lineJoin: 'round', 
     draggable: true, 
     dragBoundFunc: function (pos) { 
      return { 
       x: this.getAbsolutePosition().x, 
       y: pos.y 
      } 
     } 
     }); 
     Greenlinelayer1.add(GreenLine1); 
     Greenlinelayer1.draw(); 
     stage1.add(Greenlinelayer1); 
    </script>

我希望你的建議，在此先感謝。

來源

2013-03-16 hncl

你可以設置一個Greenline1 「dragend」事件處理程序，設置X/Greenline2 Y的

GreenLine1.on('dragend', function(event) { 
    GreenLine2.setX(GreenLine1.getX()); 
    GreenLine2.setY(GreenLine1.getY()); 
    Greenlinelayer2.draw(); 
});

全碼：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 

</style> 

<script> 
    $(function(){ 

     var stage2 = new Kinetic.Stage({ 
      container: 'container2', 
      width: 512, 
      height: 512 
     }); 
     var Greenlinelayer2 = new Kinetic.Layer(); 
     var GreenLine2 = new Kinetic.Line({ 
      points: [0, 256, 512, 256], 
      stroke: '#00ff00', 
      strokeWidth: 15, 
      lineCap: 'round', 
      lineJoin: 'round', 
      draggable: true, 
      dragBoundFunc: function (pos) { 
      if (GreenLine1) { 
      GreenLine1.points = [0, 256 + pos.y, 512, 256 + pos.y]; 
      } 
      return { 
       x: this.getAbsolutePosition().x, 
       y: pos.y 
      } 
     } 
     }); 
     Greenlinelayer2.add(GreenLine2); 
     Greenlinelayer2.draw(); 
     stage2.add(Greenlinelayer2); 
     var stage1 = new Kinetic.Stage({ 
      container: 'container1', 
      width: 512, 
      height: 512 
     }); 
     var Greenlinelayer1 = new Kinetic.Layer(); 
     GreenLine1 = new Kinetic.Line({ 
     points: [0, 256, 512, 256], 
     stroke: '#ff0000', 
     strokeWidth: 25, 
     lineCap: 'round', 
     lineJoin: 'round', 
     draggable: true, 
     dragBoundFunc: function (pos) { 
      return { 
       x: this.getAbsolutePosition().x, 
       y: pos.y 
      } 
     } 
     }); 
     Greenlinelayer1.add(GreenLine1); 
     Greenlinelayer1.draw(); 
     stage1.add(Greenlinelayer1); 

    GreenLine1.on('dragend', function(event) { 
    GreenLine2.setX(GreenLine1.getX()); 
    GreenLine2.setY(GreenLine1.getY()); 
    Greenlinelayer2.draw(); 
    }); 

    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <div id="container1" style="width: 512px; height: 512px;"> 
    </div> 
    <div id="container2" style="width: 512px; height: 512px;"> 
    </div> 
</body> 
</html>

來源

2013-03-16 02:07:03 markE

感謝馬克，我得到GreenLine2.setY錯誤，這個點應該是=？ – hncl 2013-03-16 02:23:52

糟糕，我編輯了代碼。我不應該使用var，我忘了draw（）; – markE 2013-03-16 02:38:59

非常感謝。 – hncl 2013-03-16 02:48:03

KineticJS在一個舞臺上拖動對象導致在另一個舞臺上移動對象

回答

相關問題