0

Like the example shown for shape, this has x,y,rotation etc. https://konvajs.github.io/docs/select_and_transform/Transform_Events.html

Image in react-konva also extends shape.

How can I get these values for image(with transformer) in react-konva.

Samdeesh
  • 905
  • 11
  • 23

1 Answers1

2

You can listen transform event and then read all properties from the image node.

  handleTransform = () => {
    const props = {
      x: this.image.x(),
      y: this.image.y(),
      rotatio: this.image.rotation(),
      width: this.image.width(),
      height: this.image.height(),
      scaleX: this.image.scaleX(),
      scaleY: this.image.scaleY()
    };
    console.log(props);
  };
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Image
            image={this.state.image}
            ref={node => {
              this.image = node;
            }}
            draggable
            onTransform={this.handleTransform}
            onDragMove={this.handleTransform}
          />
          <Transformer
            ref={node => {
              this.transformer = node;
            }}
          />
        </Layer>
      </Stage>
    );
  }

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

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Hey there. I have been trying to implement this with React Hooks but failed to do so. Can you provide an example on how to transform an image? Should I create a new post? – Zak Sep 28 '21 at 20:05
  • @Zak you should – lavrton Sep 28 '21 at 21:00
  • Hey man, here it is. https://stackoverflow.com/questions/69368679/unable-to-add-transform-feature-with-react-hooks-using-konvajs . It would be helpful if you could provide a full example. – Zak Sep 28 '21 at 21:30
  • Hey Lavrton, I have updated that post of mine. Getting an infinite loop of images on the canvas staging area. Please check it. – Zak Sep 29 '21 at 09:39