Button 我如何创建一个按钮，循环通过所有的行变量，使一次一个可见？_Button_Kineticjs

Button 我如何创建一个按钮，循环通过所有的行变量，使一次一个可见？

button

Button 我如何创建一个按钮，循环通过所有的行变量，使一次一个可见？,button,kineticjs,Button,Kineticjs,我如何创建一个按钮，循环通过所有的行变量，使一次一个可见我使用的是Dynamic Javascript，我想制作一个按钮，在所有行变量之间循环，每次单击该按钮，它都会将下一行的可见性变为“true”，将前一行的可见性变为“false” 以下是我目前的代码：显示隐藏改道 var阶段=新的动力学阶段({ 容器：'容器'，宽度：1700，身高：1100 }); //创建要放置在舞台上的层 //请注意，我们可以将建筑地图本身作为一个图层，并且-- //--把这些多层叠放在一起。 var l

我如何创建一个按钮，循环通过所有的行变量，使一次一个可见

我使用的是Dynamic Javascript，我想制作一个按钮，在所有行变量之间循环，每次单击该按钮，它都会将下一行的可见性变为“true”，将前一行的可见性变为“false”

以下是我目前的代码：


显示
隐藏
改道
var阶段=新的动力学阶段({
容器：'容器'，
宽度：1700，
身高：1100
});
//创建要放置在舞台上的层
//请注意，我们可以将建筑地图本身作为一个图层，并且--
//--把这些多层叠放在一起。
var layer=新的动能层（）；
var line202n=新的动力学形状({
drawFunc:函数（画布）{
var context=canvas.getContext（）；
context.beginPath（）；
上下文。moveTo（454338）；
lineTo（440351）；
lineTo（533449）；
lineTo（565449）；
lineTo（635449）；
lineTo（635368）；
lineTo（591368）；
lineTo（591289）；
canvas.fillStroke（这个）；
},
笔划：“蓝色”，
冲程宽度：6，
可见：假
});
图层。添加（line202n）；
var line202s=新的动力学形状({
drawFunc:函数（画布）{
var context=canvas.getContext（）；
context.beginPath（）；
上下文。moveTo（454338）；
lineTo（440351）；
lineTo（533449）；
lineTo（565449）；
lineTo（635449）；
lineTo（1432449）；
lineTo（1432532）；
canvas.fillStroke（这个）；
},
笔划：“蓝色”，
冲程宽度：6，
可见：假
});
图层。添加（行202s）；
//将层添加到舞台
阶段。添加（层）；
//添加按钮事件绑定
document.getElementById（'show'）。addEventListener（'click'，
函数（）{
line202n.show（）；
layer.draw（）；
}，假）；
document.getElementById（'hide'）.addEventListener（'click'，function（）{
line202n.hide（）；
layer.draw（）；
}，假）；
document.getElementById（'reroute'）.addEventListener（'click'，function（）{
line202n.hide（）；
layer.draw（）；
}，假）；

请将您的问题包含在文章正文中。如果您将JSFIDLE放在一起，那么我可以帮助您解决一些问题。您需要做的是将所有坐标放入一个数组中，创建一个setTimeout，然后执行一次从末尾（或开头）弹出一些元素的迭代并将它们绘制为连接线。如果您只是绘制线条而不是形状，我建议使用Kinetic.Line（）。

    <body>
  <div id="container"></div>
    <div id="buttons">
      <button id="show">
        show
      </button>
      <button id="hide">
        hide
      </button>
      <button id="reroute">
        reroute
      </button>
    </div>
    <div id="container"></div>
    <script src="kineticjs.js"></script>
    <script>
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 1700,
        height: 1100
      });

    //Creates our layer to be put over the stage
    //note that we could have the building map as a layer itself and simply--
    //--put these muiltiple layers ontop of each other.
      var layer = new Kinetic.Layer();



      <!--Room 202-->
      var line202n = new Kinetic.Shape({
        drawFunc: function(canvas) {
          var context = canvas.getContext();
          context.beginPath();
          context.moveTo(454, 338);
          context.lineTo(440, 351);
          context.lineTo(533, 449);
          context.lineTo(565, 449);
          context.lineTo(635, 449);
          context.lineTo(635, 368);
          context.lineTo(591, 368);
          context.lineTo(591, 289);
          canvas.fillStroke(this);
        },
        stroke: 'blue',
        strokeWidth: 6,
        visible: false
      });
      layer.add(line202n);

      var line202s = new Kinetic.Shape({
        drawFunc: function(canvas) {
          var context = canvas.getContext();
          context.beginPath();
          context.moveTo(454, 338);
          context.lineTo(440, 351);
          context.lineTo(533, 449);
          context.lineTo(565, 449);
          context.lineTo(635, 449);
          context.lineTo(1432, 449);
          context.lineTo(1432, 532);
          canvas.fillStroke(this);
        },
        stroke: 'blue',
        strokeWidth: 6,
        visible: false
      });
      layer.add(line202s);


      //add the layer to the stage
      stage.add(layer);

      // add button event bindings
        document.getElementById('show').addEventListener('click', 
        function() {
          line202n.show();
          layer.draw();
        }, false);

        document.getElementById('hide').addEventListener('click', function() {
          line202n.hide();
          layer.draw();
        }, false);

        document.getElementById('reroute').addEventListener('click', function() {
          line202n.hide();
          layer.draw();
        }, false);

      </script>
  </body>