QML如何绘制与grabToImage（）不同的图像

是否有任何可能的方法让grabToImage()缓冲区与GUI中显示的不同？ 我在GUI中使用ChartView没有图例，并且想用图例将它导出到PNG 。 所以我尝试：

chartView.legend.visible = true
chartView.update()
chartView.grabToImage(function(result) {
    console.log("grabbed")

    var path = filename.toString().replace(/^(file:/{2})/,"");
    console.log(path + result.saveToFile(path));
    chartView.legend.visible = false
    update();
});

但是这两个更新都是在控制出现这个函数之后才发生的，所以我没有在PNG中绘制图例。 另外我希望传说的外观对用户来说是不可知的。 有没有什么方法可以在QML中做到这一点？

---

我不确定，我是否对你说得很对。

我的建议是，不要抓住你展示的Item ，而是抓住它的一个副本，然后你随意修改。
这里复制并不意味着你有两次相同的对象，但是通过使用ShaderEffectSource来渲染它两次。 在获取ShaderEffectSource图像之前，您可以添加任何你喜欢的东西。

在我的例子中，我显示一个简单的Rectangle ，具有很好的渐变效果。 我保存的是由“我是传奇” Text扩展的相同Rectangle 。 用户在任何时候都不会在视图中看到此文本。

Rectangle {
    id: commonView
    width: 200
    height: 200
    gradient: Gradient {
        GradientStop { position: 0; color: 'steelblue' }
        GradientStop { position: 1; color: 'orange' }
    }
    MouseArea {
        anchors.fill: parent

        // don't grab the rectangle itself.
        onClicked: legendView.grabToImage(function(result) {
            console.log(result.saveToFile("something.png"));
        });
    }
}

ShaderEffectSource {
    id: legendView
    visible: false // Does not need to be shown.
    sourceItem: commonView
    width: 200
    height: 200
    Text {
        anchors {
            right: parent.right
            bottom: parent.bottom
        }
        text: 'I am legend'
    }
}

您可以通过仅使ShaderEffectSource处于活动状态或甚至在需要时创建来优化性能。

您可以使用ShaderEffectSource.live -property来禁用它的更新。 然后使用scheduleUpdate()来触发更新。

这可能看起来像这样：

Rectangle {
    id: commonView
    width: 200
    height: 200
    gradient: Gradient {
        GradientStop { position: 0; color: 'steelblue' }
        GradientStop { id: gs1; position: 1; color: 'orange' }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            gs1.position -= 0.1
            legendView.save()
        }
    }
}

ShaderEffectSource {
    id: legendView
    y: 200
    visible: false // Do not render it (will only be rendered when called grapToImage()
    sourceItem: commonView
    width: 200
    height: 200
    live: false // Will only be updated, when explicitly called for
    function save() {
        console.log('Schedule Save')
        scheduleUpdate() // explicitly update. grabToImage() will force rendering afterwards.
        legendView.grabToImage(function(result) {
                        console.log(result.saveToFile("something" +gs1.position.toFixed(1) + ".png"));
                    })
    }

    // Put additional stuff on it.
    Text {
        anchors {
            right: parent.right
            bottom: parent.bottom
        }
        text: 'I am legend!'
    }
}

链接地址: http://www.djcxy.com/p/39613.html

上一篇: QML How to paint different to grabToImage()

下一篇: Gradle sync failed, 'debugCompile' directly is not allowed