【原】Flutter 绘图 Paint strokeCap 延伸类型 strokeJoin 拐角类型 图文分析

优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维，不局限于思维，不局限语言限制，才是编程的最高境界。

绘图 可以构建优美的应用效果，在Flutter中如何使用绘图？？？

void main() {  ///启动根目录  runApp(MaterialApp(    home: Example801(),  ));}

class Example801 extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("绘图基本使用"),      ),      backgroundColor: Colors.grey,      body: Container(        width: MediaQuery.of(context).size.width,        color: Colors.white,        height: 200,        //创建画板        child: CustomPaint(          //定义画板的大小          size: Size(300, 300),          //配置画布          painter: LinePainter(),        ),      ),    );  }}

对就是在这里使用 画板 CustomPaint ，然后上面放个画布 LinePainter 。

LinePainter？？？不要慌 这是自定义的 代码如下：

//自定义绘图者class LinePainter extends CustomPainter {  //[定义画笔]  Paint _paint = Paint()    ..color = Colors.blue //画笔颜色    ..strokeWidth = 4; //画笔宽度
  //绘制功能主要在这里进行  @override  void paint(Canvas canvas, Size size) {    //绘制一条直线    canvas.drawLine(Offset(20, 20), Offset(100, 20), _paint);  }
  //是否重新绘制  @override  bool shouldRepaint(CustomPainter oldDelegate) {    return false;  }}

如上，绘图中 ，必然要使用一画笔，一般画笔的创建方法如下

  //[定义画笔]  Paint _paint = Paint()    //画笔颜色    ..color = Colors.blue    //画笔笔触类型    ..strokeCap = StrokeCap.round    //拐角类型    ..strokeJoin=StrokeJoin.round    //是否启动抗锯齿    ..isAntiAlias = true    //颜色混合模式    ..blendMode = BlendMode.exclusion    //绘画风格，默认为填充    ..style = PaintingStyle.fill    //颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式    ..colorFilter = ColorFilter.mode(Colors.blueAccent, BlendMode.exclusion)    //模糊遮罩效果，flutter中只有这个    ..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0)    //颜色渲染模式的质量    ..filterQuality = FilterQuality.high    //画笔的宽度    ..strokeWidth = 15.0;

其中 Paint 的属性 strokeCap 是用来配置绘制结尾处延伸类型的，如下图所示：

其中 Paint 的属性 strokeJoin 是用来配置绘制拐角类型的，如下图所示：