Example using library functions in react

[prentesvarten]

would it be possible to add an example where you illustrate how to use for instance .setOffset on text in a react context?

`
var simpleText = new Konva.Text({
x: stage.getWidth() / 2,
y: 15,
text: 'Simple Text',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green'
});

// to align text in the middle of the screen, we can set the
// shape offset to the center of the text shape after instantiating it
simpleText.setOffset({
x: simpleText.getWidth() / 2
});
`

[lavrton]

You can get reference of your simpleText node in componentDidMount and set offset here.

componentDidMount() {
   this.text.offsetX(text.width() / 2);
}
render() {
  return <Text {...yourAttrs} ref={(node) => { this.text = node; }/>;
}

https://github.com/lavrton/react-konva#getting-reference-to-konva-objects

[bay007]

Hello; I want to perform move a Rect element on press key in keyboard, I have

componentDidMount() {
   window.addEventListener('keydown', e => {
     //console.log(e);

     this.text.setX(this.text.getX() + 10);
     this.text.setY(this.text.getY() + 10);

     this.text.x += 10;
     this.text.y += 10;
     console.log('fired');
   });
 }

 render = () => (
   <Stage
     width={this.props.width}
     height={this.props.height}
     onContentMousedown={this.onMouseDown}
     onContentMousemove={this.onMouseMove}
     onContentMouseup={this.onMouseUp}
   >
     {this.props.children}
     <Layer>
       <Rect
         ref={node => {
           this.text = node;
         }}
         name="selection"
         x={0}
         y={0}
         width={50}
         height={50}
         fill="rgba(0,0,255,.5)"
       />
     </Layer>
   </Stage>
 );

But my Rect element is not moving on keyDown :( , it still on x=0, y=0.

[lavrton]

@bay007 changing attributes of a node directly is not recommended in react-konva. Store position of a text in the state of your component (or in special state-container like redux). In event listener just update your state and re-render component.