Qt:如何在将 2 个 QQuickItems 保存为 png 之前将其合并为一个

Question

来自 this discussion在 StackOverflow 上，我能够很好地将 QML 项目中的图像保存到 png/jpeg 文件中。

如何叠加或合并两个不同的qml层并将它们合并为一个，以将其保存为png/jpeg？

注意:我可以保存单个QQuickItem。只需要知道如何叠加 2 个 QQuickItem

Answer 1

只需让这两个 qml 对象成为根 Item 的子项，然后获取该根项，它将捕获其所有内容。

只需确保根项足够大以包含子项，并且子项不在负空间中，因为它只会捕获根项足迹内部的内容。

您还可以使用 C++ 甚至 QML 进行手动组合。

您的评论中描述的问题是您无法移动东西，那么您能做什么？您可以有两个 Image 元素，而不是将原始 QML 对象作为同一根的父对象，然后捕获项目 A 并将捕获结果设置为图像 A 的源，然后执行项目 B 也是如此，最后，您捕获根项目，这将同时捕获两个图像。

好吧，这是一个简单的例子，它看起来有点复杂，因为抓取是异步的，你必须等待单个抓取结果完成才能抓取“最终”根项目，因此使用定时器。在此示例中，不同的项目排成一行，但您可以按照自己喜欢的方式组合它们:

ApplicationWindow {
  id: window
  visible: true
  width: 640
  height: 480

  Rectangle {
    id: s1
    visible: false
    width: 200
    height: 200
    color: "red"
  }
  Rectangle {
    id: s2
    visible: false
    width: 200
    height: 200
    color: "blue"
  }

  Row {
    id: joiner
    visible: false
    Image { id: t1 }
    Image { id: t2 }
  }

  Image {
    id: result
    y: 200
  }

  Timer {
    id: finish
    interval: 10
    onTriggered: joiner.grabToImage(function(res) {result.source = res.url})
  }

  Component.onCompleted: {
    s1.grabToImage(function(res) {t1.source = res.url})
    s2.grabToImage(function(res) {t2.source = res.url; finish.start() })
  }
}

首先捕获两个矩形并将其用作joiner中图像的源，然后捕获joiner并将其显示在结果图像中，隐藏除最终结果图像之外的所有对象。

更简单的是，您可以使用这个漂亮的小 helper 在单个图像中快速加入任意数量的项目:

  Item {
    id: joinHelper
    visible: false
    property Component ic: Image { }
    property var cb: null

    Row { id: joiner }

    Timer {
      id: finish
      interval: 100
      onTriggered: joiner.grabToImage(joinHelper.cb)
    }

    function join(callback) {
      if (arguments.length < 2) return // no items were passed
      var i
      if (joiner.children.length) { // clean previous captures
        for (i = 0; i < joiner.children.length; ++i) {
          joiner.children[i].destroy()
        }
      }
      cb = callback // set callback for later
      for (i = 1; i < arguments.length; ++i) { // for every item passed
        var img = ic.createObject(joiner) // create empty image
        // need to capture img by "value" because of JS scoping rules
        // otherwise you end up with only one image - the final one
        arguments[i].grabToImage(function(temp){ return function(res){temp.source = res.url}}(img))
      }
      finish.start() // trigger the finishing step
    }
  }

然后你像这样使用它:

joinHelper.join(function(res) { result.source = res.url }, s1, s2)

它仍然使用一行，但您可以轻松调整它以进行您自己的布局。它通过传递最终回调和您要捕获的所有项目来工作，它在内部为每个项目创建一个图像，将它们放入容器中，然后触发完成计时器。

请注意，根据系统的速度和项目的复杂程度以及它们的数量，您可能需要延长计时器间隔，因为只有在所有捕获完成后才需要执行最终回调，图像分配了源并调整了图像的大小以赋予该行适当的尺寸。

我还对大部分内容进行了注释，以使其更易于理解。