KonvaJs+jQuery Canvas叠加层图片仅缩放需求实现问题求助

我用KonvaJs和jQuery开发带背景图的叠加层图片功能时，碰到了图片缩放问题——当前缩放操作会影响整体画布/背景图，我需要实现仅对叠加层图片进行缩放，背景图和画布保持固定状态。

效果说明 #

• 当前错误效果：缩放时背景图和画布跟着变化
• 预期效果：仅叠加层图片可缩放、拖拽，背景图位置大小完全不变
• 素材：透明背景的叠加层图、固定尺寸的背景图

原尝试代码 #

// Create a Konva.js stage
var stage = new Konva.Stage({
  container: 'canvas-container',
  width: 712,
  height: 575,
});

// Create a Konva.js layer
var layer = new Konva.Layer();
stage.add(layer);

// Load the background image (non-resizable)
var backgroundImg = new Image();
backgroundImg.src = customBgImagePath;

backgroundImg.onload = function () {
  var background = new Konva.Image({
    image: backgroundImg,
    width: 712,
    height: 575,
  });

  layer.add(background);

  // Load the overlay image (resizable)
  var overlayImg = new Image();
  overlayImg.src = removedBgImagePath;

  overlayImg.onload = function () {
    var overlay = new Konva.Image({
      image: overlayImg,
      x: stage.width() / 2 - overlayImg.width / 2, // Center horizontally
      y: stage.height() / 2 - overlayImg.height / 2, // Center vertically
      draggable: true, // Enable drag-and-drop
    });

    layer.add(overlay);
    stage.draw();

    // Create a Konva.js Transformer for resizing only the overlay image
    var tr = new Konva.Transformer({
      nodes: [overlay],
      //keepRatio: true,
      //ignoreStroke: true
    });

    tr.hide();
    layer.add(tr);

    // When the image is clicked
    overlay.on('click', function () {
      // Toggle the Transformer's visibility and interactivity
      tr.visible(!tr.visible());
      tr.enabled(tr.visible());
      layer.draw();
    });

    stage.on('click', function (event) {
      // Hide the Transformer if the user clicks anywhere else on the stage
      tr.visible(false);
      tr.enabled(false);
      layer.draw();
    });

    // Enable resizing for the overlay image
    tr.on('transform', function () {
      layer.batchDraw(); // Redraw the layer ,
    });

    /* dataURL = stage.toDataURL({ pixelRatio: 3 });*/
    layer.Draw();

    //// Redraw the canvas on drag, drop, and resize
    //overlay.on('dragmove', function () {
    //  layer.draw();
    //});

    //overlay.on('transform', function () {
    //  layer.draw();
    //});

  };
};

问题排查与修复方案 #

核心问题

1. 事件冒泡冲突：点击叠加层时，事件会冒泡到stage，触发stage的点击事件隐藏Transformer，导致无法正常激活缩放功能
2. API方法调用错误：代码中layer.Draw()是大写开头，Konva的正确方法是小写layer.draw()
3. Transformer配置缺失：未开启比例锁定，可能导致缩放时图片变形

修正后的代码

// Create a Konva.js stage
var stage = new Konva.Stage({
  container: 'canvas-container',
  width: 712,
  height: 575,
});

// Create a Konva.js layer
var layer = new Konva.Layer();
stage.add(layer);

// Load the background image (non-resizable)
var backgroundImg = new Image();
backgroundImg.src = customBgImagePath;

backgroundImg.onload = function () {
  var background = new Konva.Image({
    image: backgroundImg,
    width: 712,
    height: 575,
  });

  layer.add(background);

  // Load the overlay image (resizable)
  var overlayImg = new Image();
  overlayImg.src = removedBgImagePath;

  overlayImg.onload = function () {
    var overlay = new Konva.Image({
      image: overlayImg,
      x: stage.width() / 2 - overlayImg.width / 2,
      y: stage.height() / 2 - overlayImg.height / 2,
      draggable: true,
    });

    layer.add(overlay);
    stage.draw();

    // 创建仅作用于叠加层的Transformer
    var tr = new Konva.Transformer({
      nodes: [overlay],
      keepRatio: true, // 保持图片缩放比例，按需开启
      ignoreStroke: true
    });

    tr.hide();
    layer.add(tr);

    // 点击叠加层显示/隐藏缩放控件
    overlay.on('click', function (e) {
      // 阻止事件冒泡到stage，避免被隐藏
      e.cancelBubble = true;
      tr.visible(!tr.visible());
      tr.enabled(tr.visible());
      layer.draw();
    });

    // 点击画布其他区域隐藏缩放控件
    stage.on('click', function () {
      tr.visible(false);
      tr.enabled(false);
      layer.draw();
    });

    // 缩放时实时重绘
    tr.on('transform', function () {
      layer.batchDraw();
    });

    // 修正绘制方法大小写
    layer.draw();
  };
};

关键修复点说明

• 阻止事件冒泡：在叠加层的点击事件中添加e.cancelBubble = true，避免触发stage的点击事件隐藏缩放控件
• 修正API调用：将layer.Draw()改为layer.draw()，符合Konva的API规范
• 完善Transformer配置：开启keepRatio: true保证缩放时图片不变形，按需调整配置项

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