View the directory –>

The brush

Properties:

  • Color The color of the brush. Colors.red
  • IsAntiAlias, whether anti-aliasing, whether the edges are more rounded.
    • True anti-aliasing
    • False No anti-aliasing
  • Style Pen type.
    • Draw hollow circles with lines.
    • PaintingStyle. Fill a solid circle.
  • StrokeWidth Width of the line drawn if style is paintingstyle. stroke
  • StrokeCap If style is paintingstyle. stroke, then the styles on both ends of the line.
    • StrokeCap. Don’t butt in
    • StrokeCap. Round Protruding a piece and having a round head
    • StrokeCap. Square protrudes a piece and has a square head
  • StrokeJoin A pattern at the corner of a line, as in path where two antennas join
    • StrokeJoin. Miter acute Angle
    • StrokeJoin. Bevel boxer
    • StrokeJoin. Round the corner
  • StrokeMiterLimit If the strokeJoin defined is strokejoin. miter, then set a critical value, the greater the critical value, the sharper the acute Angle, beyond the critical value will become bevel.
  • InvertColors Whether to invert the color, write the color in binary, and invert it.
  • ColorFilter: uses the specified color and blend mode to process DST
  • ImageFilter blurs images
  • MaskFilter processes the edges of the image
  • FilterQuality Filter quality Used together with other filters
  • BlendMode Blending mode, when SRC and DST are available, determine how to handle the blending part of the colors
StrokeCap Line end style

Example 1:

void _drawStrokeCap(Canvas canvas) { Paint paint = Paint(); paint .. style = PaintingStyle.stroke .. color = Colors.blue .. strokeWidth = 20; Offset start = Offset(-50, 0); Offset end = Offset(50, 0); canvas.drawLine(start, end, paint.. strokeCap = StrokeCap.butt); // Original length Canvas.translate (0, -50); canvas.drawLine(start, end, paint.. strokeCap = StrokeCap.round); Canvas. Translate (0, 100); // Canvas. canvas.drawLine(start, end, paint.. strokeCap = StrokeCap.square); // Both sides are prominent, square head}Copy the code

Example 2:

void _drawStrokeCapArc(Canvas canvas) { Paint paint = Paint(); paint .. style = PaintingStyle.stroke .. color = Colors.red[200] .. strokeWidth = 10; Rect rect = Rect.fromCenter(center: Offset(0, 0), width: 100, height: 100); double start = pi/2; double end = pi; canvas.drawArc(rect, start, end, false, paint.. strokeCap = StrokeCap.butt); canvas.translate(0, -120); canvas.drawArc(rect, start, end, false, paint.. strokeCap = StrokeCap.round); canvas.translate(0, 240); canvas.drawArc(rect, start, end, false, paint.. strokeCap = StrokeCap.square); }Copy the code
StrokeJoin Style of the connection between two lines

void drawStrokeJoin(Canvas canvas) { Paint paint = Paint(); Path path = Path(); paint .. style = PaintingStyle.stroke .. color = Colors.blue .. strokeWidth = 20; path.moveTo(-80, -50); path.lineTo(-50, 0); path.lineTo(0, -50); path.lineTo(50, 0); path.lineTo(80, -50); canvas.drawPath(path, paint.. strokeJoin = StrokeJoin.bevel); canvas.translate(0, -150); canvas.drawPath(path, paint.. strokeJoin = StrokeJoin.miter); canvas.translate(0, 300); canvas.drawPath(path, paint.. strokeJoin = StrokeJoin.round); }Copy the code
StrokeMiterLimit Limit of the acute Angle at the connection of two lines

StrokeJoin takes effect only when strokeJoin is strokejoin. miter. StrokeMiterLimit >=1. The larger the strokeMiterLimit is, the sharper the acute Angle is

void _drawStrokeMiterLimit(Canvas canvas) { Paint paint = Paint(); Path path = Path(); paint .. style = PaintingStyle.stroke .. color = Colors.redAccent .. strokeJoin = StrokeJoin.miter .. strokeWidth = 15; path.moveTo(-80, -50); path.lineTo(-50, 0); path.lineTo(0, -50); path.lineTo(50, 0); path.lineTo(60, -100); canvas.translate(0, -150); canvas.drawPath(path, paint .. strokeMiterLimit=1); canvas.translate(0, 150); canvas.drawPath(path, paint .. strokeMiterLimit=2); canvas.translate(0, 150); canvas.drawPath(path, paint .. strokeMiterLimit=3); }Copy the code
InvertColors Color of the brush

I’m going to reverse my brush color

void _drawInvertColors(Canvas canvas) { Paint _paint = Paint(); _paint.. color = Colors.redAccent; canvas.drawCircle(Offset(0, -100), 100, _paint.. invertColors = false); canvas.drawCircle(Offset(0, 100), 100, _paint.. invertColors = true); }Copy the code
ColorFilter Color mixing processing

Set the colorFilter property on the brush, specify a color and blend mode, and color the target. Processing before:

After the treatment:

void _testColorFilter(Canvas canvas, Size size) { Paint _paint = Paint() .. colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.exclusion); canvas.drawImage(_image, Offset(-size.width / 2+10, -size.height / 2+10), _paint); }Copy the code
ImageFilter Image blur effect

Blur the image

void _testImageFilter(Canvas canvas, Size size) { Paint _paint = Paint() .. imageFilter = ImageFilter.blur(sigmaX: 5,sigmaY: 5); canvas.drawImage(_image, Offset(-size.width / 2+10, -size.height / 2+10), _paint); }Copy the code
MaskFilter image edge fusion, blur, transition processing

Edit the edges of the image. BlurStyle comes in four flavors:

  • nonrmal
  • inner
  • outer
  • solid

BlurStyle.normal:

BlurStyle.inner:

BlurStyle. Outer:

BlurStyle. Solid:

void _testMaskFilter(Canvas canvas, Size size) { Paint _paint = Paint() // .. maskFilter = MaskFilter.blur(BlurStyle.normal, 20); / /.. maskFilter = MaskFilter.blur(BlurStyle.inner, 20); / /.. maskFilter = MaskFilter.blur(BlurStyle.outer, 20); . maskFilter = MaskFilter.blur(BlurStyle.solid, 20); canvas.drawImage( _image, Offset(-size.width / 2 + 10, -size.height / 2 + 10), _paint); }Copy the code
FilterQuality filterQuality

Literally, filter quality refers to the quality when using imageFilter maskFilter and colorFilter. There are four values:

  • FilterQuality. High high
  • FilterQuality. In the medium
  • FilterQuality. Low low
  • FilterQuality. None default value

An example using imageFilter maskFilter and colorFilter:

void _testFilterQuality(Canvas canvas, Size size) { Paint _paint = Paint() .. maskFilter = MaskFilter.blur(BlurStyle.normal, 20) .. colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.exclusion) .. imageFilter = ImageFilter.blur(sigmaX: 5, sigmaY: 5) .. filterQuality = FilterQuality.high; / /.. filterQuality = FilterQuality.medium; / /.. filterQuality = FilterQuality.low; / /.. filterQuality = FilterQuality.none; canvas.drawImage( _image, Offset(-size.width / 2 + 10, -size.height / 2 + 10), _paint); }Copy the code