2014年6月8日 星期日

在QML使用Image原件 ( Image Element In QML )

介紹:
  • 如何使用QML的Image原件
Introduction:
  • How to used Image element in QML 

開發環境:
  • QT 5.2
  • QtQuick 2.1

import QtQuick 2.0

Rectangle {
    id      : root
    width   : 300
    height  : 300
    color   : "#D8D8D8"

    Row{
        x       : 20
        y       : 25
        spacing : 10

        Image {
            id: image1
            width: 128
            height: 128
            asynchronous:true
            //非同步讀取,檔案過大時不會lag,初始值是false
            cache : false
            //影像暫存,但檔案過大時不適合,所以建議設定false,初始值是true
            source: "./lena.jpg"
            mirror : true //鏡面翻轉
        }
        Image {
            id: image2
            width: 128
            height: 128/2
            source: "./lena.jpg"
            fillMode: Image.PreserveAspectCrop
            //Image.Stretch 自動縮放至設定大小,但會因比例不同而造成扭曲
            //Image.PreserveAspectFit 自動縮放至正常比例
            //Image.PreserveAspectCrop 自動裁切
            //Image.Tile 原始大小水平、垂直排滿畫面
            //Image.Pad 原始大小顯示
            clip: true
            onStatusChanged: {
                if (image2.status == Image.Ready)
                    console.log('Loaded Finish')
            //Image.Null - 沒有讀取影像
            //Image.Ready - 影像讀取完畢
            //Image.Loading - 影像正在讀取
            //Image.Error - 影像讀取失敗
            }
        }
    }
}

以上顯示效果如下圖。


0 意見:

張貼留言