Question

我正在尝试变换圆，但会引发错误。我不了解我已经在Konva.Rect上进行转换的问题是什么，并且没有这样的错误。将 transformer 附加到Konva.Circle可以正常工作，但是当鼠标悬停在 transformer 锚点之一上时，会引发错误。这是我将变压器附加到Konva.Circle的方式：

this.setState({ attachedToId: id }, () => transformer.attachTo(clickedNode));

我要附加 transformer 的我的Konva.Circle组件：

<Circle
      id={id}
      ref={this.circleRef}
      x={x * linesWidth}
      y={y * linesHeight}
      radius={radius * linesHeight}
      stroke={color}
      onMouseUp={this.mouseUp}
    />

变形金刚是在调用this.mouseUp时发生的

Answer 1

在演示attachObject(node) { }中，函数具有一个Konva节点作为第一个参数。您应该更改其调用方式：

handleClick = e => {
  const { attachObject } = this.props;

  // e - is event object
  // the next line will not work
  // attachObject(e);

  // instead you should do this:
  attachObject(e.target);
};

确保在附加Konva.Transformer时更新图层：

attachObject = node => {
  const t = this.ref.current;

  t.attachTo(node);
  t.getLayer().batchDraw();
};

演示：https://codesandbox.io/s/wxvx5xyk5

未捕获的TypeError：无法读取未定义的属性'getAbsoluteScale'

1 个答案: