CODEWITHSUNDEEP
reactjscanvaskonvajs
Julien Malige
Julien Malige

Reputation: 3475

How to set my Konva fillPatternImage 100% height

I'm using Konva (in React). 

  <Rect
    x={x}
    y={y}
    width={width}
    height={height}
    ...
    fillPatternImage={this.state.image}
    fillPatternRepeat="repeat-x"
  />

The fill image is showing, repeating but it height is the initial height of my source image. I would like to "fit" it with my shape (kind of height 100% / Y cover).

There is lot of feature on the doc (fillPatternX, fillPatternOffsetX, fillPatternScaleX) but no one is looking for what I want.

How can I do ?

Upvotes: 1

Views: 2278

Answers (1)

lavrton
lavrton

Reputation: 20288

You can use fillPatternScaleX and fillPatternScaleY to scale pattern image into required size. You may need to know the original image size of your pattern to calculate the scale.

fillPatternScaleY={requiredHeight / patternImageHeight}

Upvotes: 2

Related Questions