Flutter Canvas 基础教程 (一)

画布Canvas 介绍

canvas 可理解为一块矩形画布区域. 通过绘制路径能实现 点 线 圆形 矩形等千变万化的画面,这些画面通过画笔Paint绘制.

Canvas 官方库

• Painting官方详细文档 (opens new window)

• Canvas官方详细文档 (opens new window)

• Path官方详细文档 (opens new window)

使用Canvas

1. 假设新建类A 然后去继承可实现绘制需求的类 CustomClipper<T> CustomPainter

2. 实现后使用新建类A

• CustomClipper<T> 抽象类并且继承 Listenable 类

• T 所指类型

1. ClipRect, which can be customized with a CustomClipper<Rect>.
2. ClipRRect, which can be customized with a CustomClipper<RRect>.
3. ClipOval, which can be customized with a CustomClipper<Rect>.
4. ClipPath, which can be customized with a CustomClipper<Path>.

///假设继承CustomClipper<Path> 那么Widget使用举例如下 
const ClipPath({
  Key? key,
  this.clipper,
  this.clipBehavior = Clip.antiAlias,
  Widget? child,
}) : assert(clipBehavior != null),
     super(key: key, child: child);

• CustomPainter 抽象类并且继承 Listenable 类

///假设继承CustomPaint 那么Widget使用举例如下 
const CustomPaint({
  Key? key,
  this.painter,
  this.foregroundPainter,
  this.size = Size.zero,
  this.isComplex = false,
  this.willChange = false,
  Widget? child,
}) : assert(size != null),
     assert(isComplex != null),
     assert(willChange != null),
     assert(painter != null || foregroundPainter != null || (!isComplex && !willChange)),
     super(key: key, child: child);

画笔Panit 方法属性

属性/方法	值类型	说明
color	Color	画笔颜色,可重复设置使用,生效权重 后使用 > 前使用
strokeCap	StrokeCap	画笔笔触类型 举例:StrokeCap.round,具体理解,如 点,在使用后由矩形点变成圆点
strokeJoin	StrokeJoin	拐角类型
isAntiAlias	bool	是否启动抗锯齿
blendMode	BlendMode	颜色混合模式
style	PaintingStyle	绘画风格，默认为填充
colorFilter	ColorFilter	颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
maskFilter	MaskFilter	颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
filterQuality	FilterQuality	模糊遮罩效果，flutter中只有这个
strokeWidth	double	画笔的宽度

• strokeCap

• strokeJoin

• 示例代码

//[定义画笔]
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方法.调用方法返回的 Canvas 类,调用其中要使用的方法绘制图形.

@override
void paint(Canvas canvas, Size size) {
  for (int i = 0; i < offsetList.length - 1; i++) {
    if (offsetList[i]?.offset != null && offsetList[i + 1]?.offset != null) {
      // canvas.restore();
      _paint
        ..color = offsetList[i]!.color
        ..strokeWidth = offsetList[i]!.strokeWidth;
      /// 最终绘制
      canvas.drawLine(
          offsetList[i]!.offset!, offsetList[i + 1]!.offset!, _paint);
      // canvas.save();
    }
  }
}

• Canvas 方法属性

