Konva 变压器移除居中锚点

简介

Konva 是一个强大的 HTML5 2D 渲染库，它提供了一个易于使用、直观的 API，是构建交互式图像应用程序的理想选择。Konva 的变压器组件旨在使用户能够缩放、旋转和调整节点位置，但是默认情况下它会把锚点放在节点中心，这会给某些场景造成不便，本文将介绍如何移除 Konva 变压器的居中锚点。

解决方案

解决方案分为三个步骤：

1. 移除节点的锚点
2. 重写变压器组件的锚点位置计算方式
3. 重新创建变压器组件

第一步：移除节点的锚点

Konva 支持通过 anchorX 和 anchorY 属性设置节点的锚点，但是如果不设置这些属性，Konva 会默认将锚点放在节点中心。因此，我们需要手动将节点的锚点置为左上角。

// 移除节点的锚点
node.setOffset({ x: 0, y: 0 });
node.setX(0);
node.setY(0);

这段代码将锚点移至节点左上角，并将节点移动至父级容器的左上角。

第二步：重写变压器组件的锚点位置计算方式

Konva 的变压器组件默认会将锚点放在节点中心。因此，我们需要重写变压器组件的 _calculateAnchorPoint 方法，使其返回节点的左上角坐标。

// 重写变压器组件的 _calculateAnchorPoint 方法
Konva.Transformer.prototype._calculateAnchorPoint = function () {
  const attrs = this.getNode().getClientRect();
  const nodeX = attrs.x;
  const nodeY = attrs.y;
  const width = attrs.width * this.getNode().scaleX();
  const height = attrs.height * this.getNode().scaleY();
  const nodeRotation = this.getNode().rotation();
  const rad = (nodeRotation * Math.PI) / 180;
  const sin = Math.sin(rad);
  const cos = Math.cos(rad);
  const x = nodeX * cos - nodeY * sin + width / 2;
  const y = nodeX * sin + nodeY * cos + height / 2;
  return {
    x: x,
    y: y,
  };
};

这段代码中，我们通过获取节点的左上角坐标，并使用节点的宽高以及缩放比例计算出变压器组件的锚点坐标。

第三步：重新创建变压器组件

最后，我们需要将节点与变压器组件进行关联，并重新创建一个变压器组件。

// 重新创建变压器组件
const transformer = new Konva.Transformer({
  nodes: [node],
  rotationSnaps: [0, 90, 180, 270],
  rotateEnabled: true,
});
layer.add(transformer);
layer.draw();

这段代码将节点与新的变压器组件关联起来，并将变压器组件添加至父级容器中。

总结

通过移除节点的锚点、重写变压器组件的锚点位置计算方式以及重新创建变压器组件，我们成功地移除了 Konva 变压器的居中锚点，使得用户更加方便地进行节点的缩放、旋转和位置调整。