Flutter绘制-03-Paint

查看目录-->

画笔

属性：

• color 画笔颜色。Colors.red
• isAntiAlias,是否抗锯齿，边缘是否更圆滑。
  • true抗锯齿
  • false不抗锯齿
• style 画笔类型。
  • PaintingStyle.stroke用线画，画空心圆。
  • PaintingStyle.fill填充，画实心圆。
• strokeWidth 如果style是PaintingStyle.stroke ,那么画出的线的宽度
• strokeCap 如果style是PaintingStyle.stroke，那么线的两端的样式。
  • StrokeCap.butt 不出头
  • StrokeCap.round 突出一块，且是圆头
  • StrokeCap.square 突出一块，且是方头
• strokeJoin 线的拐角处的样式，如path中两天线的连接处
  • StrokeJoin.miter 锐角
  • StrokeJoin.bevel 平角
  • StrokeJoin.round 圆角
• strokeMiterLimit 如果定义的strokeJoin是StrokeJoin.miter,那么设定一个临界值，临界值越大锐角越尖锐，超越临界值就变bevel。
• invertColors 是否取反颜色，将颜色用二进制表示，然后取反。
• colorFilter 颜色过滤，使用指定颜色和混合模式对dst做处理
• imageFilter 可以让图片模糊
• maskFilter 对图片边缘做处理
• filterQuality 过滤质量 与其他filter配合使用
• blendMode 混合模式，当有src和dst时，确定二者的混合部分的颜色如何处理

strokeCap 线端样式

示例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);// 原始长度
    canvas.translate(0, -50);
    canvas.drawLine(start, end, paint..strokeCap = StrokeCap.round);// 两边突出，圆头
    canvas.translate(0, 100);
    canvas.drawLine(start, end, paint..strokeCap = StrokeCap.square);// 两边突出，方头
  }

示例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);
  }

StrokeJoin 两线连接处样式

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

strokeMiterLimit 两线连接处锐角限制

当strokeJoin 为 StrokeJoin.miter 时才生效。 strokeMiterLimit的值 >=1 ,设定的值越大，锐角越尖锐

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

invertColors 画笔颜色取反

对画笔颜色取反

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

colorFilter 颜色混合处理

对画笔设定colorFilter属性，指定一个颜色和混合模式，对目标做颜色处理。 处理前：

处理后：

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

imageFilter 图片模糊效果

对图片做模糊处理

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

maskFilter 图片边缘融合、模糊、过渡处理

对图片边缘做处理。 BlurStyle 有四种：

• 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);
  }

filterQuality 过滤质量

字面意思，过滤质量，是指在使用imageFilter maskFilter和colorFilter时，质量高低。 有四个值：

• FilterQuality.high 高
• FilterQuality.medium 中
• FilterQuality.low 低
• FilterQuality.none 默认值

一个应用了imageFilter maskFilter和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);
  }