Metal与图形渲染番外篇：不同填充样式的实现

2021-01-13 本文已影响0人肠粉白粥_Hoben

在Metal与图形渲染二：透明图片的渲染中，有一个填充样式的实现，分别有Scale、Aspect、AspectFill的操作，求出顶点坐标实现代码如下，当时直接一笔带过了，现在来分析一下为什么要这样取值：

float heightScaling = 1.0;
float widthScaling = 1.0;
CGSize drawableSize = CGSizeMake(renderDesc.colorAttachments[0].texture.width, renderDesc.colorAttachments[0].texture.height);
CGRect bounds = CGRectMake(0, 0, drawableSize.width, drawableSize.height);
CGRect insetRect = AVMakeRectWithAspectRatioInsideRect(self.videoSize, bounds);
HobenRenderingResizingMode mode = CGSizeEqualToSize(self.videoSize, CGSizeZero) ? HobenRenderingResizingModeScale : HobenRenderingResizingModeAspectFill;
switch (mode) {
    case HobenRenderingResizingModeScale:
        heightScaling = 1.0;
        widthScaling = 1.0;
        break;
        
    case HobenRenderingResizingModeAspectFit:
        widthScaling = insetRect.size.width / drawableSize.width;
        heightScaling = insetRect.size.height / drawableSize.height;
        break;
        
    case HobenRenderingResizingModeAspectFill:
        widthScaling = drawableSize.height / insetRect.size.height;
        heightScaling = drawableSize.width / insetRect.size.width;
        break;
}
HobenVertex rgbVertices[] = {
    // 顶点坐标 x, y, z, w  --- 纹理坐标 x, y
    { {-widthScaling,  heightScaling, 0.0, 1.0}, {0.0, 0.0} },
    { { widthScaling,  heightScaling, 0.0, 1.0}, {0.5, 0.0} },
    { {-widthScaling, -heightScaling, 0.0, 1.0}, {0.0, 1.0} },
    { { widthScaling, -heightScaling, 0.0, 1.0}, {0.5, 1.0} },
};

一. 如何求出顶点坐标

首先我们需要了解Scale、Aspect、AspectFill三种概念：

Scale to Fill 缩放图片,使图片充满容器。图片未必保持长宽比例协调，有可能会拉伸至变形。
Aspect Fit 在保持长宽比的前提下，缩放图片，使得图片在容器内完整显示出来。
Aspect Fill 在保持长宽比的前提下，缩放图片，使图片充满容器。

现在我们的目标是将三种情况对应的顶点坐标求出来，由于顶点坐标是按比例计算，而纹理坐标固定不变，求顶点坐标其实就是求出 $\frac{w_{texture}}{w_{drawable}}$ 以及 $\frac{h_{texture}}{h_{drawable}}$ 。

二. Scale的顶点坐标

Scale不用说了，因为是填充，所以坐标取±1即可。

三. Aspect Fit的顶点坐标

在探究Aspect Fit和Aspect Fill之前，先来看看一个方法AVMakeRectWithAspectRatioInsideRect，这个方法的意义是，将texture等比缩放、居中填充到drawable中，如下图所示：

看样子是不是很眼熟？没错这个就是Aspect Fit的方法填充的，也就是说，至少会有一条边会与对应的drawable长/宽相等，且为等比缩放，即：

$\frac{w_{texture}}{w_{inset}} = \frac{h_{texture}}{h_{inset}}$

那么假设我们是宽相等，则有：

$w_{texture} = w_{drawable}$

$w_{inset} = w_{drawable}$

$\frac{h_{texture}}{h_{drawable}} = \frac{w_{texture}h_{inset}}{h_{drawable}w_{inset}} =\frac{h_{inset}}{h_{drawable}}$

同理，高相等的话就是

$h_{texture} = h_{drawable}$

$\frac{w_{texture}}{w_{drawable}} =\frac{w_{inset}}{w_{drawable}}$

四. Aspect Fill的顶点坐标

当我们需要充满容器时，同样的，至少会有一条边会与对应的drawable长/宽相等，且为等比缩放。

$\frac{w_{texture}}{w_{inset}} = \frac{h_{texture}}{h_{inset}}$

如上图，假设我们是高相等，则根据图片有：

$h_{texture} = h_{drawable}$

$w_{inset} = w_{drawable}$

$\frac{w_{texture}}{w_{drawable}} = \frac{h_{texture}w_{inset}}{w_{drawable}h_{inset}} = \frac{h_{texture}}{h_{inset}} = \frac{h_{drawable}}{h_{inset}}$

由此，就可以得到我们的三种形式的顶点啦！

五. 总结

Fit和Fill会根据texture的长宽比，至少有一条边和drawable长度相等。

当texture长>宽时，Fit会使inset宽相等，高度等比缩放，

恒有： $w_{inset} = w_{drawable}$

如果需要Fit则会有： $w_{texture} = w_{drawable}$

如果需要Fill则会有： $h_{texture} = h_{drawable}$

当texture长<宽时，Fit会使inset高相等，宽度等比缩放，

恒有： $h_{inset} = h_{drawable}$

如果需要Fit则会有： $h_{texture} = h_{drawable}$

如果需要Fill则会有： $w_{texture} = w_{drawable}$

由此即可推导出我们上面的公式~