Flip Image with react-konva

Question

How can I flip an image (horizontally or vertically) I am using this function, but it is not working:

  flip = direction => {
    this.setState({
      width: -this.state.width
    })
  }

score 3 · Accepted Answer · answered Jun 05 '18 at 02:47

3

It is better to use scale property:

<Image image={this.state.image} scaleY={-1} y={200}/>

So in your state, you should store scale property with 1 or -1 values,

answered Jun 05 '18 at 02:47

lavrton

It works great but it creates a shift: https://j.gifs.com/OyjMkr.gif. All image manipulation shouldn’t shift the viewport. is there a way to do it? – Alan Jun 22 '18 at 10:42
@Alan You just need to adjust `x` property or set `offsetX={imageWidth / 2}` – lavrton Jun 27 '18 at 04:13

1 Answers1