Konva.js v4+版本裁剪框功能失效适配及跨端裁剪库推荐

问题原因 #

原示例使用的clipFuncAPI在Konva v4及之后版本已被废弃，这是代码失效的核心原因。我们可以改用官方推荐的clipNode属性实现相同裁剪效果。

修复后的完整代码 #

<script src="https://unpkg.com/konva@latest/konva.min.js"></script>
<div id="container"></div>

<script>
const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

// 背景半透明图片
Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  img.setAttrs({
    width: stage.width(),
    height: stage.height(),
    opacity: 0.5
  });
  layer.add(img);
});

Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
  // 创建裁剪用的矩形节点（替代原clipFunc）
  const clipRect = new Konva.Rect({
    width: 100,
    height: 100,
    x: 100,
    y: 100,
    fill: 'transparent'
  });

  // 创建带裁剪的分组
  const group = new Konva.Group({
    clipNode: clipRect
  });
  layer.add(group);

  // 添加要裁剪的图片
  img.setAttrs({
    width: stage.width(),
    height: stage.height()
  });
  group.add(img);

  // 用于拖拽缩放的辅助矩形（原fakeShape）
  const fakeShape = new Konva.Rect({
    width: 100,
    height: 100,
    x: 100,
    y: 100,
    fill: 'rgba(0,0,0,0)',
    draggable: true
  });
  layer.add(fakeShape);

  // 同步辅助矩形与裁剪矩形的属性
  const syncClipRect = () => {
    clipRect.setAttrs({
      x: fakeShape.x(),
      y: fakeShape.y(),
      width: fakeShape.width() * fakeShape.scaleX(),
      height: fakeShape.height() * fakeShape.scaleY(),
      rotation: fakeShape.rotation(),
      scaleX: fakeShape.scaleX(),
      scaleY: fakeShape.scaleY()
    });
    layer.draw();
  };

  // 监听辅助矩形的拖拽和变换事件，实时更新裁剪区域
  fakeShape.on('dragmove', syncClipRect);
  fakeShape.on('transform', syncClipRect);

  // 添加Transformer控制器
  const tr = new Konva.Transformer({
    enabledAnchors: ['top-left', 'bottom-right'],
    rotateEnabled: false,
    keepRatio: false,
    flipEnabled: true,
    node: fakeShape,
    boundBoxFunc: (oldBox, newBox) => {
      // 限制最小尺寸
      if (newBox.width < 50) newBox.width = 50;
      if (newBox.height < 50) newBox.height = 50;
      return newBox;
    }
  });
  layer.add(tr);

  layer.draw();
});
</script>

关键修改说明 #

• 替换clipFunc为clipNode: 用Konva.Rect节点作为裁剪区域，绑定到分组的clipNode属性，这是Konva v4+的官方推荐方式。
• 实时同步属性: 监听辅助矩形的dragmove和transform事件，将其位置、尺寸、缩放、旋转等属性同步到裁剪矩形，确保裁剪区域与操作框完全匹配。
• 保留原交互逻辑: 完整保留原示例的拖拽、缩放限制、锚点配置等交互行为。

备选裁剪库推荐（支持PC/移动端） #

如果Konva方案仍无法满足需求，可考虑以下库：

• Cropper.js: 轻量、支持响应式，提供拖拽、缩放、旋转等丰富裁剪交互，适配PC和移动端，可直接基于img元素操作。
• Pintura: 功能全面的图像编辑库，包含裁剪、滤镜、调整等功能，原生支持移动端触摸操作，适配性强。

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