QML Image Element 属性详情说明及样例

QML Image Element

Image元素继承Item，支持PNG，JPG，GIF，BMP等静态图片格式，也支持矢量图片格式SVG，不支持动画（动画可以用它的派生子元素AnimatedImage）。

Image定义的主要属性成员包括以下（继承Item的基本属性参考后面第二个表格）：

1）asynchronous : bool//是否使用额外的线程加载图片（如果是本地大图片，建议设置成true）。如果是网络加载图片参数无法修改默认是true。

2）autoTransform : bool //whether the image should automatically apply image transformation metadata such as EXIF orientation.默认为false.

3）cache : bool //是否缓存加载的图片，默认为true。如果大图片建议设置为false，节约内存。

4）fillMode : enumeration //如果item显示区域与image的size 不匹配是，设置如何显示image

 - Image.Stretch -image 缩放到item 显示区域内（默认方式）

 - Image.PreserveAspectFit - 根据item显示区域缩放，不裁剪图片

 - Image.PreserveAspectCrop - 根据item显示区域同比例缩放，需要时适当裁减图片

 - Image.Tile - 根据item显示区域，在水平，垂直方向重复显示图片

 - Image.TileVertically - 水平方向缩放图片，垂直方向重复显示图片

 - Image.TileHorizontally - 垂直方向缩放图片，水平方向重复显示图片

- Image.Pad – 不处理图片 the image is not transformed

5）mirror : bool // 水平镜像特效，默认为false

6）paintedHeight : real //只读属性，保存着图片被绘制的高度

7）paintedWidth : real //只读属性，保存着图片被绘制的宽度

8）progress : real // 只读属性，图片加载进度，（0.0-1.0)

9）smooth : bool //平滑处理。如果图片经过缩放，那么打开参数会导致图片加载速度变慢。

10）source : url // 图片地址，注意qml对路径的处理，有时需要使用file://， qrc。

11）sourceSize : QSize // 指定图片在内存中保存的图片宽，高，而不管图片的实际宽，高，这样可以使图片使用内存减少。在设置了sourceSize 之后会引起图片的重新加载。

12）status : enumeration // 只读属性，获取图片的状态

 - Image.Null - 没有图片

 - Image.Ready - 图片完成加载

 - Image.Loading - 正在加载图片

 - Image.Error - 加载图片时，发生错误

13）horizontalAlignment : enumeration

- Image.AlignLeft

- Image.AlignRight

- Image.AlignHCenter(default)

14）verticalAlignment : enumeration

- Image.AlignTop

 - Image.AlignBottom

 - Image.AlignVCenter.(default)

15）mipmap : bool （default with false，QT5.3引入）

图像变换中优化渲染效果，通常比smooth效果更好些，但是会有更多资源消耗

继承于Item的属性：

activeFocus : bool
activeFocusOnTab : bool
anchors.alignWhenCentered : bool
anchors.baseline : AnchorLine
anchors.baselineOffset : real
anchors.bottom : AnchorLine
anchors.bottomMargin : real
anchors.centerIn : Item
anchors.fill : Item
anchors.horizontalCenter : AnchorLine
anchors.horizontalCenterOffset : real
anchors.left : AnchorLine
anchors.leftMargin : real
anchors.margins : real
anchors.right : AnchorLine
anchors.rightMargin : real
anchors.top : AnchorLine
anchors.topMargin : real
anchors.verticalCenter : AnchorLine
anchors.verticalCenterOffset : real
antialiasing : bool
baselineOffset : int
children : list<Item>
childrenRect.height : real
childrenRect.width : real
childrenRect.x : real
childrenRect.y : real
clip : bool
data : list<Object>
enabled : bool
focus : bool
height : real
implicitHeight : real
implicitWidth : real
layer.effect : Component
layer.enabled : bool
layer.format : enumeration
layer.mipmap : bool
layer.samplerName : string
layer.smooth : bool
layer.sourceRect : rect
layer.textureMirroring : enumeration
layer.textureSize : size
layer.wrapMode : enumeration
opacity : real
parent : Item
resources : list<Object>
rotation : real
scale : real
smooth : bool
state : string
states : list<State>
transform : list<Transform>
transformOrigin : enumeration
transitions : list<Transition>
visible : bool
visibleChildren : list<Item>
width : real
x : real
y : real
z : real
childAt(real x, real y)
bool contains(point point)
forceActiveFocus(Qt::FocusReason reason)
forceActiveFocus()
bool grabToImage(callback, targetSize)
object mapFromGlobal(real x, real y)
object mapFromItem(Item item, real x, real y, real width, real height)
object mapFromItem(Item item, real x, real y)
object mapToGlobal(real x, real y)
object mapToItem(Item item, real x, real y, real width, real height)
object mapToItem(Item item, real x, real y)
nextItemInFocusChain(bool forward)

实用样例（关键帧预览图）

编辑样例如下（结合常见时间线）

    function calcIconWidth(h, parent_h) {
        //console.log("===== image_h=", h, " parent_h=", parent_h)
        return h * 4 / 3;
    }

    function calcFramePoint(index, startPoint, endPoint, clipWidth) {
        var res = (60 * index) * (endPoint - startPoint) / clipWidth + startPoint;
        var resInt = Math.floor(res + 0.5);
        //console.log("===== [in,out]:[", startPoint, ",", endPoint, "], clipWidth=", clipWidth, "no.", index, "framepoint:", resInt)
        return resInt;
    }

    Image {
        id: outThumbnail
        visible: settings.timelineShowThumbnails
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: parent.border.width + 1
        anchors.rightMargin: parent.border.width + 1
        anchors.bottom: parent.bottom
        anchors.bottomMargin: parent.height / 3 + 1
        property int clipWidth: clipRoot.width - clipRoot.border.width * 2
        width: clipWidth%60 //calcIconWidth(height, parent.height) //height * 4.0/3.0
        fillMode: Image.Pad //Image.PreserveAspectFit
        horizontalAlignment: Image.AlignLeft
        source: imagePath(outPoint)
    }

    // image repeater
    Repeater {
        id: imageRepeater
        property int clipWidth: clipRoot.width - clipRoot.border.width * 2
        model: clipWidth / 60 - 1
        Image {
            visible: settings.timelineShowThumbnails
            cache: false
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.topMargin: parent.border.width + 1
            anchors.leftMargin: parent.border.width + 1 + (index + 1) * 60
            anchors.bottom: parent.bottom
            anchors.bottomMargin: parent.height / 3 + 1
            width: calcIconWidth(height, parent.height) //height * 4.0/3.0
            fillMode: Image.PreserveAspectFit
            source: imagePath(calcFramePoint(index + 1, inPoint, outPoint, imageRepeater.clipWidth))
        }
    }

    Image {
        id: inThumbnail
        visible: settings.timelineShowThumbnails
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: parent.border.width + 1
        anchors.leftMargin: parent.border.width + 1
        anchors.bottom: parent.bottom
        anchors.bottomMargin: parent.height / 3 + 1
        width: calcIconWidth(height, parent.height) //height * 4.0/3.0
        fillMode: Image.PreserveAspectFit
        source: imagePath(inPoint)
    }