0

I have two stages on my page; I would like to move a line on the second stage when I drag a line of the first stage by the same values. Here is my script:

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

I would appreciate your suggestions, thanks in advance.

4

1 回答 1

2

You could set a "dragend" event handler for Greenline1 that sets the X/Y of Greenline2

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

Full code:

<!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-16T02:07:03.747 回答