27.Flutter: Become a Canvas Master (III)

Directory portal:A Guide to The Quick Start to Flutter

DrawImage ()

Draw pictures.

🌰 e.g. :

canvas.drawImage(background, Offset(100, 100), paint);
Copy the code

🖼 effect:

Simple, isn’t it?

⚠️ Note that Offset is used to set the Offset of the upper left corner of the image relative to the upper left corner of the drawing area.

You can see it in action in the renderings above.

Draw pictures drawImageRect()

Draw function to fill a rectangle on an image into another rectangle.

Don’t understand?

It might be clear to look at an example.

🌰 e.g. :

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

🖼 effect:

In this example, stretch the upper-left area of the image to fill the entire screen.

Let’s look at another example 🌰 to help you understand.

🌰 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); / / get a picture area, of the specified size, center location of the Rect the Rect inputRect = Alignment. The center. The inscribe (fittedSizes source, Offset.. zero & imgSize); / / get a drawing area, of the specified size, center location of the Rect the Rect outputRect = Alignment. The center. The inscribe (fittedSizes. Destination, dstRect); canvas.drawImageRect(background, inputRect, outputRect, paint);Copy the code

🖼 effect:

In the above example, the appropriate portion is selected based on the center of the image and filled to the entire screen.

This example uses the applyBoxFit() function to calculate the corresponding zoom size according to the fit mode. BoxFit has several modes. See the official description: BoxFit API.

Directory Portals: A Guide to The Quick Start To Flutter

How can I be found?

Portal:CoorChice homepage

Portal:Lot of CoorChice