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

8,534 阅读1分钟

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

绘制图片drawImage()

绘制图片。

🌰 e.g.:

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

🖼 效果:

很简单,不是吗?

⚠️ 需要注意的是,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);

🖼 效果:

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

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

🌰 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);

🖼 效果:

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

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

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

如何找到我?

传送门:CoorChice 的主页

传送门:CoorChice 的 Github