Canvas绘制图片有3种方式
- drawImage(variant image, real dx, real dy)：在指定位置（dx, dy）绘制image，image可以是image元素（*.png），图片URL和ImageComponent的id。
- drawImage(variant image, real dx, real dy, real dw, real dh)：将图片绘制在指定的矩形区域内，图像会自动拉伸以适应目标矩形。
- drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)：将源图像的一部分区域绘制到目标矩形内，图像会自动拉伸以适应目标矩形。
绘制图片需要带图片加载完毕后，才可以进行绘制，否则图片不会显示，代码如下所示。
import QtQuick 2.0Canvas {width: 300height: 300contextType: "2d"property var imageUrl: "qrc:/img/flower.png"onPaint: {context.lineWidth=2context.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：根据当前路径包围的区域来裁切后续的绘图操作