flutter绘制基础

1.前提条件

• Flutter 开发环境搭建
• Dart 基础语法

2.绘制的说明

我们去绘画的时候我们会想在哪画，画什么，怎么画。相对于画家这种创造性的职业，画什么是他们最难的。
到我们我们程序员这里就不必考虑的太多。在哪画都是固定的，画什么需求都定好了，怎么画这才是考验我们程序员的。

绘画需要的工具纸、笔、图形、色彩，在我们的编程中也需要这些。

• 纸- canvas
• 笔-Paint
• 图形-Path
• 色-Color

接下来，我们将围绕着四要素展开，一起探索flutter绘制的世界。

3.关于绘制的代码

代码都会同步在github上，有需要的可以自己看 https://github.com/taleStone/flutter_draw

4.开始绘制

我们的目标

• 创建绘制对象-一张纸
• 画一条红色的线

CustomPaint组件

class Sample2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter绘制的基础实例'),
      ),
      body: Container(
        child: CustomPaint(
          // 这是我们能画的地方，使用CustomPaint
          painter: Sample2Painter(),
        ),
      ),
    );
  }
}

CustomPainter

class Sample2Painter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    /// 创建画笔 并设置颜色
    final paint = Paint()..color = Colors.red;

    /// 画一条红色的线
    canvas.drawLine(Offset.zero, Offset(100, 100), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

运行结果

这里不对CustomPaint和CustomPainter做介绍，应为后面我们会详细的展开讲述。

5. 绘制API

canvas的api比较多，主要是实现绘制的方法

/// 画布状态相关

void save() native 'Canvas_save';
void saveLayer(Rect? bounds, Paint paint)
void restore() native 'Canvas_restore';
int getSaveCount() native 'Canvas_getSaveCount';

/// 画布变换相关
void translate(double dx, double dy) native 'Canvas_translate';
void scale(double sx, [double? sy]) => _scale(sx, sy ?? sx);
void rotate(double radians) native 'Canvas_rotate';
void skew(double sx, double sy) native 'Canvas_skew';
void transform(Float64List matrix4)

/// 画布裁剪相关
void clipRect(Rect rect, { ClipOp clipOp = ClipOp.intersect, bool doAntiAlias = true })
void clipRRect(RRect rrect, {bool doAntiAlias = true})
void clipPath(Path path, {bool doAntiAlias = true})

/// 线
void drawLine(Offset p1, Offset p2, Paint paint)

///矩形
void drawRect(Rect rect, Paint paint) 
void drawRRect(RRect rrect, Paint paint)
void drawDRRect(RRect outer, RRect inner, Paint paint)

///圆相关
void drawOval(Rect rect, Paint paint)
void drawCircle(Offset c, double radius, Paint paint)
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

///图片
void drawImage(Image image, Offset offset, Paint paint)
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
void drawImageNine(Image image, Rect center, Rect dst, Paint paint)
void drawPicture(Picture picture)
void drawAtlas(Image atlas,List<RSTransform> transforms,List<Rect> rects,List<Color>? colors,BlendMode? blendMode,Rect? cullRect,Paint paint)
 void drawRawAtlas(Image atlas,Float32List rstTransforms,Float32List rects,Int32List? colors,BlendMode? blendMode,Rect? cullRect,Paint paint) 

///文字
void drawParagraph(Paragraph paragraph, Offset offset) 

///点
void drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
void drawRawPoints(PointMode pointMode, Float32List points, Paint paint)
void drawVertices(Vertices vertices, BlendMode blendMode, Paint paint)

/// 其他
void drawColor(Color color, BlendMode blendMode) 
void drawPaint(Paint paint)
void drawPath(Path path, Paint paint)
void drawShadow(Path path, Color color, double elevation, bool transparentOccluder)

Paint的属性

blendMode ↔ BlendMode - 混合模式 - 绘制形状或合成图层时要应用的混合模式
color ↔ Color - 颜色 - 当描边或填充一个形状时使用的颜色
colorFilter ↔ ColorFilter? -  颜色 - 当一个形状被绘制或当一个层被合成时应用的颜色滤镜。
filterQuality ↔ FilterQuality - 滤镜质量 - 控制在应用滤镜(如maskFilter)或绘制图像(如drawImageRect、drawImageNine)时使用的性能与质量的权衡。。
imageFilter ↔ ImageFilter? - 图片滤镜 - 绘制光栅图片时使用
invertColors ↔ bool - 是否反色 - 绘制图像时颜色是否反色
isAntiAlias ↔ bool  - 是否抗锯齿 -是否对绘制在画布上的线条和图像应用抗锯齿
maskFilter ↔ MaskFilter?   - 遮罩滤镜 -一个蒙版滤镜(如blur)，用在一个形状被绘制但还没被合成到图像之前。
shader ↔ Shader?   - 着色器 - 当描边或填充一个形状时使用的着色器
strokeCap ↔ StrokeCap - 线帽类型 - 样式设置为PaintingStyle.stroke时，要在绘制的线条的末尾放置的结束点的种类。
strokeJoin ↔ StrokeJoin  - 线接类型 - 在线段之间的连接上放置的类型。
strokeMiterLimit ↔ double - 斜接限制 -
strokeWidth ↔ double - 线宽 - 将样式设置为PaintingStyle.stroke时绘制的宽度。
style ↔ PaintingStyle - 画笔样式

Path的API

///属性
fillType ↔ PathFillType ///Determines how the interior of this path is calculated.

///API

///路径添加
addArc(Rect oval, double startAngle, double sweepAngle) → void
addOval(Rect oval) → void
addPath(Path path, Offset offset, {Float64List? matrix4}) → void
addPolygon(List<Offset> points, bool close) → void
addRect(Rect rect) → void
addRRect(RRect rrect) → void
extendWithPath(Path path, Offset offset, {Float64List? matrix4}) → void

/// 绝对移动
lineTo(double x, double y) → void
moveTo(double x, double y) → void
quadraticBezierTo(double x1, double y1, double x2, double y2) → void
cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) → void
conicTo(double x1, double y1, double x2, double y2, double w) → void
arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo) → void
arcToPoint(Offset arcEnd, {Radius radius: Radius.zero, double rotation: 0.0, bool largeArc: false, bool clockwise: true}) → void

///相对移动
relativeArcToPoint(Offset arcEndDelta, {Radius radius: Radius.zero, double rotation: 0.0, bool largeArc: false, bool clockwise: true}) → void
relativeConicTo(double x1, double y1, double x2, double y2, double w) → void
relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3) → void
relativeLineTo(double dx, double dy) → void
relativeMoveTo(double dx, double dy) → void
relativeQuadraticBezierTo(double x1, double y1, double x2, double y2) → void

///其他操作方法
close() → void
computeMetrics({bool forceClosed: false}) → PathMetrics
contains(Offset point) → bool
getBounds() → Rect
reset() → void
shift(Offset offset) → Path
transform(Float64List matrix4) → Path
/// 静态方法
combine(PathOperation operation, Path path1, Path path2) → Path

所有的API都在这里了，学过h5的canvas应该是很熟悉的，没学过的也没关系，可以都看一遍。下篇我们将从paint讲起。

示例代码都放在 https://github.com/taleStone/flutter_draw ，后续都会同步更新。