27.Flutter:成为Canvas绘制大师(三)

image

目录传送门：《Flutter快速上手指南》先导篇

绘制图片drawImage()

绘制图片。

🌰 e.g.:

canvas.drawImage(background, Offset(100, 100), paint);

🖼 效果：

image

很简单，不是吗？

⚠️ 需要注意的是，Offset 被用来设置图片的 左上角 相对于绘制区域的 左上角 的偏移量。

你从上面的效果图中也能看到它的作用。

绘制图片drawImageRect()

该绘制函数，可以把图片上的一个矩形部分，以填充至满的形式绘制到另一个矩形中。

不理解？

看个例子也许就清晰了。

🌰 e.g.:

Rect dstRect = Rect.fromLTWH(0, 0, size.width, size.height);
canvas.drawImageRect(background, Rect.fromLTWH(0, 0, 100, 100), dstRect, paint);

🖼 效果：

image

在这个例子中，将图片的左上角区域，拉伸填充到整个屏幕。

再看一个例子🌰，帮助加深理解。

🌰 e.g.：

Size imgSize = Size(
    background.width.toDouble(), background.height.toDouble());
Rect dstRect = Rect.fromLTWH(0, 0, size.width, size.height);
// 根据适配模式，计算适合的缩放尺寸
FittedSizes fittedSizes = applyBoxFit(
    BoxFit.cover, imgSize, dstRect.size);
// 获得一个图片区域中，指定大小的，居中位置处的 Rect
Rect inputRect = Alignment.center.inscribe(
    fittedSizes.source, Offset.zero & imgSize);
// 获得一个绘制区域内，指定大小的，居中位置处的 Rect
Rect outputRect = Alignment.center.inscribe(
    fittedSizes.destination, dstRect);
canvas.drawImageRect(background, inputRect, outputRect, paint);

🖼 效果：

image

上面的例子中，基于图片的中心位置，选取了适合部分，将填充至整个屏幕。

例子通过 applyBoxFit() 函数，根据适配模式计算了对应的缩放尺寸，其中 BoxFit 有多种模式，具体可查看官方的说明：BoxFit API。

如何找到我？

传送门：CoorChice 的主页

传送门：CoorChice 的 Github