Canvas绘制图片-drawImage()方法

Canvas绘制图片有3种方式

1. drawImage(variant image, real dx, real dy)：在指定位置（dx, dy）绘制image，image可以是image元素（*.png），图片URL和ImageComponent的id。
2. drawImage(variant image, real dx, real dy, real dw, real dh)：将图片绘制在指定的矩形区域内，图像会自动拉伸以适应目标矩形。
3. drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)：将源图像的一部分区域绘制到目标矩形内，图像会自动拉伸以适应目标矩形。

绘制图片需要带图片加载完毕后，才可以进行绘制，否则图片不会显示，代码如下所示。

import QtQuick 2.0

Canvas {
    width: 300
    height: 300
    contextType: "2d"
    property var imageUrl: "qrc:/img/flower.png"

    onPaint: {
        context.lineWidth=2
        context.strokeStyle="blue"
        context.fillStyle="lightgray"

        context.save()
        context.translate(width/2, height/2)
        context.drawImage(imageUrl, -30, -30, 80, 80)
        context.restore()
    }

    // 启动后，页面加载图片
    Component.onCompleted: {
        loadImage(imageUrl)
    }
    
    // 图片加载成功，触发界面重新绘制方法
    onImageLoaded: {
        requestPaint()
    }
}

canvas绘制支持变换

• translate：平移
• rotate：旋转
• scale：缩放
• shear：错切，有点类似于将矩形旋转成平行四边形
• setTransform()：矩阵变换
• clip：根据当前路径包围的区域来裁切后续的绘图操作