0

如何创建一个循环遍历所有行变量的按钮，一次可见一个？

我正在使用 Kinetic Javascript，我想制作一个循环遍历所有行变量的按钮，每次单击该按钮时，它都会将下一行的可见性变为“真”，将前几行的可见性变为“假”

到目前为止，这是我的代码：http: //jsfiddle.net/NXt2L/4/

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

0 回答 0