Flutter绘制系列01---画笔的属性

认识画笔的属性

属性	介绍	方法	默认值
isAntiAlias	是否抗锯齿	bool	true
style	画笔类型	PaintingStyle	PaintingStyle.fill
color	画笔颜色	Color	Color(0xffffffff)
strokeWidth	线宽	double	0.0

颜色是color和是否抗锯齿

首先画两个圆，看一个是设置没有抗锯齿的，一个是设置抗锯齿的

void drawIsAntiAliasColor(Canvas canvas) {
    Paint paint = Paint();
    canvas.drawCircle(
        Offset(180, 180),
        170,
        paint
          ..color = Colors.blue
          ..strokeWidth = 5);
    canvas.drawCircle(
        Offset(180+360, 180),
        170,
        paint
          ..isAntiAlias = false
          ..color = Colors.red);
  }

在上面我们就可以看出来啊，蓝色的圆非常的圆滑，红色的圆就有一些锯齿的痕迹。我们的设置方式是在绘制红色的圆的时候将paint…isAntiAlias设置为false。这样红色的圆就不会有抗锯齿的痕迹了。

2.画笔类型 style 和线宽 strokeWidth

画笔类型有填充PainingStyle.fill和线条PaintingStyle.stroke.，strokeWidth可以绘制线条的宽度。下面通过绘制一个空心圆和实心圆来测试style和strokeWidth的属性。

// 测试 style 和 strokeWidth 属性
  void drawStyleStrokeWidth(Canvas canvas) {
    Paint paint = Paint()..color = Colors.red;
    canvas.drawCircle(
        Offset(180, 180),
        150,
        paint
          ..style = PaintingStyle.stroke
          ..strokeWidth = 50);
    canvas.drawCircle(
        Offset(180 + 360.0, 180),
        150,
        paint
          ..strokeWidth = 50
          ..style = PaintingStyle.fill);
    //测试线
    canvas.drawLine(
        Offset(0, 180 - 150.0),
        Offset(1600, 180 - 150.0),
        paint
          ..strokeWidth = 1
          ..color = Colors.blueAccent);
  }

从上面这张图片结合代码我们可以看出，用画笔画了一个实心圆和一个空心圆，这两个圆形的区别就在于画笔的样式是填充PaintingStyle.fill还是PaintingStyle.stroke 如果是stroke画笔的话，那么我们还需要规定画笔边框的宽度。

在绘制一条线的时候我们需要考虑到这条线的起始位置和终点位置，我们将终点位置设置为非常非常大，总之比屏幕大，那么我们就可以绘制一条横切线了。

两个Offset规定的是绘画的起点位置和终点位置，而绘制圆的话第二个参数是这个圆的半径。

详细认识画笔

第二组线条属性:

属性	介绍	类型	默认值
strokeCap	线帽类型	StrokeCap	StrokeCap.butt
strokeJoin	线接类型	StrokeJoin	StrokeJoin.miter
strokeMiterLimit	斜接限制	double	0.0

1.线帽类型

下图的效果依次是：
StrokeCap.butt
StrokeCap.round
StrokeCap.squre

简而言之就是我们需要给画笔加上笔头，那么这个笔头是圆鼻头还是方鼻头，还是没有鼻头，这个就需要我们通过上面的配置去设置。

void drawStrokeCap(Canvas canvas){
    Paint paint=Paint();
    paint
      ..style=PaintingStyle.stroke
      ..color=Colors.blue
      ..strokeWidth=20;
    canvas.drawLine(
      Offset(50, 50),
      Offset(50, 150),
      paint..strokeCap=StrokeCap.butt
    );
    canvas.drawLine(
      Offset(50+50, 50),
      Offset(50+50, 150),
      paint..strokeCap=StrokeCap.round
    );
    canvas.drawLine(
      Offset(50+50*2, 50),
      Offset(50+50*2, 150),
      paint..strokeCap=StrokeCap.square
    );
  }

接线类型strokeJoin

线接类型只适合用于Path线段的绘制，它不适用于Canvas.drawPoints的绘制的线。

下图的效果分别是
StrokeJoin.bevel
StrokeJoin.miter
StrokeJoin.round

// 测试 strokeJoin 属性
  void drawStrokeJoin(Canvas canvas) {
    Paint paint =  Paint();
    Path path =  Path();
    paint
      ..style = PaintingStyle.stroke
      ..color = Colors.blue
      ..strokeWidth = 20;
    path.moveTo(50, 50);
    path.lineTo(50, 150);
    path.relativeLineTo(100, -50);
    path.relativeLineTo(0, 100);
    canvas.drawPath(path, paint..strokeJoin = StrokeJoin.bevel);

    path.reset();
    path.moveTo(50 + 150.0, 50);
    path.lineTo(50 + 150.0, 150);
    path.relativeLineTo(100, -50);
    path.relativeLineTo(0, 100);
    canvas.drawPath(path, paint..strokeJoin = StrokeJoin.miter);

    path.reset();
    path.moveTo(50 + 150.0 * 2, 50);
    path.lineTo(50 + 150.0 * 2, 150);
    path.relativeLineTo(100, -50);
    path.relativeLineTo(0, 100);
    canvas.drawPath(path, paint..strokeJoin = StrokeJoin.round);
  }

详细认识画笔

第三组颜色属性：

属性	介绍	类型	默认值
shader	着色器	Shader	null
blendeMode	混合模式	BlendMode	BlendMode.srcOver
invertColors	是否反色	bool	false

1. 着色器shade

Shader 抽象类
|---Gradient 渐变着色
	|---linear 线性渐变
	|---radial 径向渐变
	|---sweep 扫描渐变
|--- ImageShader 图片着色

• 线性渐变效果线性渐变可以将多个颜色进行单向渐变过渡
• 径向渐变可以将多个颜色以一点沿着径向渐变过渡
• 扫描渐变效果 扫描渐变可以将多个颜色以中心点扫描渐变过渡
• 图片着色器 使用ImageShader可以加载一张图片，绘制时使用图片对图形进行着色

2.颜色叠合模式blendMode

BlendMode在组件应用中有Image组件和ColorFilter组件用于将目标于一个颜色混合，一共有29种叠加模式

3.是否反色invertColors

当为true时，会将一个颜色变成在色相环中相反的位置：

void drawInvertColor(Canvas canvas){
    Paint paint=Paint();
    paint
      ..color=Color(0xff00ff00);
    canvas.drawCircle(
        Offset(180, 180),
        150,
      paint
    );
    canvas.drawCircle(
        Offset(180+180, 180),
        150,
        paint..invertColors=true
    );
  }