Directory portal:A Guide to The Quick Start to Flutter
Following on from the previous article on Flutter: Becoming a Canvas Drawing Master (PART 1), this article will continue to explain common drawing operations on Canvas.
Draw the circle drawCircle()
Draw circles.
🌰 e.g. :
canvas.drawCircle(Offset(size.width / 2, size.height / 2), 100, paint);
Copy the code🖼 effect:
image
Set the hollow effect paint.. Style = PaintingStyle. Stroke.
🖼 effect:
image
Draw elliptical drawOval()
You need to provide a Rect that draws the Rect’s enclosing rectangle.
🌰 e.g. :
Rect rect = Rect.fromLTRB(size.width / 2 - 100, size.height / 2 - 50,
size.width / 2 + 100, size.height / 2 + 50);
canvas.drawOval(rect, paint);
Copy the code🖼 effect:
image
Set the hollow effect paint.. Style = PaintingStyle. Stroke.
🖼 effect:
image
DrawArc drawArc()
To draw an arc, you need to provide a Rect, which is equivalent to a segment on the inner ellipse of the Rect.
Take a look at the parameters required for this function:
| parameter | type | instructions |
|---|---|---|
| rect | Rect | The enclosing rectangle of the ellipse in which the arc is located |
| startAngle | double | Radians at our starting position. Radian system |
| sweepAngle | double | Sets the number of radians swept by the arc. Radian system |
| useCenter | bool | Indicates whether the arc is linked to the center of the ellipse |
| paint | Paint | The brush |
🌰 e.g. :
Rect rect = Rect.fromCircle(
center: Offset(size.width / 2, size.height / 2), radius: 140);
canvas.drawArc(rect, 0, math.pi / 2, true, paint);
Copy the code🖼 effect:
image
⚠️ Note that the startAngle and sweepAngle of the arc are radians. Reference: radian system. If you want to get PI, you can get it from math.pi under the Math package for dart.
The diagram below is the 0 point diagram of the arc:
image
🖼 When useCenter=true:
image
DrawShadow ()
With Flutter, you can easily draw shadows using this function.
Look at the arguments to this function:
| parameter | type | instructions |
|---|---|---|
| path | Path | Draw the path of the shadow |
| color | Color | Shadow color |
| elevation | double | Shadow height |
| transparentOccluder | bool | Whether transparent plugging device. This is usually set to true |
🌰 e.g. :
Path path = Path().. addRect(rect.translate(20, 0)); canvas.drawShadow(path, Colors.amberAccent, 20, true);Copy the codeYou see, you don’t need Paint to draw a Shadow.
🖼 effect:
image
What? What’s the point of not seeing?
Let’s add something to the front.
🖼 effect:
image
Looks like the rectangle is floating 😱.
DrawColor ()
The drawColor() in Flutter is a less understood drawing operation.
Why is that? Take a look at its parameters:
| parameter | type | instructions |
|---|---|---|
| color | Color | color |
| blendMode | BlendMode | Color value blending mode. Blending with previously drawn content. |
The main reason is the second parameter, blendMode.
Different values behave differently.
When mixing, there is a target color value DST (what was drawn before drawColor() was called) and a source color value SRC (which is the color of the first parameter).
Blending is the calculation of new color values based on DST and SRC, using different algorithms.
🌰 e.g. :
canvas.drawColor(Colors.redAccent, BlendMode.src);
Copy the code🖼 effect:
image
Since no content is drawn before drawColor() is called, blending is done with the background.
As you can see, when mode is blendmode.src, you can color the entire canvas.
🖼 If the content has been drawn previously:
image
Add the following code:
canvas.drawColor(Colors.redAccent, BlendMode.color);
Copy the code🖼 effect:
image
Using blendmode. color is like applying a filter to the previously drawn content 🤔.
BlendMode is a special mode, you can refer to the official example: BlendMode official illustration
Directory portal:A Guide to The Quick Start to Flutter
How can I be found?
Portal:CoorChice homepage
Portal:Lot of CoorChice