0

I am trying to transform circle but it throws error. I don't understand what is the problem i have already worked with transformations on Konva.Rect and there's no such error. Attaching transformer to Konva.Circle works properly, but when mouse is over one of transformer anchors it throws error. Here's how i'm attaching transformer to Konva.Circle:

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

My Konva.Circle component to which i'm trying to attach transformer:

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

Transformer attaching is happening when this.mouseUp is called

Maksym Tutskyi
  • 1
  • 2

1 Answers1

1

From your demo attachObject(node) { } function has a Konva node as the first argument. You should change the way you call it:

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);
};

Make sure you update the layer when you attach Konva.Transformer:

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

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

Demo: https://codesandbox.io/s/wxvx5xyk5

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • I'm sorry but i've made mistake in my example. I pass node from react reference like this: `attachObject(this.circleRef.current)`. And i have to tell that my problem is disappeared. I actually didn't touch my code for a day, and next day i tried again and it's just gone. Thank you for your answer but it's just some mysterious thing happened :D – Maksym Tutskyi Jan 18 '19 at 08:19