绘制：CustomPaint、CustomPainter

const CustomPaint({
    Key key,
    this.painter,//画笔，实际的绘制在这里
    this.foregroundPainter,//前景画笔
    this.size = Size.zero,//画布大小
    this.isComplex = false,//用来表示是否需要用到cache相关
    this.willChange = false,//用来表示是否需要用到cache相关
    Widget child,//一般不建议
  })
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
      // 绘制代码。size为CustomPaint中定义的尺寸。
      //使用canvas.draw绘制
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;//刷新时是否需要重绘
  }
}

canvas.draw

涉及圆弧都是用的弧度制。需要把角度转换弧度。

绘制弧线：
*drawArc**(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
绘制图片：
*drawImage**(Image image, Offset p, Paint paint)
绘制圆形：
*drawCircle**(Offset c, double radius, Paint paint)
绘制线条：
*drawLine**(Offset p1, Offset p2, Paint paint)
绘制椭圆：
*drawOval**(Rect rect, Paint paint)
绘制文字：
*drawParagraph**(Paragraph paragraph, Offset offset)
绘制路径：
*drawPath**(Path path, Paint paint)
绘制点：
*drawPoints**(PointMode pointMode, List points, Paint paint)
绘制rect：
*drawRect**(Rect rect, Paint paint)
绘制阴影：
*drawShadow**(Path path, Color color, double elevation, bool transparentOccluder)

paint的一些属性

var paint = Paint()
..isAntiAlias = true //抗锯齿
..strokeWidth = 3.0 //线条宽度
..maskFilter = MaskFilter.blur(BlurStyle.normal, 3.0) //遮罩效果
..strokeCap = StrokeCap.round //结束点的样式
..style = PaintingStyle.fill //填充模式
..shader = SweepGradient(
  startAngle: 0.0,
  endAngle: 1.0,
  colors:
).createShader(rect)//着色器，渐变
..color = Color(0x77cdb175); //颜色

旋转画布

//将画布逆时针旋转90度，画arc圆弧，然后恢复画布位置
canvas.save();
canvas.translate(0.0,size.width);
canvas.rotate(degToRad(-90.0));
canvas.drawArc(arcRect, offset, sweepAngle - offset, false, progressPaint);
canvas.restore();

canvas.draw

paint的一些属性

旋转画布

Tags