Question

我正在尝试在1080x1920画布上显示具有不同纵横比的图像。因此，当我尝试显示9:16的图像时，它可以完美缩放，但是如果宽高比是4：3或3：4，则缩放后的图像会拉伸。

我想做的是，如果宽高比为3：4，则缩放并在中心和切割边缘将图像显示为9:16。（因此，如果原始宽度为1440，仅显示1080，并且屏幕的每一侧都留有180px。如果原始宽度为3024，则将其缩小为1440，然后剪切）

如果图像不是纵向而是横向，则将其显示在中心并用某种颜色填充剩余空间。

我该如何实现？ KonvaJS是否提供简便的方法？

Answer 1

没有konvaJS不能提供解决方案，您需要使用自己的逻辑将图像放置在不同分辨率的中心。

我使用逻辑来查找适合我个人项目中提供的尺寸的图像分辨率。检查是否有帮助。

function getScaledImageCoordinates(
    containerWidth,
    containerHeigh,
    widt,
    height,
) {
    var widthRatio = (containerWidth) / width,
        heightRatio = (containerHeight) / height
    var bestRatio = Math.min(widthRatio, heightRatio)
    var newWidth = width * bestRatio,
        newHeight = height * bestRatio
    return {newWidth, newHeight}
}

您可以找到适合容器的图像分辨率（例如1080x1920），然后在Konva Stage上居中放置图像

如何在不拉伸的情况下将图像缩放到KonvaJS画布？

1 个答案: