如何在不拉伸的情況下將圖像縮放到KonvaJS畫布？

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上