Konva.js如何通过代码控制Transformer自动拖拽调整大小

要实现页面加载时无需交互自动完成缩放，没必要模拟拖拽右下角锚点，直接操作目标元素的尺寸或缩放比例更简单可靠，给你两种实用方案：

方法1：直接设置缩放比例 #

如果你知道目标缩放倍数，直接给节点设置scaleX和scaleY，Transformer会自动适配节点的变换状态：

// 示例：先创建目标节点和Transformer
const targetNode = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'red'
});
const layer = new Konva.Layer();
layer.add(targetNode);

const tr = new Konva.Transformer({
  keepRatio: true,
  borderStrokeWidth: 3,
  borderStroke: "blue",
  enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
});
layer.add(tr);
tr.nodes([targetNode]);

// 页面加载后自动缩放到原尺寸的2倍
targetNode.scale({ x: 2, y: 2 });
layer.draw();

方法2：固定目标尺寸（保持比例） #

如果你知道目标的宽度或高度，利用Transformer的keepRatio特性，直接修改节点的尺寸即可，另一个维度会自动按比例计算：

// 目标节点和Transformer初始化同上

// 示例：将宽度调整为200，高度自动按原比例适配
const targetWidth = 200;
const originalRatio = targetNode.width() / targetNode.height();
targetNode.width(targetWidth);
targetNode.height(targetWidth / originalRatio);

// 刷新图层和Transformer，确保显示同步
layer.draw();
tr.refresh();

为什么不模拟拖拽锚点？ #

模拟拖拽需要手动计算鼠标坐标、触发Konva的拖拽事件，步骤繁琐还容易出现坐标偏差、事件触发不完整的问题。直接操作节点的尺寸或缩放比例是更可靠的方式，Transformer会自动同步节点状态，效果和手动拖拽锚点完全一致。

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