CODEWITHSUNDEEP
javascriptreactjscanvashtml5-canvaskonvajs
ey dee ey em
ey dee ey em

Reputation: 8623

In KnovaJs, How to allow Rect to expand with Text or Allow Text to Have Border That Expand With Text Like If its Div in Html

I am having trouble to see an easy to apply solution so that, a Rect can be a container for Text, just like a in Html as a container for a , so that if a div has a border, it will expand with the text as text increase in counts.

I haven't be able to do it through either Rect With Text in a Group or apply Label above a Text...

Is that even doable? If not, what is the alternative that I can somehow let the Rect smartly detect the size of Text in the same Group so it expands accordingly?

I am using Konva by utilizing konva-react

Upvotes: 1

Views: 480

Answers (1)

lavrton
lavrton

Reputation: 20363

Konva.Label is very useful for that use case.

      <Label>
        <Tag fill="red" />
        <Text text="hello" />
      </Label>

Demo: https://codesandbox.io/s/84mzo6l5k0

If you want to use Konva.Rect + Konva.Text you have to calculate the size of the text manually and then apply it to the rectangle instance.

Upvotes: 2

Related Questions