如何将我的 Konva fillPatternImage 设置为 100% 高度答案

【问题标题】：How to set my Konva fillPatternImage 100% height如何将我的 Konva fillPatternImage 设置为 100% 高度
【发布时间】：2023-04-07 17:45:01
【问题描述】：

我正在使用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），但没有人在寻找我想要的。

我该怎么办？

【问题讨论】：

您能否说明您希望看到的结果是什么？ fillPatternScaleY 可能对你有用。
我正在使用变压器。我希望我的填充在转换过程中覆盖该区域（100% 100%）。
你可以在线演示你已经拥有的东西吗？
首先我会尝试使用 ScaleY，我认为你是对的。如果它不起作用，我会做一个小提琴:)。
@lavrton 你是对的！ fillPatternScaleY={高度/patternImageHeight}。如果您想添加答案，我会接受！

标签： reactjs canvas konvajs

【解决方案1】：

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

fillPatternScaleY={requiredHeight / patternImageHeight}

【讨论】：