zoom the Image Element in QML. without using QImage::scaled(), QPixmap::scaled().

Question

I am trying to implement zoom in / out of a image using Image Element in QML. I want the Pixel scale to be modified if i double click / pinch zoom.

How can i implement this without using QImage::scaled(), QPixmap::scaled(). Basically i dont want to involve Qt logic into my application.

I want Similar effect to hat is happening in the following tutorial http://harmattan-dev.nokia.com/docs/library/html/qt4/widgets-imageviewer.html

But without Qt Logic in the app.

Matthias -_- Matthias -_- · Accepted Answer · 2013-08-31T09:23:51

i know it's not the best answer but i cannot write a comment (i got less then 50 reps...) but zooming in/out qml is easy using PinchArea if you add a MouseArea you can also use onClicked or onDoubleClicked.... there is a useful example for pinch to zoom here(qt.git). The ImageViewer example you posted got features like print save and so on, and you don't want to use "qt Logic", so i think you will need to use "qt Logic". I would wirte one class for each feature and implement it where i need it. first of all i think this could help you(Extending QML Functionalities using C++). Here a (not tested) example for saveing and reading a file:

fileio.h

#ifndef FILEIO_H
#define FILEIO_H
#include <QObject>
#include <QVariant>
class FileIO : public QObject
{
Q_OBJECT
public:
Q_PROPERTY(QString source
           READ source
           WRITE setSource
           NOTIFY sourceChanged)
explicit FileIO(QObject *parent = 0);


Q_INVOKABLE QString source();
Q_INVOKABLE QVariant read();
Q_INVOKABLE bool write(const QVariant& data);

public slots:
void setSource(const QString& source) ;

signals:
void sourceChanged(const QString& source);
void error(const QString& msg);

private:
QString mSource;
};

#endif // FILEIO_H

and fileio.cpp

#include "fileio.h"
#include <QFile>
#include <QDataStream>
#include <QString>
#include <QDebug>

FileIO::FileIO(QObject *parent) :
QObject(parent){
}

QString FileIO::source(){
return mSource;
}

QVariant FileIO::read()
{
if (mSource.isEmpty()){
    emit error("source is empty");
    return QVariant();
}

QFile file(mSource);
QVariant fileContent; // i dont know if you can use QImage but i think you cann't
if ( file.open(QIODevice::ReadOnly) ) {
    QDataStream t( &file );
    fileContent << t //you may have to reimplement "<<" operator
    file.close();
} else {
    emit error("Unable to open the file");
    return QVariant();
}
return fileContent;
}.....

and register that in main.cpp like

qmlRegisterType<FileIO, 1>("FileIO", 1, 0, "FileIO");

so you can import it in your qml like

import FileIO 1.0
Rectangle{
id: someId
...
FileIO{
id: yourAccessToYourFileIOclass
}
}

i've not tested that code yet, i hope it helps.

for better answers post what you want to do exacly save, print , any filters....

p.s. I also would create a model in qt and bring it to qml...

greez Matthias

zoom the Image Element in QML. without using QImage::scaled(), QPixmap::scaled().

1 Answers