如何将我的Konva fillPatternImage设置为100％高度

Question

我正在使用Konva（在React中）。

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

fill image正在显示，并重复，但是高度是我的源图像的初始高度。我想将其“适合”我的形状（高度为100％/ Y形）。

the doc上有很多功能（fillPatternX，fillPatternOffsetX，fillPatternScaleX），但是没人在寻找我想要的东西。

我该怎么办？

Answer 1

您可以使用fillPatternScaleX和fillPatternScaleY将图案图像缩放为所需大小。您可能需要知道图案的原始图像尺寸才能计算出比例。

fillPatternScaleY={requiredHeight / patternImageHeight}