Konva 实现控制Image的显示和隐藏

如果想要实现一个总开关来显示和隐藏多个图标，不需要在每次切换时都添加和删除图标。这样做可能会效率较低，尤其是在图标数量较多时。相反，您可以使用Konva的visible属性来控制图标的显示和隐藏。

以下是如何实现这个需求的步骤：

1. 创建图标时，保存它们的引用到一个数组或对象中。
2. 创建一个函数来切换所有图标的visible属性。
3. 在总开关的点击事件中调用这个函数。

下面是一个示例代码：

// 创建舞台和图层
var stage = new Konva.Stage({
  container: 'container',
  width: 300,
  height: 300
});

var layer = new Konva.Layer();
stage.add(layer);

// 创建图片对象数组
var images = [];

// 添加图片到图层
function addImage(src, x, y, id) {
  var imageObj = new Image();
  imageObj.onload = function() {
    var konvaImage = new Konva.Image({
      id: id,
      x: x,
      y: y,
      image: imageObj,
      width: 50,
      height: 50
    });
    images.push(konvaImage); // 保存图片引用
    layer.add(konvaImage);
    layer.draw();
  };
  imageObj.src = src;
}

// 添加多个图片
addImage('path/to/image1.jpg', 50, 50, 'image1');
addImage('path/to/image2.jpg', 150, 50, 'image2');
addImage('path/to/image3.jpg', 250, 50, 'image3');

// 总开关函数，切换所有图标的显示和隐藏
function toggleImagesVisibility() {
  images.forEach(function(image) {
    image.setVisible(!image.isVisible()); // 切换visible属性
  });
  layer.draw(); // 重新绘制图层
}

// 执行开关事件
this.toggleImagesVisibility()