Qt文档阅读笔记-Image QML官方解析与实例

目录

 

 

官方解析

博主例子

---

 

官方解析

Image
Image用于展示图片。
使用source属性可以使用URL指定一张图片。
只要是Qt能打开的图片都支持，如果要展示动态图，要使用：BnimatedSprite和AnimatedImage。
如果width和height属性没有被指定，将会使用图像原来的大小。fillMode属性可以使得图像被拉伸和平铺。

例子：
最简单的图像用法！

  import QtQuick 2.0

  Image {
      source: "pics/qtlogo.png"
  }

 

博主例子

此处的例子有2个功能，一个是补充官方的伪代码，二是把以前的方图，变化为圆图（非拉伸）

程序运行截图如下：

 

程序结构图如下：

源码如下：

QMLImageDemo.pro

QT       += core gui qml quick

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = QMLImageDemo
TEMPLATE = app

DEFINES += QT_DEPRECATED_WARNINGS


SOURCES += main.cpp

HEADERS  +=

RESOURCES += \
    resources.qrc

main.cpp

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/main.qml"));

    if(engine.rootObjects().isEmpty()){

        qDebug() << "engine load failed!";
        return -1;
    }


    return a.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

ApplicationWindow {

    visible: true
    width: 300
    height: 300

//    Image {

//        anchors.centerIn: parent
//        source: "img/logo.png"
//    }

    Image {

        anchors.centerIn: parent
        id: pigpigpig
        source: "img/logo.png"
        sourceSize: Qt.size(parent.width, parent.height)
        smooth: true
        visible: false
    }

    Rectangle {

        id: mask
        width: parent.width
        height: parent.height
        radius: height / 2
        color: "red"
        visible: false
    }

    OpacityMask {

        anchors.fill: pigpigpig
        source: pigpigpig
        maskSource: mask
    }

}