Konva-使用fillPatternScaleY而不会扭曲形状吗？

Question

我正在使用Vue库并缩放矩形以填充图像。但是我不希望形状和其他元素变形。

    <v-layer ref="layer">
        <v-rect :config="{
                width: configKonva.width,
                height: configKonva.height,
                fillPatternImage: image,
                fillPatternScaleY: configKonva.height / img.height,
                fillPatternScaleX: configKonva.width / img.width
            }">
        </v-rect>
        <v-circle :config="configCircle"></v-circle>
    </v-layer>

有指针吗？

Answer 1

您只需要对fillPatternScaleY和fillPatternScaleX使用相同的值。当前，它们在您的代码中有所不同。您可以尝试使用此方法：

Math.max(configKonva.height / img.height, configKonva.height / img.height)

或者您可以使用Math.min。这取决于您的可视化要求。