我们经常遇到长宽随窗口变化等比缩放的例子,比如视频网上中间的视频案例、等比缩放的盒子图片等等。
公式
我们已经知道根据比例求长宽公式是:
求宽度 w = h / ratio
求高度 h = w * ratio
准备
根据公式此时我们需要准备,一个外容器dom和一个进行等比缩放的容器dom
核心代码
if (w > wrapW) {
cW = wrapW;
cH = wrapW * ratio;
}
if (h > wrapH) {
cW = wrapH / ratio;
cH = wrapH;
}
上述代码中,wrapW
与wrapH
是外容器的,cW
与cH
是要进行比例调控的容器。
首先我们要先计算出一个方向的缩放宽度,判断是否超出外容器,如果没有超出,那么表示等比缩放在该外容器内,如果超出,则反向进行计算。
源码
/**
* 计算盒子
* @description 用于描述盒子大小(可用于等比缩放等应用)
* @param width
* @param height
* @param minWidth
* @param minHeight
* @param maxWidth
* @param maxHeight
* @returns {{residueH: number, residueW: number, width: number, height: number}}
*/
function computeBox({ width, height, minWidth, minHeight, maxWidth, maxHeight }) {
minWidth = minWidth === void 0 ? 0 : Math.max(0, minWidth);
minHeight = minHeight === void 0 ? 0 : Math.max(0, minHeight);
maxWidth = maxWidth === 'none' ? width : Math.max(minWidth, maxWidth);
maxHeight = maxHeight === 'none' ? height : Math.max(minHeight, maxHeight);
// w = h / ratio, h = w * ratio
const ratio = height / width;
if (width < minWidth) {
width = minWidth;
height = minWidth * ratio;
}
if (height < minHeight) {
width = minHeight / ratio;
height = minHeight;
}
if (width > maxWidth) {
width = maxWidth;
height = maxWidth * ratio;
}
if (height > maxHeight) {
width = maxHeight / ratio;
height = maxHeight;
}
const length = Math.pow(10, 5);
width = Math.round((width * length)) / length;
height = Math.round((height * length)) / length;
return {
width: width,
height: height,
residueW: maxWidth - width,
residueH: maxHeight - height
};
};
// 示例
const box = computeBox({
width: 1920, // cw
height: 1080, // cH
maxWidth: 500, // wrapW
maxHeight: 500 // wrapH
}); // => {{ width: number, height: number, residueW: number, residueH: number }}
运行效果图
宽屏
高屏
方形屏
*版权声明:本文为原创文章,未经允许不得转载。