如何在Konva.Transformer的transform事件中检测锚点类型

开发者阿泽

2026-7-24

在Konva.Transformer的transform事件中获取锚点类型的方法

可以直接通过Konva.Transformer提供的getActiveAnchor()方法获取触发transform操作的锚点，再通过锚点节点的name()方法拿到对应的锚点类型（如"middle-right"、"bottom-right"等）。

具体实现步骤

监听Transformer的transform事件
在事件回调中调用transformer.getActiveAnchor()获取当前激活的锚点节点
通过锚点节点的name()方法获取锚点类型，判断是否为目标锚点后执行对应操作

代码示例

// 创建舞台、层和目标元素
const stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});
const layer = new Konva.Layer();
stage.add(layer);

const rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 200,
  height: 150,
  fill: 'lightblue',
  draggable: true
});
layer.add(rect);

// 创建Transformer并绑定目标元素
const transformer = new Konva.Transformer();
layer.add(transformer);
transformer.nodes([rect]);

// 监听transform事件
transformer.on('transform', () => {
  const activeAnchor = transformer.getActiveAnchor();
  // 无激活锚点时直接返回
  if (!activeAnchor) return;

  const anchorType = activeAnchor.name();
  // 判断是否为目标锚点
  if (anchorType === 'middle-right' || anchorType === 'bottom-right') {
    // 执行Konva.Text相关操作，示例为创建或更新文本节点
    let textNode = layer.findOne('.anchor-triggered-text');
    if (!textNode) {
      textNode = new Konva.Text({
        x: rect.x() + rect.width(),
        y: rect.y(),
        text: '锚点触发操作',
        fontSize: 16,
        fill: '#ff4444',
        name: 'anchor-triggered-text'
      });
      layer.add(textNode);
    } else {
      // 更新文本位置以跟随元素变换
      textNode.x(rect.x() + rect.width());
      textNode.y(rect.y());
    }
    layer.draw();
  }
});