Flutter 自定义 View 中 CustomPainter (一)

    Flutter 提供了CustomPainterAndroid 相似的 PaintCanvas 来实现自定义 View,需要实现 paint() 绘制方法与 shouldRepaint() 在刷新布局的时是否需要重绘。

 

class PaintCustom extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Paint 画笔

      Paint主要属性:

color -> 画笔颜色

strokeWidth -> 画笔粗细

isAntiAlias -> 是否抗锯齿

filterQuality -> 颜色渲染模式质量:高 / 中 / 低

shader -> 着色器,一般用来绘制渐变效果或 ImageShader

strokeCap -> 笔触线帽类型:round / butt / square

      笔触类型包括三种,默认为 butt 即从初始点到终止点;square 在初试点与终止点绘制一个方块;round 即在初试点与终止点绘制一个圆角;

drawArc,drawLine,drawCircle,drawPoints

canvas.drawLine(
    Offset(30.0, 30.0), Offset(Screen.width - 30.0, 30.0), Paint());
canvas.drawLine(
    Offset(30.0, 60.0), Offset(Screen.width - 30.0, 60.0), Paint()..strokeWidth = 8.0..isAntiAlias = true);
canvas.drawLine(
    Offset(30.0, 120.0), Offset(Screen.width - 30.0, 120.0), Paint() ..strokeWidth = 8.0 ..isAntiAlias = true..strokeCap = StrokeCap.round);
canvas.drawLine(
    Offset(30.0, 90.0), Offset(Screen.width - 30.0, 90.0), Paint()..strokeWidth = 8.0..isAntiAlias = true..strokeCap = StrokeCap.square);

strokeJoin -> 线结合处:锐角 / 圆弧 / 直线

      在线的交汇点处,可以设置交叠时样式,包括:锐角,圆弧和直角样式。

style -> 画笔样式:填充 / 描边

      style 包括两种样式,默认 PaintingStyle.fill 为填充,PaintingStyle.stroke 为描边;用圆来绘制效果更明显;

 

canvas.drawCircle(Offset(100.0, 200.0), 50.0, Paint()..strokeWidth = 8.0);
canvas.drawCircle(Offset(260.0, 200.0), 50.0, Paint()..strokeWidth = 8.0..style = PaintingStyle.stroke);

maskFilter -> 模糊遮照效果

      模糊效果包括:nomal 内外模糊;solid 内部填充外边模糊,类似于荧光灯效果;outer 内部透明外边模糊;inner 内部模糊,外边正常;

canvas.drawLine(Offset(30.0, 280.0), Offset(Screen.width - 30.0, 280.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0));
canvas.drawLine(Offset(30.0, 310.0), Offset(Screen.width - 30.0, 310.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.outer, 3.0));
canvas.drawLine(Offset(30.0, 340.0), Offset(Screen.width - 30.0, 340.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.solid, 3.0));
canvas.drawLine(Offset(30.0, 370.0), Offset(Screen.width - 30.0, 370.0),
    Paint()..strokeWidth = 8.0..strokeCap = StrokeCap.round..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0));

 


   

drawArc

 canvas.drawPoints(
        PointMode.points,
        [
          Offset(10, 100),
        ],
        Paint()
          ..strokeWidth = 6
          ..strokeCap = StrokeCap.round
          ..color = Color(0xff1ccf9e));

    //  画半圆弧  有直径线 1,
    canvas.drawArc(
        Rect.fromCircle(
          center: Offset(60, 150),
          radius: 50,
        ),
        0,
        -Math.pi,
        true,
        Paint()
          ..strokeWidth = 2
          ..style = PaintingStyle.stroke
          ..strokeCap = StrokeCap.round
          ..color = Color(0xffffffff));

    canvas.drawArc(
        Rect.fromCircle(
          center: Offset(200, 100),
          radius: 50,
        ),
        0,
        -Math.pi,
        true,
        Paint()
          ..strokeWidth = 5
          ..strokeCap = StrokeCap.round
          ..color = Color(0xffffffff));
    //  画半圆弧  无直径线 2
    canvas.drawArc(
        Rect.fromCircle(
          center: Offset(60, 220),
          radius: 50,
        ),
        0,
        -Math.pi,
        false,
        Paint()
          ..strokeWidth = 2
          ..style = PaintingStyle.stroke
          ..strokeCap = StrokeCap.round
          ..color = Color(0xffee22ee));

    //  画半圆弧  无直径线
    canvas.drawArc(
        Rect.fromCircle(
          center: Offset(220, 200),
          radius: 50,
        ),
        0,
        -Math.pi / 2,
        false,
        Paint()
          ..strokeWidth = 2
          ..style = PaintingStyle.stroke
          ..strokeCap = StrokeCap.round
          ..color = Color(0xff1388ee));

    canvas.drawArc(
        Rect.fromCircle(
          center: Offset(220, 220),
          radius: 50,
        ),
        0,
        Math.pi,
        false,
        Paint()
          ..strokeWidth = 2
          ..style = PaintingStyle.stroke
          ..strokeCap = StrokeCap.round
          ..color = Color(0xff00ffee));

 

Offset(10, 100) 圆心距离左边和顶部的距离,  radius: 50  圆半径

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值