Question

我的页面上有两个阶段;当我用相同的值拖动第一阶段的一行时，我想在第二阶段移动一条线。这是我的剧本：

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

我很感激你的建议，谢谢你。

Answer 1

你可以为Greenline1设置一个“dragend”事件处理程序来设置Greenline2的X / 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>

KineticJS在一个舞台上拖动一个对象导致在另一个舞台上移动一个对象

1 个答案: