在 QML::Image 视图上更新多个 QImage 仅显示最后发送的一个
Updating multiple QImages on QML::Image view displays only the last one sent
我有 Image qml component to display QImage 个。以下是它的 QML
代码。
代码:
Item {
Image {
id: my_qimage_viewer
anchors.fill: parent
}
Connections {
target: qimage_selector_cpp_backend
onQImageDisplayRequested: {
my_qimage_viewer.source = next_qimage_source
console.log("New qimage sent for display is : " + my_qimage_viewer.source)
}
}
}
什么是有效的:
我有一个 C++ class 使用 QQuickImageProvider 每次都提供具有不同 ID 的 QImage
。
如果我在用户选择某个按钮时更新单个QImage
,则此技术基本上有效。我可以即时生成 QImage
并在 my_qimage_viewer
上更新它。还能够根据用户的需求显示多个不同的图像。这证明我使用QQuickImageProvider
的技术基本上是有效的。
什么不起作用
但是,问题就出在这里。当我随后发送 many QImage
s 时,比如其中的 50-60 个都在 for 循环中,那么它不会显示所有但 只显示最后一个已发送一个用于更新 !
我的 objective 是尝试播放 50-60 QImage
s,中间有一些毫秒间隔 让它们看起来像 video/animation. Image 组件不是为这种用途而设计的吗?还是我操作有误?
问题:
可能我应该等待每个 QImage
显示完成后再更新下一个?如果缺少什么,我该怎么做?
是否有应用程序使用 Image 显示多个 QImage
使其看起来像视频或动画的示例?
如果您使用 for-loop
您没有时间显示和更新图像,您应该在每张图像之间留出一点时间。
假设图像的采集时间小于某个值,例如小于 1/60 秒,我们可以在适当的步骤中使用 NumberAnimation
设置:
Window {
visible: true
width: 640
height: 480
Image {
property int number
id: name
source: "image://numbers/"+number
NumberAnimation on number {
from:0
to: 60
duration: 1000
}
}
}
imageprovider.h
#ifndef IMAGEPROVIDER_H
#define IMAGEPROVIDER_H
#include <QQuickImageProvider>
#include <QPainter>
#include <QTime>
class ImageProvider : public QQuickImageProvider
{
public:
ImageProvider():QQuickImageProvider(QQuickImageProvider::Image){
qsrand(QTime::currentTime().msec());
}
QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize){
int width = 100;
int height = 50;
if (size)
*size = QSize(width, height);
QImage img(requestedSize.width() > 0 ? requestedSize.width() : width,
requestedSize.height() > 0 ? requestedSize.height() : height, QImage::Format_RGB32);
img.fill(QColor(qrand() % 256, qrand() % 256, qrand() % 256));
QPainter painter(&img);
painter.setRenderHint(QPainter::Antialiasing, true);
painter.drawText(QRectF(QPointF(0, 0), img.size()), Qt::AlignCenter,
QTime::currentTime().toString("hh:mm:ss.z")+" "+id);
painter.end();
return img;
}
};
#endif // IMAGEPROVIDER_H
完整的例子可以在下面找到link
我有 Image qml component to display QImage 个。以下是它的 QML
代码。
代码:
Item {
Image {
id: my_qimage_viewer
anchors.fill: parent
}
Connections {
target: qimage_selector_cpp_backend
onQImageDisplayRequested: {
my_qimage_viewer.source = next_qimage_source
console.log("New qimage sent for display is : " + my_qimage_viewer.source)
}
}
}
什么是有效的:
我有一个 C++ class 使用 QQuickImageProvider 每次都提供具有不同 ID 的 QImage
。
如果我在用户选择某个按钮时更新单个QImage
,则此技术基本上有效。我可以即时生成 QImage
并在 my_qimage_viewer
上更新它。还能够根据用户的需求显示多个不同的图像。这证明我使用QQuickImageProvider
的技术基本上是有效的。
什么不起作用
但是,问题就出在这里。当我随后发送 many QImage
s 时,比如其中的 50-60 个都在 for 循环中,那么它不会显示所有但 只显示最后一个已发送一个用于更新 !
我的 objective 是尝试播放 50-60 QImage
s,中间有一些毫秒间隔 让它们看起来像 video/animation. Image 组件不是为这种用途而设计的吗?还是我操作有误?
问题:
可能我应该等待每个 QImage
显示完成后再更新下一个?如果缺少什么,我该怎么做?
是否有应用程序使用 Image 显示多个 QImage
使其看起来像视频或动画的示例?
如果您使用 for-loop
您没有时间显示和更新图像,您应该在每张图像之间留出一点时间。
假设图像的采集时间小于某个值,例如小于 1/60 秒,我们可以在适当的步骤中使用 NumberAnimation
设置:
Window {
visible: true
width: 640
height: 480
Image {
property int number
id: name
source: "image://numbers/"+number
NumberAnimation on number {
from:0
to: 60
duration: 1000
}
}
}
imageprovider.h
#ifndef IMAGEPROVIDER_H
#define IMAGEPROVIDER_H
#include <QQuickImageProvider>
#include <QPainter>
#include <QTime>
class ImageProvider : public QQuickImageProvider
{
public:
ImageProvider():QQuickImageProvider(QQuickImageProvider::Image){
qsrand(QTime::currentTime().msec());
}
QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize){
int width = 100;
int height = 50;
if (size)
*size = QSize(width, height);
QImage img(requestedSize.width() > 0 ? requestedSize.width() : width,
requestedSize.height() > 0 ? requestedSize.height() : height, QImage::Format_RGB32);
img.fill(QColor(qrand() % 256, qrand() % 256, qrand() % 256));
QPainter painter(&img);
painter.setRenderHint(QPainter::Antialiasing, true);
painter.drawText(QRectF(QPointF(0, 0), img.size()), Qt::AlignCenter,
QTime::currentTime().toString("hh:mm:ss.z")+" "+id);
painter.end();
return img;
}
};
#endif // IMAGEPROVIDER_H
完整的例子可以在下面找到link