Skip to content
Braulio Diez edited this page Aug 7, 2024 · 30 revisions

QuickMock wiki

Handling text in React Konva

We can see all the text properties in Konva in its documentation.

Centering text

If we need to work with the alignment of the text we can use the align property which can be: left, center, or right.

align="center"

center-text-konva

Clipping text

When the text no longer fit in our component we will use the ellipsis property: Can be true or false. Default is false.

If Konva Text config is set to:

  • ellipsis={true}
  • and wrap="none"

then it will add "..." to the end

text-ellipsis

Both examples can be found in component: button-shape.tsx

Roadmap

Community preview

  • Landing Page

  • About Us

  • Adjust size and proportions to a reference

  • Basic Shapes

  • Rich Shapes

  • Other Shapes

  • Inline Multiline Editing

  • Table Component

  • Richer and More Specific Properties Panel for Some Shapes

  • Image Component

  • Icon Component

Version 0.9

  • More Shapes

  • Multiple Selection

  • Copy-Paste from Clipboard

Version 1.0

  • Accessible