Flutter-绘制学习-基本的认识一

Posted 2022-11-24 建古

一、前言：
随着技术的加速前进和市场千变万化的需求，在开发过程会明显的感觉到系统提供的基础UI组件/控件满足不了当下的需求，特别是动画效果，和一些图表类的需求，找一些别人写好的轮子，总感觉有差异，总觉得还差点什么，不能百分百的满足自己的需求。由此说明需要了解掌握绘制的的本质，掌握绘制的能力，万变不离其中，想怎么画怎么画，需求爱怎么出就怎么出。这里学习参考 https://juejin.cn/book/6844733827265331214
二、需求：学习绘制能力，记录学习过程，其实就是学习API,学习一些思维逻辑
学习demo已上传github，https://github.com/yj229201093/flutter_draw 一个持续的过程，学习一点记录一点，demo中包含很多要点，每个要点一个包，每个包下面都有 main.dart ，切换不同的 main.dart 运行即可。
三、行动：
1、绘制的基本要素认识：纸、笔、形、色，就像吃饭需要手 筷子 碗之类的。

纸:      Canvas     画布对象
笔:      Paint      画笔对象
形:      Path       路径对象
色:      Color      颜色对象

2、搭建绘话的舞台

CustomPaint组件
	CustomPaint 组件可以用来显示绘制出的东西。需要传入 CustomPainter 对象。
自定义 PaperPainter 类继承 CustomPainter。 在其中的paint方法中可以拿到的画布Canvas。

绘制一个圆

void main() 
  WidgetsFlutterBinding.ensureInitialized(); // 确定初始化
  SystemChrome.setPreferredOrientations(// 使设备横屏显示
      [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
  SystemChrome.setEnabledSystemUIOverlays([]); // 全屏显示
  runApp(Paper());

///位置 p01/s01_pure/paper.dart
import 'package:flutter/material.dart';

class Paper extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Container(
      color: Colors.white,
      child: CustomPaint(
        painter: PaperPainter(),
      ),
    );
  


/// 继承 CustomPainter类
class PaperPainter extends CustomPainter 
  @override // paint方法
  void paint(Canvas canvas, Size size) 
    // TODO: implement paint
    /// 画笔对象
    final Paint paint = Paint();

    /// 在画布绘制圆，drawCircle方法是绘制圆，三个参数：圆心<drawCircle>，半径<10>, paint 画笔
    canvas.drawCircle(Offset(100, 100), 10, paint);
  

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) 
    // TODO: implement shouldRepaint
    return false;
  

效果

三、简单认识绘制对象 API

[1]. 整体认识一下 [Canvas] 的绘制 API
[2]. 整体认识一下 [Paint] 对象可设置的属性
[3]. 整体认识一下 [Path] 对象可执行的操作

1、Canvas 方法 :

---->[画布状态]----
void save()
void saveLayer(Rect bounds, Paint paint)
void restore()
int getSaveCount()

---->[画布变换]----
void skew(double sx, double sy)
void rotate(double radians)
void scale(double sx, [double sy])
void translate(double dx, double dy)
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 drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
void drawRawPoints(PointMode pointMode, Float32List points, Paint paint)
void drawLine(Offset p1, Offset p2, Paint paint)
void drawVertices(Vertices vertices, BlendMode blendMode, 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 p, Paint paint)
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
void drawImageNine(Image image, Rect center, Rect dst, Paint paint)
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 drawColor(Color color, BlendMode blendMode)
void drawPath(Path path, Paint paint)
void drawPaint(Paint paint)
void drawShadow(Path path, Color color, double elevation, bool transparentOccluder)
void drawPicture(Picture picture)

2、 Paint(画笔) 属性

isAntiAlias(抗锯齿) color(颜色)          blendMode(混合模式)     style(画笔样式)
strokeWidth(线宽)   strokeCap(线帽类型)  strokeJoin(线接类型)    strokeMiterLimit(斜接限制)  
maskFilter(遮罩滤镜) shader(着色器)      colorFilter(颜色滤镜)    imageFilter(图片滤镜)
invertColors(是否反色)                  filterQuality(滤镜质量)

3、Path 方法

---->[路径绝对移动]----
void moveTo(double x, double y)
void lineTo(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 relativeMoveTo(double dx, double dy)
void relativeLineTo(double dx, double dy)
void relativeQuadraticBezierTo(double x1, double y1, double x2, double y2)
void relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
void relativeConicTo(double x1, double y1, double x2, double y2, double w)
void relativeArcToPoint(Offset arcEndDelta,  Radius radius = Radius.zero, double rotation = 0.0, bool largeArc = false, bool clockwise = true, )

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

---->[路径操作]----
void close()
void reset()
bool contains(Offset point)
Path shift(Offset offset)
Path transform(Float64List matrix4)
Rect getBounds()   
set fillType(PathFillType value)
static Path combine(PathOperation operation, Path path1, Path path2)
PathMetrics computeMetrics(bool forceClosed = false)

///位置 p02/s02_simple/paper.dart
import 'package:flutter/material.dart';

class Paper extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Container(
      color: Colors.white,
      child: CustomPaint(
        painter: PaperPainter(),
      ),
    );
  


class PaperPainter extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    // TODO: implement paint
    final Paint paint = Paint();
    /// 画笔设置
    paint
      ..color = Colors.blue // 颜色 蓝色
      ..strokeWidth = 4 // 线宽 4
      ..style = PaintingStyle.stroke; // 样式
    /// 绘制线  两点 加 画笔的设置
    canvas.drawLine(Offset(0, 0), Offset(100, 100), paint); 
    Path path = Path(); // 路劲
    path.moveTo(100, 100); 
    path.lineTo(200, 0); 
    /// 绘制路径
    canvas.drawPath(path, paint..color = Colors.red);
  

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) 
    // TODO: implement shouldRepaint
    return false;
  

效果：

初认识，结束