我正在尝试在1080x1920画布上显示具有不同纵横比的图像。因此,当我尝试显示9:16的图像时,它可以完美缩放,但是如果宽高比是4:3或3:4,则缩放后的图像会拉伸。
我想做的是,如果宽高比为3:4,则缩放并在中心和切割边缘将图像显示为9:16。 (因此,如果原始宽度为1440,仅显示1080,并且屏幕的每一侧都留有180px。如果原始宽度为3024,则将其缩小为1440,然后剪切)
如果图像不是纵向而是横向,则将其显示在中心并用某种颜色填充剩余空间。
我该如何实现? KonvaJS是否提供简便的方法?
答案 0 :(得分:0)
没有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上居中放置图像