如何在KonvaJS中实现图片失焦时隐藏调整滑块

要实现图片失去焦点时隐藏Transformer（调整滑块），核心思路是监听舞台的点击事件，判断点击区域是否为图片或Transformer自身，若非则隐藏Transformer；同时监听图片的点击事件，确保点击图片时显示Transformer。

修改后的完整代码 #

// 确保你已创建Konva Stage实例，示例如下（根据实际场景调整）
const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);

const imgObj = new Image();
imgObj.onload = function() {
  Konva.Image.fromURL(url, function(img) {
    img.setAttrs({
      x: 170,
      y: 100,
      width: 185,
      height: 246,
      draggable: true,
      name: "image",
    });
    layer.add(img);
    layer.batchDraw();

    const tr = new Konva.Transformer({
      nodes: [img],
      keepRatio: false,
      flipEnabled: false,
      boundBoxFunc: function(oldBox, newBox) {
        if (
          Math.abs(newBox.width) < 10 ||
          Math.abs(newBox.height) < 10
        ) {
          return oldBox;
        }
        return newBox;
      },
    });

    layer.add(tr);

    // 点击图片时显示调整滑块
    img.on('click', () => {
      tr.show();
      layer.batchDraw();
    });

    // 点击非图片/滑块区域时隐藏调整滑块
    stage.on('click', (e) => {
      const clickedNode = e.target;
      // 排除图片和滑块的子元素（手柄、边框等）
      if (clickedNode.getName() !== 'image' && !clickedNode.isDescendantOf(tr)) {
        tr.hide();
        layer.batchDraw();
      }
    });

    img.on("transform", function() {
      img.setAttrs({
        scaleX: 1,
        scaleY: 1,
        width: img.width() * img.scaleX(),
        height: img.height() * img.scaleY(),
      });
      applyCrop(img.getAttr("lastCropUsed"));
    });
  });
};
imgObj.src = url;

关键逻辑说明 #

• 显示滑块：给图片绑定click事件，触发时调用tr.show()显示调整滑块，随后刷新图层确保界面更新。
• 隐藏滑块：给舞台绑定click事件，通过e.target获取点击节点，判断节点既不是图片、也不属于Transformer子元素时，调用tr.hide()隐藏滑块并刷新图层。

内容的提问来源于stack exchange，提问作者Marling