css - 等效于使用 Qt 或 GTK 生成平铺 png 的 CSS 网格模板列

Question

我正在使用 HTML/CSS 进行基本布局，我想迁移到没有 Web 组件的情况下，使用适当的 GUI 库来简单地呈现我当前在浏览器中呈现的整个布局的 PNG。

我有图像我正在使用 grid-template-columns 函数在 CSS 中平铺显示，在这种情况下，2 行 5 个图像：

#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr
}

<div>
  <div id="wrapper">
    <img src="mypng1.png">
    <img src="mypng2.png">
    ...
    <img src="mypng9.png">
    <img src="mypng10.png">
  </div>
</div>

我希望将其从 web/html/css 转换为可以在我的 (linux) 机器上本地呈现 png 的 GUI 布局。我将如何在 Qt 或 GTK 或任何类似的库中编写此脚本？

具体来说，我希望控制：

1. 行数和列数
2. 哪些图像的有序输入列表
3. 图像之间的空间，可能调整大小
4. 输出尺寸/分辨率

我的示例有 10 张图像，但我想象这会扩展到数千个平铺在一起的 PNG，因此像imagemagick montage这样的解决方案在 CSS 之前在 RAM 负载下会失败。

更新

谢谢，下面的评论非常有用；我想我正在寻找的是理想的东西：

$ application whatever.xml.template #or
$ application whatever.xml.template -ncol=5 myfolder/mypng* -order 1,2,3,5,4 -dim 90x90 -output master.png

what.xml.template 可能存储除顺序和文件名之外的所有内容，但也可能存储我作为命令行参数添加的所有内容。目前，我使用我的 Web 后端来执行这种逻辑并填充 HTML 模板。如果我可以在非基于浏览器的工具中做类似的模板来生成 master.png，那就太好了。

标签： cssqtlayoutgtkpng

Answer 1

您可以在 qt 中平铺图像：http: //doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop

如果您希望它们在特定的列和行中，请检查Column和Row。
它应该很容易实现。