Qimages container - qml

Question

I’m looking for a class like QSprite, which takes responsibility for reading pixmaps from a source file, split the source image into sequence of images and return sub image by index.
Something like this:
class QSprite2
{
bool load(QUrl url, QSize frameSize);
QImage getFrame(int index);
};
Is there any way to get described functionality with existing classes. Or maybe I have to implement the describe logic by myself?

Answer 1

You can use QQuickImageProvider. Here's a class I wrote that does something similar:
SpriteImageProvider.h:
#ifndef SPRITEIMAGEPROVIDER_H
#define SPRITEIMAGEPROVIDER_H
#include <QHash>
#include <QImage>
#include <QString>
#include <QQuickImageProvider>
#include "IsleGlobal.h"
class ISLE_EXPORT SpriteImageProvider : public QQuickImageProvider
{
public:
SpriteImageProvider();
QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) override;
private:
int parseFrameIndex(const QString &frameIndexStr) const;
int parseFrameWidth(const QString &frameWidthStr) const;
int parseFrameHeight(const QString &frameHeightStr) const;
QHash<QString, QImage> mImages;
};
#endif // SPRITEIMAGEPROVIDER_H
SpriteImageProvider.cpp:
#include "SpriteImageProvider.h"
#include <QImage>
#include <QDebug>
SpriteImageProvider::SpriteImageProvider() :
QQuickImageProvider(QQmlImageProviderBase::Image)
{
}
static const QRgb whiteRgba = qRgba(255, 255, 255, 255);
static const QRgb magentaRgba = qRgba(255, 0, 255, 255);
static const QRgb transparentRgba = qRgba(0, 0, 0, 0);
QImage SpriteImageProvider::requestImage(const QString &id, QSize *size, const QSize &)
{
QStringList args = id.split(QLatin1String(","));
if (args.length() < 1) {
qWarning() << "Must pass at least the file name as arguments for SpriteImageProvider source";
return QImage();
} else if (args.length() != 1 && args.length() != 2 && args.length() != 4) {
qWarning() << "Must pass either (fileName), (fileName, frameIndex) or"
<< "(fileName, frameWidth, frameHeight, frameIndex) as arguments for SpriteImageProvider source";
return QImage();
}
const QString imageFilename = ":/" + args.first();
int frameIndex = -2;
int frameWidth = -2;
int frameHeight = -2;
if (args.length() > 1) {
frameIndex = parseFrameIndex(args.last());
if (frameIndex == -1)
return QImage();
}
if (args.length() == 4) {
frameWidth = parseFrameIndex(args.at(1));
if (frameWidth == -1)
return QImage();
frameHeight = parseFrameIndex(args.at(2));
if (frameHeight == -1)
return QImage();
}
QHash<QString, QImage>::const_iterator it = mImages.find(imageFilename);
if (it == mImages.end()) {
QImage image(imageFilename);
if (image.isNull()) {
qWarning() << "Failed to load image at" << imageFilename;
return image;
}
// TODO: is there a better way of doing this?
QImage alphaImage = image;
for (int y = 0; y < alphaImage.height(); ++y) {
for (int x = 0; x < alphaImage.width(); ++x) {
const QRgb pixelRgb = alphaImage.pixel(x, y);
if (pixelRgb == whiteRgba || pixelRgb == magentaRgba)
alphaImage.setPixel(x, y, transparentRgba);
}
}
mImages.insert(imageFilename, alphaImage);
it = mImages.find(imageFilename);
}
if (frameWidth == -2 || frameHeight == -2) {
if (frameIndex == -2) {
// Use the whole image.
frameWidth = it.value().width();
frameHeight = it.value().height();
frameIndex = 0;
} else {
frameWidth = 64;
frameHeight = 64;
}
}
// Copy an individual frame out of the larger image.
const int framesWide = it.value().width() / frameWidth;
const QRect subRect((frameIndex % framesWide) * frameWidth,
(frameIndex / framesWide) * frameHeight,
frameWidth,
frameHeight);
// qDebug() << "id" << id;
// qDebug() << "framesWide" << framesWide;
// qDebug() << "subRect" << subRect;
const QImage frameImage = it.value().copy(subRect);
*size = frameImage.size();
return frameImage;
}
int SpriteImageProvider::parseFrameIndex(const QString &frameIndexStr) const
{
bool convertedToIntSuccessfully = false;
const int frameIndex = frameIndexStr.toInt(&convertedToIntSuccessfully);
if (!convertedToIntSuccessfully) {
qWarning() << "Failed to convert frame index" << frameIndexStr << "to an int";
return -1;
}
return frameIndex;
}
int SpriteImageProvider::parseFrameWidth(const QString &frameWidthStr) const
{
bool convertedToIntSuccessfully = false;
const int frameWidth = frameWidthStr.toInt(&convertedToIntSuccessfully);
if (!convertedToIntSuccessfully) {
qWarning() << "Failed to convert frame width" << frameWidthStr << "to an int";
return -1;
}
return frameWidth;
}
int SpriteImageProvider::parseFrameHeight(const QString &frameHeightStr) const
{
bool convertedToIntSuccessfully = false;
const int frameHeight = frameHeightStr.toInt(&convertedToIntSuccessfully);
if (!convertedToIntSuccessfully) {
qWarning() << "Failed to convert frame height" << frameHeightStr << "to an int";
return -1;
}
return frameHeight;
}
It also supports "alpha keys" - white and magenta pixels in the source image will be turned into transparent pixels.
It's registered with the QML engine like this:
mEngine->addImageProvider("sprite", new SpriteImageProvider);
and used in QML like this:
import QtQuick 2.5
Image {
source: qsTr('image://sprite/sprites/hugh.png,%1').arg(_sceneItemComponent ? _sceneItemComponent.facingDirection : 0)
}
where facingDirection is the frame index to use. There are also other arguments you can pass that are mentioned in the .cpp file.