27.Flutter:成爲Canvas繪製大師(三)

目錄傳送門：《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