如何从 konvaJS 中的图像中删除调整大小滑块

Question

我制作了示例中的功能https://konvajs.org/docs/sandbox/Scale_Image_To_Fit.html。但我需要做到的是，如果图片失焦，需要拉动的滑块就会消失。我怎样才能做到这一点

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("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;

Answer 1

您甚至可以在舞台上单击来隐藏/显示变压器：

    // Event listener for image click
    img.on('click', function() {
      tr.nodes([img]); // Attach transformer to the image
    });

    // Event listener for stage click
    stage.on('click', function(e) {
      // Check if the click is on empty space
      if (e.target === stage) {
        tr.nodes([]);    // Hide the transformer
      }
    });