属性/方法	说明
clipPath(Path path, {bool doAntiAlias = true}) → void	将剪辑区域缩小到当前剪辑和给定Path的交点
clipRect(Rect rect, { ClipOp clipOp = ClipOp.intersect, bool doAntiAlias = true }) → void	将剪辑区域缩小到当前剪辑和给定矩形的交点
clipRRect(RRect rrect, {bool doAntiAlias = true}) → void	将剪辑区域缩小到当前剪辑和给定圆角矩形的交点
drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) → void	绘制一个按比例缩放以适合给定矩形的圆弧
drawAtlas(Image atlas, List<RSTransform> transforms, List<Rect> rects, List<Color>? colors, BlendMode? blendMode, Rect? cullRect, Paint paint) → void	Draws many parts of an image - the atlas - onto the canvas
drawCircle(Offset c, double radius, Paint paint) → void	以第一个参数给出的点为中心绘制一个圆，其半径由第二个参数给出，Paint在第三个参数中给出。圆圈是填充还是描边（或两者）由Paint.style控制
drawColor(Color color, BlendMode blendMode) → void	将给定的Color绘制到画布上，应用给定的 BlendMode，给定的颜色是源，背景是目标
drawDRRect(RRect outer, RRect inner, Paint paint) → void	使用给定的Paint绘制一个由两个圆角矩形之间的差异组成的形状。这个形状是填充还是描边（或两者）由Paint.style控制
drawImage(Image image, Offset offset, Paint paint) → void	将给定的Image绘制到画布中，其左上角位于给定的Offset。使用给定的Paint将图像合成到画布中
drawImageNine(Image image, Rect center, Rect dst, Paint paint) → void	使用给定的Paint 将给定的Image绘制到画布中
drawImageRect(Image image, Rect src, Rect dst, Paint paint) → void	将src参数描述的给定图像的子集绘制到参数给出的轴对齐矩形中的画布中dst
drawLine(Offset p1, Offset p2, Paint paint) → void	使用给定的颜料在给定的点之间画一条线。线条被描边，此调用将忽略Paint.style的值
drawOval(Rect rect, Paint paint) → void	绘制一个轴对齐的椭圆，用给定的Paint填充给定的轴对齐矩形。椭圆是填充还是描边（或两者）由Paint.style控制
drawPaint(Paint paint) → void	用给定的Paint填充画布
drawParagraph(Paragraph paragraph, Offset offset) → void	在给定的Offset处将给定Paragraph 中的文本绘制到此画布中
drawPath(Path path, Paint paint) → void	使用给定的Paint绘制给定的Path
drawPicture(Picture picture) → void	将给定的图片绘制到画布上。要创建图片，请参阅 PictureRecorder
drawPoints(PointMode pointMode, List<Offset> points, Paint paint) → void	根据给定的PointMode绘制一系列点
drawRawAtlas(Image atlas, Float32List rstTransforms, Float32List rects, Int32List? colors, BlendMode? blendMode, Rect? cullRect, Paint paint) → void	Draws many parts of an image - the atlas - onto the canvas.
drawRawPoints(PointMode pointMode, Float32List points, Paint paint) → void	根据给定的PointMode绘制一系列点
drawRect(Rect rect, Paint paint) → void	使用给定的Paint绘制一个矩形。矩形是填充还是描边（或两者）由Paint.style控制
drawRRect(RRect rrect, Paint paint) → void	使用给定的Paint绘制一个圆角矩形。矩形是填充还是描边（或两者）由Paint.style控制
drawShadow(Path path, Color color, double elevation, bool transparentOccluder) → void	为表示给定材质标高的Path绘制阴影
drawVertices(Vertices vertices, BlendMode blendMode, Paint paint) → void	在画布上 绘制一组顶点
getSaveCount() → int	返回保存堆栈上的项目数，包括初始状态。这意味着它为干净的画布返回 1，并且每次调用save和saveLayer都会增加它，并且每次匹配的恢复调用都会减少它
noSuchMethod(Invocation invocation) → dynamic	在访问不存在的方法或属性时调用
restore() → void	如果有任何东西要弹出，则弹出当前保存堆栈。否则，什么都不做
rotate(double radians) → void	向当前变换添加旋转。参数是顺时针弧度
save() → void	在保存堆栈中保存当前变换和剪辑的副本
saveLayer(Rect? bounds, Paint paint) → void	在保存堆栈上保存当前变换和剪辑的副本，然后创建一个新组，后续调用将成为其中的一部分。当稍后弹出保存堆栈时，该组将被展平为一个图层并 应用给定paint的Paint.colorFilter和Paint.blendMode
scale(double sx, [double? sy]) → void	向当前变换添加轴对齐比例，按水平方向的第一个参数和垂直方向的第二个参数进行缩放
skew(double sx, double sy) → void	向当前变换添加一个轴对齐的倾斜，第一个参数是围绕原点顺时针旋转的水平倾斜，第二个参数是围绕原点顺时针旋转的垂直倾斜
toString() → String	此对象的字符串表示形式
transform(Float64List matrix4) → void	将当前变换乘以指定为列优先顺序的值列表的指定 4⨉4 变换矩阵
translate(double dx, double dy) → void	向当前变换添加平移，通过第一个参数水平移动坐标空间，通过第二个参数垂直移动坐标空间

路径Path 方法属性

• Path官方详细文档 (opens new window)

属性/方法	值类型	说明