Konva - 使用 fillPatternScaleY 而不扭曲形状？答案

【问题标题】：Konva - use fillPatternScaleY without distorting shapes?Konva - 使用 fillPatternScaleY 而不扭曲形状？
【发布时间】：2018-11-25 22:25:31
【问题描述】：

我正在使用 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>

任何指针？

【问题讨论】：

缩放一个轴而不是另一个轴总是会导致失真。您应该找到视口宽度和高度与画布宽度和高度的比率，并将 BOT x 和 y 缩放相同的量。 B 准备在画布的长边进行一些剪裁。

标签： canvas konvajs

【解决方案1】：

您只需对fillPatternScaleY 和fillPatternScaleX 使用相同的值。目前，它们在您的代码中有所不同。你可以试试这个：

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

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

【讨论】：