Mromzek Mromzek - 6 months ago 44
React JSX Question

React-Konva Text Alignment and Wrapping not working

I am unable to align my text to center on my canvas, nor can I get the text to wrap to a new line when the length exceeds the length of the canvas.

import { Layer, Stage, Text } from 'react-konva';
render() {
return (
<Stage height={500} width={500}>
<Layer>
<Text fontSize={60} text="`HEYYYYYYYYYYYYYYYYYYYYYYY`"
wrap="char" align="center" />
</Layer>
</Stage>
)
}

Answer Source

It works just fine. Width of a text is not limited by canvas size. Instead it is limited by its own width property.

If you don't set width it will be unlimited.

<Text
  fontSize={60}
  text="HEYYYYYYYYYYYYYYYYYYYYYYY"
  wrap="char"
  align="center"
  width={700}
/>

http://jsbin.com/dolegimuvi/1/edit?js,output

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download