Javascript 带有可重复鼠标事件的KineticJS问题_Javascript_Html_Canvas_Mouseevent_Kineticjs

Javascript 带有可重复鼠标事件的KineticJS问题

javascript html canvas

Javascript 带有可重复鼠标事件的KineticJS问题,javascript,html,canvas,mouseevent,kineticjs,Javascript,Html,Canvas,Mouseevent,Kineticjs,我这里没有什么问题（我显然错过了一些东西）。我通过更大的应用程序简化了它：当我单击蓝色矩形时，我将另一层添加到包含红色矩形的舞台（可单击），当我单击此红色矩形时，它将删除带有红色矩形的第二层问题：当我第二次单击blue rect时，什么也没发生：（即，应用程序只工作一次，我需要重复添加/删除第二层（使用红色rect）。怎么了？：）你可以在这里看到，小提琴代码：身体{ 边际：0px；填充：0px； } 帆布{ 边框：1px实心#9C9898； } window.onload=函数（）

我这里没有什么问题（我显然错过了一些东西）。我通过更大的应用程序简化了它：当我单击蓝色矩形时，我将另一层添加到包含红色矩形的舞台（可单击），当我单击此红色矩形时，它将删除带有红色矩形的第二层

问题：当我第二次单击blue rect时，什么也没发生：（即，应用程序只工作一次，我需要重复添加/删除第二层（使用红色rect）。怎么了？：）

你可以在这里看到，小提琴

代码：


身体{
边际：0px；
填充：0px；
}
帆布{
边框：1px实心#9C9898；
}
window.onload=函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：200
});
var layerBlue=新的dynamic.Layer（）；
var layerRed=新的动能.Layer（）；
var rectBlue=新的动能.Rect({
x:100，
y:75，
宽度：100，
身高：50，
填充：“蓝色”，
笔画：“黑色”，
冲程宽度：4
});
var rectRed=新的动能.Rect({
x:300，
y:75，
宽度：100，
身高：50，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4
});
//鼠标事件
rectBlue.on（'click'，function（））{
阶段。添加（分层）；
stage.draw（）；
});
rectRed.on（'click'，function（）{
layerRed.remove（）；
stage.draw（）；
});
//将形状添加到层中
layerBlue.add（矩形蓝色）；
layerRed.add（矩形）；
//将层添加到舞台
阶段。添加（图层蓝色）；
};

要隐藏和显示形状，可以使用hide（）和show（）方法。试试这个JSFIDDLE。您可以看到下面的示例代码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
    <script>
        var layerBlue;
        var layerRed;
        var rectBlue;
        var rectRed;
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });

        layerBlue = new Kinetic.Layer();
        layerRed = new Kinetic.Layer();

        rectBlue = new Kinetic.Rect({
          x: 100,
          y: 75,
          width: 100,
          height: 50,
          fill: 'blue',
          stroke: 'black',
          strokeWidth: 4
        });
        rectRed = new Kinetic.Rect({
          x: 300,
          y: 75,
          width: 100,
          height: 50,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4
        });

        // mouse events
        rectBlue.on('click', function() {
          rectRed.show();
          stage.draw();
        });
        rectRed.on('click', function() {
          rectRed.hide();
          stage.draw();
        });

        // add the shape to the layer
        layerBlue.add(rectBlue);
        layerRed.add(rectRed);

        // add the layer to the stage
        stage.add(layerBlue);
        stage.add(layerRed);
        rectRed.hide();
        stage.draw();
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>


身体{
边际：0px；
填充：0px；
}
帆布{
边框：1px实心#9C9898；
}
var layerBlue；
var分层；
蓝色变种；
变直；
window.onload=函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：200
});
layerBlue=新的动能.Layer（）；
layerRed=新的动能层（）；
rectBlue=新的动能.Rect({
x:100，
y:75，
宽度：100，
身高：50，
填充：“蓝色”，
笔画：“黑色”，
冲程宽度：4
});
rectRed=新的动力学.Rect({
x:300，
y:75，
宽度：100，
身高：50，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4
});
//鼠标事件
rectBlue.on（'click'，function（））{
rectRed.show（）；
stage.draw（）；
});
rectRed.on（'click'，function（）{
rectRed.hide（）；
stage.draw（）；
});
//将形状添加到层中
layerBlue.add（矩形蓝色）；
layerRed.add（矩形）；
//将层添加到舞台
阶段。添加（图层蓝色）；
阶段。添加（分层）；
rectRed.hide（）；
stage.draw（）；
};

请参考此url以了解HTML5画布隐藏和显示形状

要隐藏和显示形状，我们可以使用Hide（）和Show（）方法。试试这个JSFIDDLE。您可以看到下面的示例代码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script>
    <script>
        var layerBlue;
        var layerRed;
        var rectBlue;
        var rectRed;
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });

        layerBlue = new Kinetic.Layer();
        layerRed = new Kinetic.Layer();

        rectBlue = new Kinetic.Rect({
          x: 100,
          y: 75,
          width: 100,
          height: 50,
          fill: 'blue',
          stroke: 'black',
          strokeWidth: 4
        });
        rectRed = new Kinetic.Rect({
          x: 300,
          y: 75,
          width: 100,
          height: 50,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4
        });

        // mouse events
        rectBlue.on('click', function() {
          rectRed.show();
          stage.draw();
        });
        rectRed.on('click', function() {
          rectRed.hide();
          stage.draw();
        });

        // add the shape to the layer
        layerBlue.add(rectBlue);
        layerRed.add(rectRed);

        // add the layer to the stage
        stage.add(layerBlue);
        stage.add(layerRed);
        rectRed.hide();
        stage.draw();
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>


身体{
边际：0px；
填充：0px；
}
帆布{
边框：1px实心#9C9898；
}
var layerBlue；
var分层；
蓝色变种；
变直；
window.onload=函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：200
});
layerBlue=新的动能.Layer（）；
layerRed=新的动能层（）；
rectBlue=新的动能.Rect({
x:100，
y:75，
宽度：100，
身高：50，
填充：“蓝色”，
笔画：“黑色”，
冲程宽度：4
});
rectRed=新的动力学.Rect({
x:300，
y:75，
宽度：100，
身高：50，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4
});
//鼠标事件
rectBlue.on（'click'，function（））{
rectRed.show（）；
stage.draw（）；
});
rectRed.on（'click'，function（）{
rectRed.hide（）；
stage.draw（）；
});
//将形状添加到层中
layerBlue.add（矩形蓝色）；
layerRed.add（矩形）；
//将层添加到舞台
阶段。添加（图层蓝色）；
阶段。添加（分层）；
rectRed.hide（）；
stage.draw（）；
};

请参考此url了解HTML5画布隐藏和显示形状

是的，我也考虑过这一举措。如果移除和隐藏图层没有实际的区别，那么这个可以工作。谢谢你的回复！隐藏层不起作用：当我隐藏层时，背景层忽略所有鼠标事件：（是的，我也考虑过这个动作。如果移除层和隐藏层没有实际区别，这个可以起作用。感谢您的回复！隐藏层不起作用：当我隐藏层时，背景层忽略所有鼠标事件：(