0

我正在 React Native 中创建一个视频编辑应用程序,它允许您将字幕刻录到任何视频上。我遇到的问题是手机屏幕上的字体大小与渲染视频后的字体大小不匹配。

我可以保证在应用程序端适当地缩小文本,因为视频在手机屏幕上看起来明显比原始尺寸小。因此,我作为预览放置在视频顶部的文本需要相应地缩小。

问题是当我渲染视频时,每种不同的字体似乎都有不同的比例因子。所以预览器总是关闭。我的解决方案是手动放大/缩小每种字体的近似宽度和高度因子。但这是一个非常糟糕的解决方案。

我认为它与您可以在 ffmpeg 上设置的名为 font.config 的文件有关。

我怎么能做例如。React Native 中的 Arial, 14 渲染方式与 ffmpeg 上的 Arial, 14 相同吗?我真的需要帮助。我什至不知道在哪里看。

更新示例***

如您所见,我正在尝试在原始视频上渲染大小为 93 的字幕。 在此处输入图像描述

由于手机屏幕上渲染的视频比原始视频小,我计算了一个调整大小因子,即:

let resizeFactor = originalVideoHeight / renderedVideoHeightOnApp

现在我只是调整了应用程序上的文本大小,如下所示:

let resizedFontSize = videoFontSize/resizeFactor

之后,预览文本将被调整为比原始视频小 N 倍。N 与视频本身调整大小以进行渲染的数字相同。所以一切都应该看起来很完美。

但问题是每种字体的行为不同,并且每种字体的调整大小错误也不同。没有模式。

另一个使用 Open-SansRegular 字体的示例: 在此处输入图像描述

Arial 字体的另一个例子: 在此处输入图像描述

我的解决方案是在第一个逻辑 resizeFactor 之上为字体高度手动选择另一个调整大小因子。

这不是一个好的解决方案,因为用户无法添加自己的字体,因为我需要先“校准”每个字体。 在此处输入图像描述

我还尝试将应用程序上的文本呈现为与视频上的文本相同的大小,然后应用变换:[{scale: 1/resizeFactor}]。它看起来也不太好。

我能得出的唯一结论是 React Native 和 FFMPEG 对字体进行不同的编码,我需要标准化这种编码。也许有一些我什至不明白的花哨的 font.config 文件。

但它在 FFMPEG 文档中:

  1. 使用您自己的 fontconfig 配置。

RNFFmpegConfig.setFontconfigConfigurationPath('');

我还想指出,我在 Aegisub Advanced SubStation Alpha 文件上正确设置了 PlayResX 和 PlayResY 值。我什至试图弄乱 FFMPEG original_size 过滤器。没有任何效果。

4

1 回答 1

0

最后,我最终在 react native 上以我想要的字体大小预渲染了文本,并使用 Text 的 OnTextLayout 属性获取了行信息。

我只是将渲染文本的渲染高度除以实际预期的字体大小并得到一个幻数,因此我将预期的字体大小乘以该幻数,现在文本以正确的大小呈现。

请注意,每种字体都有不同的调整大小因子(“幻数”)。

于 2021-02-13T13:09:44.207 回答