books

analysis_options.yaml

@@ -27,3 +27,6 @@ linter:
 
 # Additional information about this file can be found at
 # https://dart.dev/guides/language/analysis-options
+analyzer:
+  exclude:
+    - assets/**

assets/draw/p01/p01.dart

@@ -0,0 +1 @@
+export 'p01_page.dart';

assets/draw/p01/p01_page.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/gestures/events.dart';
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+
+class P01Page extends StatelessWidget {
+  const P01Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p01',
+      demos: [
+        s1.Paper(),
+        s2.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p01/s01.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint( // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    // 创建画笔
+    final Paint paint = Paint();
+    // 绘制圆
+    canvas.drawCircle(Offset(100, 100), 10, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p01/s02.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint( // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    // 创建画笔
+    final Paint paint = Paint();
+    paint
+      ..color = Colors.blue //颜色
+      ..strokeWidth = 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);
+  }
+
+  void drawLine(Canvas canvas) {}
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p02/p02.dart

@@ -0,0 +1 @@
+export 'p02_page.dart';

assets/draw/p02/p02_page.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+import 's07.dart' as s7;
+import 's08.dart' as s8;
+import 's09.dart' as s9;
+import 's10.dart' as s10;
+import 's11.dart' as s11;
+import 's12.dart' as s12;
+import 's13.dart' as s13;
+
+class P02Page extends StatelessWidget {
+  const P02Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p02',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+        s7.Paper(),
+        s8.Paper(),
+        s9.Paper(),
+        s10.Paper(),
+        s11.Paper(),
+        s12.Paper(),
+        s13.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p02/s01.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    // drawIsAntiAliasColor(canvas);
+    drawStyleStrokeWidth(canvas);
+  }
+
+  // 测试 isAntiAlias 和 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.0, 180),
+        170,
+        paint
+          ..isAntiAlias = false
+          ..color = Colors.red);
+  }
+
+  // 测试 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);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p02/s02.dart

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    // drawStrokeCap(canvas);
+    // drawStrokeJoin(canvas);
+    drawStrokeMiterLimit(canvas);
+  }
+
+  // 测试 strokeCap 属性
+  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.0, 50), Offset(50 + 50.0, 150),
+        paint..strokeCap = StrokeCap.round);
+    canvas.drawLine(Offset(50 + 50.0 * 2, 50), Offset(50 + 50.0 * 2, 150),
+        paint..strokeCap = StrokeCap.square);
+
+    //测试线
+    canvas.drawLine(
+        Offset(0, 50),
+        Offset(1600, 50),
+        paint
+          ..strokeWidth = 1
+          ..color = Colors.cyanAccent);
+    canvas.drawLine(
+        Offset(0, 150),
+        Offset(1600, 150),
+        paint
+          ..strokeWidth = 1
+          ..color = Colors.cyanAccent);
+  }
+
+  // 测试 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);
+  }
+
+  // 测试 strokeMiterLimit 属性
+  void drawStrokeMiterLimit(Canvas canvas) {
+    Paint paint =  Paint();
+    Path path =  Path();
+    paint
+      ..style = PaintingStyle.stroke
+      ..color = Colors.blue
+      ..strokeJoin = StrokeJoin.miter
+      ..strokeWidth = 20;
+    for (int i = 0; i < 4; i++) {
+      path.reset();
+      path.moveTo(50 + 150.0 * i, 50);
+      path.lineTo(50 + 150.0 * i, 150);
+      path.relativeLineTo(100, -(40.0 * i + 20));
+      canvas.drawPath(path, paint..strokeMiterLimit = 2);
+    }
+
+    for (int i = 0; i < 4; i++) {
+      path.reset();
+      path.moveTo(50 + 150.0 * i, 50 + 150.0);
+      path.lineTo(50 + 150.0 * i, 150 + 150.0);
+      path.relativeLineTo(100, -(40.0 * i + 20));
+      canvas.drawPath(
+          path,
+          paint
+            ..strokeMiterLimit = 3);
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p02/s03.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    drawShaderLinear(canvas);
+  }
+
+  void drawShaderLinear(Canvas canvas) {
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+    Paint paint = Paint();
+
+    paint
+      ..style = PaintingStyle.stroke
+      ..color = Colors.blue
+      ..strokeJoin = StrokeJoin.miter
+      ..strokeWidth = 100;
+
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.clamp);
+    canvas.drawLine(
+      Offset(0, 100),
+      Offset(200, 100),
+      paint,
+    );
+
+    paint.shader = ui.Gradient.linear(Offset(0 + 220.0, 0),
+        Offset(100 + 220.0, 0), colors, pos, TileMode.repeated);
+    canvas.drawLine(
+      Offset(0 + 220.0, 100),
+      Offset(200 + 220.0, 100),
+      paint,
+    );
+
+    paint.shader = ui.Gradient.linear(Offset(0 + 220.0 * 2, 0),
+        Offset(100 + 220.0 * 2, 0), colors, pos, TileMode.mirror);
+    canvas.drawLine(
+      Offset(0 + 220.0 * 2, 100),
+      Offset(200 + 220.0 * 2, 100),
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s04.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget{
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+   return CustomPaint(
+      painter: PaperPainter(),
+    );
+  }
+
+}
+
+class PaperPainter extends CustomPainter {
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    drawShaderRadial(canvas);
+  }
+
+  void drawShaderRadial(Canvas canvas) {
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+    Paint paint =  Paint();
+    paint
+      ..style = PaintingStyle.fill
+      ..color = Colors.blue;
+
+    paint.shader = ui.Gradient.radial(
+        Offset(80 + 150.0 * 0, 80), 25, colors, pos, TileMode.clamp);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 0, 80),
+      50,
+      paint,
+    );
+
+    paint.shader = ui.Gradient.radial(
+        Offset(80 + 150.0 * 1, 80), 25, colors, pos, TileMode.repeated);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 1, 80),
+      50,
+      paint,
+    );
+
+    paint.shader = ui.Gradient.radial(
+        Offset(80 + 150.0 * 2, 80), 25, colors, pos, TileMode.mirror);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 2, 80),
+      50,
+      paint,
+    );
+    paint.shader = ui.Gradient.radial(Offset(80 + 150.0 * 3, 80), 25, colors,
+        pos, TileMode.mirror, null, Offset(80 + 150.0 * 3 - 5, 80 - 5.0), 10);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 3, 80),
+      50,
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s05.dart

@@ -0,0 +1,82 @@
+import 'dart:math';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget{
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+   return CustomPaint(
+      painter: PaperPainter(),
+    );
+  }
+
+}
+
+class PaperPainter extends CustomPainter {
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    drawShaderSweep(canvas);
+  }
+
+  void drawShaderSweep(Canvas canvas) {
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+    Paint paint =  Paint();
+    paint
+      ..style = PaintingStyle.fill
+      ..color = Colors.blue;
+
+    paint.shader = ui.Gradient.sweep(
+        Offset(80 + 150.0 * 0, 80), colors, pos, TileMode.clamp, pi / 2, pi);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 0, 80),
+      50,
+      paint,
+    );
+    paint.shader = ui.Gradient.sweep(
+        Offset(80 + 150.0 * 1, 80), colors, pos, TileMode.repeated, pi / 2, pi);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 1, 80),
+      50,
+      paint,
+    );
+    paint.shader = ui.Gradient.sweep(
+        Offset(80 + 150.0 * 2, 80), colors, pos, TileMode.mirror, pi / 2, pi);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 2, 80),
+      50,
+      paint,
+    );
+
+    paint.shader = ui.Gradient.sweep(
+        Offset(80 + 150.0 * 3, 80), colors, pos, TileMode.clamp);
+    canvas.drawCircle(
+      Offset(80 + 150.0 * 3, 80),
+      50,
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}
+

assets/draw/p02/s06.dart

@@ -0,0 +1,97 @@
+import 'dart:async';
+import 'dart:typed_data';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+
+import 'package:flutter/services.dart';
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    _loadImage();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: hasImage
+          ? CustomPaint(
+        painter: ImageShaderPainter(_img),
+      )
+          : Container(),
+    );
+  }
+
+  void _loadImage() async {
+    _img = await loadImage(AssetImage('assets/images/wy_200x300.jpg'));
+    setState(() {});
+  }
+
+  late ImageStreamListener listener;
+  //异步加载图片成为ui.Image
+  Future<ui.Image> loadImage(ImageProvider provider) {
+    Completer<ui.Image> completer = Completer<ui.Image>();
+    ImageStream stream = provider.resolve(ImageConfiguration());
+    listener = ImageStreamListener((info, syno) {
+      final ui.Image image = info.image; //监听图片流，获取图片
+      completer.complete(image);
+      stream.removeListener(listener);
+    });
+    stream.addListener(listener);
+    return completer.future;
+  }
+}
+
+class ImageShaderPainter extends CustomPainter {
+  ui.Image? img;
+  late Paint _paint;
+
+  ImageShaderPainter(this.img) {
+    _paint = Paint();
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(img==null) return;
+    _paint.shader = ImageShader(
+        img!,
+        TileMode.repeated,
+        TileMode.repeated,
+        Float64List.fromList([
+          1, 0, 0, 0,
+          0, 1, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1,
+        ]));
+
+    canvas.drawCircle(Offset(100, 100), 50, _paint);
+    canvas.drawCircle(
+        Offset(100 + 120.0, 100),
+        50,
+        _paint
+          ..strokeWidth = 10
+          ..style = PaintingStyle.stroke);
+    canvas.drawLine(
+        Offset(100 + 120.0 * 2, 50),
+        Offset(100 + 120.0 * 2, 50 + 100.0),
+        _paint
+          ..strokeWidth = 30
+          ..style = PaintingStyle.stroke);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s07.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget{
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return  CustomPaint(
+      painter: PaperPainter(),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    drawBlendMode(canvas,BlendMode.lighten);
+    canvas.translate(150, 0);
+    drawBlendMode(canvas,BlendMode.hue);
+    canvas.translate(150, 0);
+    drawBlendMode(canvas,BlendMode.plus);
+    canvas.translate(150, 0);
+    drawBlendMode(canvas,BlendMode.hardLight);
+
+  }
+  void drawBlendMode(Canvas canvas,BlendMode mode) {
+    var paint = Paint();
+    canvas.drawCircle(Offset(100, 100), 50, paint..color = Color(0x88ff0000));
+
+    canvas.drawCircle(
+        Offset(140, 70),
+        50,
+        paint
+          ..color = Color(0x8800ff00)
+          ..blendMode = mode);
+
+    canvas.drawCircle(
+        Offset(140, 130),
+        50,
+        paint
+          ..color = Color(0x880000ff)
+          ..blendMode = mode);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s08.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget{
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return  CustomPaint(
+      painter: PaperPainter(),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    drawInvertColors(canvas);
+  }
+  void drawInvertColors(Canvas canvas) {
+    var paint = Paint();
+    paint..color = Color(0xff009A44);
+    canvas.drawCircle(Offset(100, 100), 50, paint..invertColors = false);
+    canvas.drawCircle(Offset(100+120.0, 100), 50, paint..invertColors = true);
+  }
+
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s09.dart

@@ -0,0 +1,98 @@
+import 'dart:async';
+import 'dart:typed_data';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    Uint8List bytes = data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
+    return decodeImageFromList(bytes);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+          painter: PaperPainter(_img),
+        ));
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (img == null) return;
+    drawColorFilter(canvas);
+  }
+
+  double get imgW => img?.width.toDouble()??0;
+
+  double get imgH => img?.height.toDouble()??0;
+
+  void drawColorFilter(Canvas canvas) {
+    var paint = Paint();
+    paint.colorFilter = ColorFilter.linearToSrgbGamma();
+    _drawImage(canvas, paint, move: false);
+
+    paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.modulate);
+    _drawImage(canvas, paint);
+
+    paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.difference);
+    _drawImage(canvas, paint);
+
+    paint.colorFilter = ColorFilter.mode(Colors.blue, BlendMode.plus);
+    _drawImage(canvas, paint);
+
+    paint.colorFilter = ColorFilter.mode(Colors.blue, BlendMode.lighten);
+    _drawImage(canvas, paint);
+  }
+
+  void _drawImage(Canvas canvas, Paint paint, {bool move = true}) {
+    if (move) {
+      canvas.translate(120, 0);
+    } else {
+      canvas.translate(20, 20);
+    }
+    canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s10.dart

@@ -0,0 +1,123 @@
+import 'dart:async';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    _loadImage();
+    super.initState();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: hasImage ? CustomPaint(
+        painter: PaperPainter(_img) ,
+      ): Container(),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(img!=null) {
+      drawColorFilter(canvas);
+    }
+  }
+
+  double get imgW => img!.width.toDouble();
+  double get imgH => img!.height.toDouble();
+
+  void drawColorFilter(Canvas canvas) {
+    var paint =Paint();
+    const ColorFilter identity = ColorFilter.matrix(<double>[
+      1, 0, 0, 0, 0,
+      0, 1, 0, 0, 0,
+      0, 0, 1, 0, 0,
+      0, 0, 0, 1, 0,
+    ]);
+    _drawImage(canvas, paint..colorFilter=identity,move: false);
+
+    const ColorFilter sepia = ColorFilter.matrix(<double>[
+      0.393, 0.769, 0.189, 0, 0,
+      0.349, 0.686, 0.168, 0, 0,
+      0.272, 0.534, 0.131, 0 , 0,
+      0,     0,     0,     1, 0,
+    ]);
+    _drawImage(canvas, paint..colorFilter=sepia);
+
+    const ColorFilter invert = ColorFilter.matrix(<double>[
+      -1,  0,  0, 0, 255,
+      0, -1,  0, 0, 255,
+      0,  0, -1, 0, 255,
+      0,  0,  0, 1,   0,
+    ]);
+    _drawImage(canvas, paint..colorFilter=invert);
+
+    const ColorFilter greyscale = ColorFilter.matrix(<double>[
+      0.2126, 0.7152, 0.0722, 0, 0,
+      0.2126, 0.7152, 0.0722, 0, 0,
+      0.2126, 0.7152, 0.0722, 0, 0,
+      0,      0,      0,      1, 0,
+    ]);
+    _drawImage(canvas, paint..colorFilter=greyscale);
+
+    const n = 90.0;
+    const ColorFilter light = ColorFilter.matrix(<double>[
+      1,0,0,0,n,
+      0,1,0,0,n,
+      0,0,1,0,n,
+      0,0,0,1,0
+    ]);
+    _drawImage(canvas, paint..colorFilter=light);
+  }
+
+  void _drawImage(Canvas canvas, Paint paint,{bool move=true}) {
+    if(move){
+      canvas.translate(120, 0);
+    }else{
+      canvas.translate(20, 20);
+    }
+    canvas.drawImageRect(img!,
+        Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW/2, imgH/2),
+        paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s11.dart

@@ -0,0 +1,97 @@
+import 'dart:async';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    _loadImage();
+    super.initState();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: hasImage ? CustomPaint(
+        painter: PaperPainter(_img) ,
+      ): Container(),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(img!=null) {
+      drawMaskFilter(canvas);
+    }
+  }
+
+  double get imgW => img!.width.toDouble();
+  double get imgH => img!.height.toDouble();
+
+  void drawMaskFilter(Canvas canvas) {
+    var paint =Paint();
+    _drawImage(canvas, paint,move: false);
+
+    paint.maskFilter=MaskFilter.blur(BlurStyle.inner, 20);
+    _drawImage(canvas, paint);
+
+    paint.maskFilter=MaskFilter.blur(BlurStyle.outer, 3);
+    _drawImage(canvas, paint);
+
+    paint.maskFilter=MaskFilter.blur(BlurStyle.solid, 5);
+    _drawImage(canvas, paint);
+
+    paint.maskFilter=MaskFilter.blur(BlurStyle.normal, 3);
+    _drawImage(canvas, paint);
+
+  }
+
+  void _drawImage(Canvas canvas, Paint paint,{bool move=true}) {
+    if(move){
+      canvas.translate(120, 0);
+    }else{
+      canvas.translate(20, 20);
+    }
+    canvas.drawImageRect(img!,
+        Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW/2, imgH/2),
+        paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s12.dart

@@ -0,0 +1,100 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    _loadImage();
+    super.initState();
+  }
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: hasImage ? CustomPaint(
+        painter: PaperPainter(_img) ,
+      ): Container(),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(img!=null) {
+      drawImageFilter(canvas);
+    }
+  }
+
+  double get imgW => img!.width.toDouble();
+  double get imgH => img!.height.toDouble();
+
+
+
+  void drawImageFilter(Canvas canvas) {
+    var paint =Paint();
+    _drawImage(canvas, paint,move: false);
+
+    paint.imageFilter=ui.ImageFilter.blur(sigmaX: 0.4,sigmaY: 0.4);
+    _drawImage(canvas, paint);
+
+    paint.imageFilter=ui.ImageFilter.blur(sigmaX: 0.6,sigmaY: 0.6);
+    _drawImage(canvas, paint);
+
+    paint.imageFilter=ui.ImageFilter.blur(sigmaX: 0.8,sigmaY: 0.8);
+    _drawImage(canvas, paint);
+
+    paint.imageFilter=ui.ImageFilter.matrix(
+        Matrix4.skew(pi/8,0).storage
+    );
+    _drawImage(canvas, paint);
+  }
+
+  void _drawImage(Canvas canvas, Paint paint,{bool move=true}) {
+    if(move){
+      canvas.translate(120, 0);
+    }else{
+      canvas.translate(20, 20);
+    }
+    canvas.drawImageRect(img!,
+        Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW/2, imgH/2),
+        paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p02/s13.dart

@@ -0,0 +1,100 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    _loadImage();
+    super.initState();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: hasImage ? CustomPaint(
+        painter: PaperPainter(_img) ,
+      ): Container(),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(img!=null) {
+      drawFilterQuality(canvas);
+    }
+  }
+
+  double get imgW => img!.width.toDouble();
+  double get imgH => img!.height.toDouble();
+
+  void drawFilterQuality(Canvas canvas) {
+    var paint =Paint();
+    paint.imageFilter=ui.ImageFilter.blur(sigmaX: 0.6,sigmaY: 0.6);
+    paint.maskFilter=MaskFilter.blur(BlurStyle.inner, 20);
+    paint.colorFilter=ColorFilter.mode(Colors.yellow, BlendMode.modulate);
+
+    paint.filterQuality=FilterQuality.none;
+    _drawImage(canvas, paint,move: false);
+
+    paint.filterQuality=FilterQuality.low;
+    _drawImage(canvas, paint);
+
+    paint.filterQuality=FilterQuality.medium;
+    _drawImage(canvas, paint);
+
+    paint.filterQuality=FilterQuality.high;
+    _drawImage(canvas, paint);
+
+  }
+
+  void _drawImage(Canvas canvas, Paint paint,{bool move=true}) {
+    if(move){
+      canvas.translate(120, 0);
+    }else{
+      canvas.translate(20, 20);
+    }
+    canvas.drawImageRect(img!,
+        Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW/2, imgH/2),
+        paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p03/p03.dart

@@ -0,0 +1 @@
+export 'p03_page.dart';

assets/draw/p03/p03_page.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+import 's07.dart' as s7;
+import 's08.dart' as s8;
+import 's09.dart' as s9;
+import 's10.dart' as s10;
+import 's11.dart' as s11;
+import 's12.dart' as s12;
+import 's13.dart' as s13;
+
+class P03Page extends StatelessWidget {
+  const P03Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p03',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+        s7.Paper(),
+        s8.Paper(),
+        s9.Paper(),
+        s10.Paper(),
+        s11.Paper(),
+        s12.Paper(),
+        s13.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p03/s01.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint( // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    var paint = Paint()
+      ..style = PaintingStyle.fill
+      ..color = Colors.blue;
+    // 画布起点移到屏幕中心
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.drawCircle(Offset(0, 0), 50, paint);
+    canvas.drawLine(
+        Offset(20, 20),
+        Offset(50, 50),
+        paint
+          ..color = Colors.red
+          ..strokeWidth = 5
+          ..strokeCap = StrokeCap.round
+          ..style = PaintingStyle.stroke);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s02.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _gridPint; // 画笔
+  final double step = 20; // 小格边长
+  final double strokeWidth = .5; // 线宽
+  final Color color = Colors.grey; // 线颜色
+
+  PaperPainter() {
+    _gridPint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawGrid(canvas, size);
+    _drawPart(canvas);
+  }
+
+  void _drawPart(Canvas canvas) {
+    var paint = Paint()
+      ..style = PaintingStyle.fill
+      ..color = Colors.blue;
+    canvas.drawCircle(Offset(0, 0), 50, paint);
+    canvas.drawLine(
+        Offset(20, 20),
+        Offset(50, 50),
+        paint
+          ..color = Colors.red
+          ..strokeWidth = 5
+          ..strokeCap = StrokeCap.round
+          ..style = PaintingStyle.stroke);
+  }
+
+  void _drawGrid(Canvas canvas, Size size) {
+    _drawBottomRight(canvas, size);
+
+    canvas.save();
+    canvas.scale(1, -1); //沿x轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, 1); //沿y轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, -1); //沿原点镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+  }
+
+  void _drawBottomRight(Canvas canvas, Size size) {
+    canvas.save();
+    for (int i = 0; i < size.height / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), _gridPint);
+      canvas.translate(0, step);
+    }
+    canvas.restore();
+
+    canvas.save();
+    for (int i = 0; i < size.width / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), _gridPint);
+      canvas.translate(step , 0);
+    }
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p03/s03.dart

@@ -0,0 +1,111 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _gridPint;
+  final double step = 20;
+  final double strokeWidth = .5;
+
+  PaperPainter() {
+    _gridPint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth
+      ..color = Colors.grey;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawGrid(canvas, size);
+
+    var paint = Paint()
+      ..style = PaintingStyle.fill
+      ..color = Colors.blue;
+
+    _drawPart(canvas, paint);
+    _drawDot(canvas, paint);
+  }
+
+  void _drawPart(Canvas canvas, Paint paint) {
+    canvas.drawCircle(Offset(0, 0), 50, paint);
+    canvas.drawLine(
+        Offset(20, 20),
+        Offset(50, 50),
+        paint
+          ..color = Colors.red
+          ..strokeWidth = 5
+          ..strokeCap = StrokeCap.round
+          ..style = PaintingStyle.stroke);
+  }
+
+  void _drawDot(Canvas canvas, Paint paint) {
+    final int count = 12;
+    paint
+      ..color = Colors.orangeAccent
+      ..style = PaintingStyle.stroke;
+    canvas.save();
+    for (int i = 0; i < count; i++) {
+      var step = 2 * pi / count;
+      canvas.drawLine(Offset(80, 0), Offset(100, 0), paint);
+      canvas.rotate(step);
+    }
+    canvas.restore();
+  }
+
+  void _drawGrid(Canvas canvas, Size size) {
+    _drawBottomRight(canvas, size);
+
+    canvas.save();
+    canvas.scale(1, -1); //沿x轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, 1); //沿y轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, -1); //沿原点镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+  }
+
+  void _drawBottomRight(Canvas canvas, Size size) {
+    canvas.save();
+    for (int i = 0; i < size.height / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), _gridPint);
+      canvas.translate(0, step);
+    }
+    canvas.restore();
+
+    canvas.save();
+    for (int i = 0; i < size.width / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), _gridPint);
+      canvas.translate(step , 0);
+    }
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s04.dart

@@ -0,0 +1,156 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint( // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  late Paint _gridPint;
+  final double step = 20;
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+    _gridPint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth
+      ..color = Colors.grey;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawGrid(canvas, size);
+    _drawAxis(canvas,size);
+
+    _drawPointsWithPoints(canvas);
+    // _drawPointsWithLines(canvas);
+    _drawPointLineWithPolygon(canvas);
+    _drawRawPoints(canvas);
+  }
+
+  final List<Offset> points = [
+    Offset(-120, -20),
+    Offset(-80, -80),
+    Offset(-40, -40),
+    Offset(0, -100),
+    Offset(40, -140),
+    Offset(80, -160),
+    Offset(120, -100),
+  ];
+
+  void _drawPointsWithPoints(Canvas canvas) {
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.stroke..strokeWidth=10
+      ..strokeCap = StrokeCap.round;
+    canvas.drawPoints(PointMode.points, points, _paint);
+  }
+
+  void _drawPointsWithLines(Canvas canvas) {
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1
+      ..strokeCap = StrokeCap.round;
+    canvas.drawPoints(PointMode.lines, points, _paint);
+  }
+
+  void _drawPointLineWithPolygon(Canvas canvas) {
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1
+      ..strokeCap = StrokeCap.round;
+    canvas.drawPoints(PointMode.polygon, points, _paint);
+  }
+
+  void _drawRawPoints(Canvas canvas) {
+    Float32List pos = Float32List.fromList([
+      -120, -20,-80, -80,-40,
+      -40,0, -100,40, -140,
+      80, -160,120, -100]);
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 10
+      ..strokeCap = StrokeCap.round;
+    canvas.drawRawPoints(PointMode.points, pos, _paint);
+  }
+
+  void _drawAxis(Canvas canvas, Size size) {
+    _paint..color=Colors.blue..strokeWidth=1.5;
+    canvas.drawLine(Offset(-size.width/2, 0) , Offset(size.width/2, 0),_paint);
+    canvas.drawLine(Offset( 0,-size.height/2) , Offset( 0,size.height/2),_paint);
+    canvas.drawLine(Offset( 0,size.height/2) , Offset( 0-7.0,size.height/2-10),_paint);
+    canvas.drawLine(Offset( 0,size.height/2) , Offset( 0+7.0,size.height/2-10),_paint);
+    canvas.drawLine(Offset(size.width/2, 0) , Offset(size.width/2-10, 7),_paint);
+    canvas.drawLine(Offset(size.width/2, 0) , Offset(size.width/2-10, -7),_paint);
+  }
+
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+
+  void _drawGrid(Canvas canvas, Size size) {
+    _drawBottomRight(canvas, size);
+    canvas.save();
+    canvas.scale(1, -1); //沿x轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, 1); //沿y轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, -1); //沿原点镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+  }
+
+  void _drawBottomRight(Canvas canvas, Size size) {
+    canvas.save();
+    for (int i = 0; i < size.height / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), _gridPint);
+      canvas.translate(0, step);
+    }
+    canvas.restore();
+
+    canvas.save();
+    for (int i = 0; i < size.width / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), _gridPint);
+      canvas.translate(step , 0);
+    }
+    canvas.restore();
+  }
+
+
+}

assets/draw/p03/s05.dart

@@ -0,0 +1,133 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+
+    canvas.translate(size.width / 2, size.height / 2);
+
+    _drawDRRect(canvas);
+
+    canvas.translate(-240, 0);
+    _drawRect(canvas);
+
+    canvas.translate(480, 0);
+    _drawRRect(canvas);
+  }
+
+  void _drawRect(Canvas canvas) {
+    _paint
+      ..color = Colors.blue
+      ..strokeWidth = 1.5;
+    //【1】.矩形中心构造
+    Rect rectFromCenter =
+    Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
+    canvas.drawRect(rectFromCenter, _paint);
+    //【2】.矩形左上右下构造
+    Rect rectFromLTRB = Rect.fromLTRB(-120, -120, -80, -80);
+    canvas.drawRect(rectFromLTRB, _paint..color = Colors.red);
+    //【3】. 矩形左上宽高构造
+    Rect rectFromLTWH = Rect.fromLTWH(80, -120, 40, 40);
+    canvas.drawRect(rectFromLTWH, _paint..color = Colors.orange);
+    //【4】. 矩形内切圆构造
+    Rect rectFromCircle = Rect.fromCircle(center: Offset(100, 100), radius: 20);
+    canvas.drawRect(rectFromCircle, _paint..color = Colors.green);
+    //【5】. 矩形两点构造
+    Rect rectFromPoints = Rect.fromPoints(Offset(-120, 80), Offset(-80, 120));
+    canvas.drawRect(rectFromPoints, _paint..color = Colors.purple);
+  }
+
+  void _drawRRect(Canvas canvas) {
+    _paint
+      ..color = Colors.blue
+      ..strokeWidth = 1.5;
+    //【1】.圆角矩形fromRectXY构造
+    Rect rectFromCenter =
+    Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
+    canvas.drawRRect(RRect.fromRectXY(rectFromCenter, 40, 20), _paint);
+
+    //【2】.圆角矩形fromLTRBXY构造
+    canvas.drawRRect(RRect.fromLTRBXY(-120, -120, -80, -80, 10, 10),
+        _paint..color = Colors.red);
+
+    //【3】. 圆角矩形fromLTRBR构造
+    canvas.drawRRect(RRect.fromLTRBR(80, -120, 120, -80, Radius.circular(10)),
+        _paint..color = Colors.orange);
+
+    //【4】. 圆角矩形fromLTRBAndCorners构造
+    canvas.drawRRect(
+        RRect.fromLTRBAndCorners(80, 80, 120, 120,
+            bottomRight: Radius.elliptical(10, 10)),
+        _paint..color = Colors.green);
+
+    //【5】. 矩形两点构造
+    Rect rectFromPoints = Rect.fromPoints(Offset(-120, 80), Offset(-80, 120));
+    canvas.drawRRect(
+        RRect.fromRectAndCorners(rectFromPoints,
+            bottomLeft: Radius.elliptical(10, 10)),
+        _paint..color = Colors.purple);
+  }
+
+  void _drawDRRect(Canvas canvas) {
+    _paint
+      ..color = Colors.blue
+      ..strokeWidth = 1.5;
+    Rect outRect =
+    Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
+    Rect inRect =
+    Rect.fromCenter(center: Offset(0, 0), width: 100, height: 100);
+
+    canvas.drawDRRect(RRect.fromRectXY(outRect, 20, 20),
+        RRect.fromRectXY(inRect, 20, 20), _paint);
+
+    Rect outRect2 =
+    Rect.fromCenter(center: Offset(0, 0), width: 60, height: 60);
+    Rect inRect2 = Rect.fromCenter(center: Offset(0, 0), width: 40, height: 40);
+    canvas.drawDRRect(RRect.fromRectXY(outRect2, 15, 15),
+        RRect.fromRectXY(inRect2, 10, 10), _paint..color = Colors.green);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s06.dart

@@ -0,0 +1,91 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _draw(canvas);
+  }
+
+  void _draw(Canvas canvas) {
+    canvas.save();
+    canvas.translate(-200, 0);
+    canvas.drawCircle(Offset(0, 0), 60, _paint);
+    canvas.restore();
+
+    var rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 120);
+    canvas.drawOval(rect, _paint);
+
+    canvas.save();
+    canvas.translate(200, 0);
+    //drawArc(矩形区域,起始弧度,扫描弧度,是否连中心,画笔)
+    canvas.drawArc(rect, 0, pi / 2 * 3, true, _paint);
+    canvas.restore();
+  }
+
+  void _drawArcDetail(Canvas canvas) {
+    var rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 100);
+    _paint
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 2;
+    canvas.save();
+    canvas.translate(-200, 0);
+    canvas.drawArc(rect, 0, pi / 2 * 3, false, _paint);
+    canvas.restore();
+    canvas.drawArc(rect, 0, pi / 2 * 3, true, _paint);
+    canvas.save();
+    canvas.translate(200, 0);
+    var a = pi / 8;
+    canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color=Colors.yellowAccent..style=PaintingStyle.fill);
+    canvas.translate(40, 0);
+    canvas.drawCircle(Offset(0, 0), 6, _paint);
+    canvas.translate(25, 0);
+    canvas.drawCircle(Offset(0, 0), 6, _paint);
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s07.dart

@@ -0,0 +1,45 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.drawColor(Colors.blue, BlendMode.lighten);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s08.dart

@@ -0,0 +1,74 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+
+    _paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(size.width, 0),
+        colors, pos, TileMode.clamp);
+
+    _paint.blendMode=BlendMode.lighten;
+
+    canvas.drawPaint(_paint);
+  }
+
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s09.dart

@@ -0,0 +1,73 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    // coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Paint paint = Paint()
+      ..style = PaintingStyle.fill
+      ..color = Colors.white
+      ..isAntiAlias = true;
+    double relativeX = 100;
+    double angle = 0;
+    double width = 10;
+    double height = 10;
+    double center =  relativeX + width / 2;
+    if(angle == 0) {
+      center = relativeX + width/4;
+    } else if (angle == 2) {
+      center = relativeX + width/4*3;
+    }
+
+    Path trianglePath = Path()
+      ..addPolygon([Offset(relativeX, height), Offset(relativeX + width, height), Offset(center, 0),], false)..close();
+
+    Path rectanglePath = Path()
+      ..addRRect(RRect.fromLTRBR(0, 10, 160, 100, Radius.circular(8)))..close();
+
+
+    canvas.drawShadow(Path.combine(PathOperation.xor, trianglePath, rectanglePath), Colors.black, 3, false);
+    canvas.drawPath(Path.combine(PathOperation.xor, trianglePath, rectanglePath), paint..color = Colors.white);
+    paint.maskFilter = MaskFilter.blur(BlurStyle.inner, 20);
+    canvas.drawPath(Path.combine(PathOperation.xor, trianglePath, rectanglePath), paint..color=Color(0xffBEC4C0));
+
+  }
+
+
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s10.dart

@@ -0,0 +1,68 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    path.lineTo(60, 60);
+    path.lineTo(-60, 60);
+    path.lineTo(60, -60);
+    path.lineTo(-60, -60);
+    path.close();
+
+    canvas.drawPath(path, _paint);
+    canvas.translate(140, 0);
+    canvas.drawPath(
+        path,
+        _paint
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 2);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s11.dart

@@ -0,0 +1,79 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    // canvas.save();
+    var rect = Rect.fromCenter(center: Offset.zero,width: 360,height: 240);
+    canvas.clipRect(rect,doAntiAlias: true,clipOp: ui.ClipOp.intersect);
+
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+
+    _paint.shader = ui.Gradient.linear(
+        rect.centerLeft, rect.centerRight,
+        colors, pos, TileMode.clamp);
+
+    _paint.blendMode=BlendMode.lighten;
+
+    canvas.drawPaint(_paint);
+    // canvas.restore();
+    // canvas.drawColor(Colors.blue, BlendMode.lighten);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s12.dart

@@ -0,0 +1,49 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    // canvas.save();
+    var rect = Rect.fromCenter(center: Offset.zero,width: 200,height: 100);
+    canvas.clipRRect(RRect.fromRectAndRadius(rect, Radius.circular(30)));
+    canvas.drawColor(Colors.red, BlendMode.darken);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p03/s13.dart

@@ -0,0 +1,52 @@
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    path.lineTo(80, 80);
+    path.lineTo(-80, 80);
+    path.close();
+
+    canvas.clipPath(path);
+    canvas.drawColor(Colors.red, BlendMode.darken);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p04/p04.dart

@@ -0,0 +1 @@
+export 'p04_page.dart';

assets/draw/p04/p04_page.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+import 's07.dart' as s7;
+
+
+class P04Page extends StatelessWidget {
+  const P04Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p04',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+        s7.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p04/s01.dart

@@ -0,0 +1,83 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _image;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/wy_300x200.jpg');
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white, child: CustomPaint(painter: PaperPainter(_image)));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawImage(canvas);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) =>
+      image != oldDelegate.image;
+
+  void _drawImage(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImage(
+          image!, Offset(-image!.width / 2, -image!.height / 2), _paint);
+    }
+  }
+}

assets/draw/p04/s02.dart

@@ -0,0 +1,118 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/wy_300x200.jpg');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawImage(canvas);
+    _drawImageRect(canvas);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+
+  void _drawImage(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImage(
+          image!, Offset(-image!.width / 2, -image!.height / 2), _paint);
+    }
+  }
+
+  void _drawImageRect(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImageRect(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height / 2),
+              width: 60,
+              height: 60),
+          Rect.fromLTRB(0, 0, 100, 100).translate(200, 0),
+          _paint);
+
+      canvas.drawImageRect(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height / 2 - 60),
+              width: 60,
+              height: 60),
+          Rect.fromLTRB(0, 0, 100, 100).translate(-280, -100),
+          _paint);
+
+      canvas.drawImageRect(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2 + 60, image!.height / 2),
+              width: 60,
+              height: 60),
+          Rect.fromLTRB(0, 0, 100, 100).translate(-280, 50),
+          _paint);
+    }
+  }
+}

assets/draw/p04/s03.dart

@@ -0,0 +1,129 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+///
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/right_chat.png');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawImageNine(canvas);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+
+  void _drawImageNine(Canvas canvas) {
+    if (image != null) {
+      canvas.drawImageNine(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height - 6.0),
+              width: image!.width - 20.0,
+              height: 2.0),
+          Rect.fromCenter(
+              center: Offset(
+                0,
+                0,
+              ),
+              width: 300,
+              height: 120),
+          _paint);
+
+      canvas.drawImageNine(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height - 6.0),
+              width: image!.width - 20.0,
+              height: 2.0),
+          Rect.fromCenter(
+              center: Offset(
+                0,
+                0,
+              ),
+              width: 100,
+              height: 50)
+              .translate(250, 0),
+          _paint);
+
+      canvas.drawImageNine(
+          image!,
+          Rect.fromCenter(
+              center: Offset(image!.width / 2, image!.height - 6.0),
+              width: image!.width - 20.0,
+              height: 2.0),
+          Rect.fromCenter(
+              center: Offset(
+                0,
+                0,
+              ),
+              width: 80,
+              height: 250)
+              .translate(-250, 0),
+          _paint);
+    }
+  }
+}

assets/draw/p04/s04.dart

@@ -0,0 +1,121 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+///
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/shoot.png');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  final List<Sprite> allSprites = [];
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (image == null) {
+      return;
+    }
+    coordinate.paint(canvas, size);
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(0, 0),
+        alpha: 255,
+        rotation: 0));
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(257, 130),
+        alpha: 255,
+        rotation: 0));
+
+    final List<RSTransform> transforms = allSprites
+        .map((sprite) => RSTransform.fromComponents(
+      rotation: sprite.rotation,
+      scale: 1.0,
+      anchorX: sprite.anchor.dx,
+      anchorY: sprite.anchor.dy,
+      translateX: sprite.offset.dx,
+      translateY: sprite.offset.dy,
+    ))
+        .toList();
+
+    final List<Rect> rects =
+    allSprites.map((sprite) => sprite.position).toList();
+
+    canvas.drawAtlas(image!, transforms, rects, null, null, null, _paint);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+}
+
+class Sprite {
+  Rect position; // 雪碧图 中 图片矩形区域
+  Offset offset; // 移动偏倚
+  Offset anchor; // 移动偏倚
+  int alpha; // 透明度
+  double rotation; // 旋转角度
+
+  Sprite({this.offset=Offset.zero,this.anchor=Offset.zero, this.alpha=255, this.rotation=0,required this.position});
+}

assets/draw/p04/s05.dart

@@ -0,0 +1,135 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:typed_data';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+///
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/shoot.png');
+    setState(() {});
+  }
+
+  ui.Image? _image;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+            painter: PaperPainter(
+              _image,
+            )));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final ui.Image? image;
+  final Coordinate coordinate = Coordinate();
+
+  final List<Sprite> allSprites = [];
+
+  PaperPainter(this.image) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (image == null) {
+      return;
+    }
+
+    coordinate.paint(canvas, size);
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(0, 0),
+        alpha: 255,
+        rotation: 0));
+
+    allSprites.add(Sprite(
+        position: Rect.fromLTWH(0, 325, 257, 166),
+        offset: Offset(257, 130),
+        alpha: 255,
+        rotation: 0));
+
+    Float32List rectList = Float32List(allSprites.length * 4);
+    Float32List transformList = Float32List(allSprites.length * 4);
+
+    for (int i = 0; i < allSprites.length; i++) {
+      final Sprite sprite = allSprites[i];
+
+      rectList[i * 4 + 0] = sprite.position.left;
+      rectList[i * 4 + 1] = sprite.position.top;
+      rectList[i * 4 + 2] = sprite.position.right;
+      rectList[i * 4 + 3] = sprite.position.bottom;
+
+      final RSTransform transform = RSTransform.fromComponents(
+        rotation: sprite.rotation,
+        scale: 1.0,
+        anchorX: sprite.anchor.dx,
+        anchorY: sprite.anchor.dy,
+        translateX: sprite.offset.dx,
+        translateY: sprite.offset.dy,
+      );
+
+      transformList[i * 4 + 0] = transform.scos;
+      transformList[i * 4 + 1] = transform.ssin;
+      transformList[i * 4 + 2] = transform.tx;
+      transformList[i * 4 + 3] = transform.ty;
+
+    }
+
+    canvas.drawRawAtlas(image!, transformList, rectList, null, null, null, _paint);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => image != oldDelegate.image;
+}
+
+class Sprite {
+  Rect position; // 雪碧图 中 图片矩形区域
+  Offset offset; // 移动偏倚
+  Offset anchor; // 移动偏倚
+  int alpha; // 透明度
+  double rotation; // 旋转角度
+
+  Sprite({this.offset=Offset.zero,this.anchor=Offset.zero, this.alpha=255, this.rotation=0,required this.position});
+}

assets/draw/p04/s06.dart

@@ -0,0 +1,137 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    // _drawTextWithParagraph(canvas,TextAlign.left);
+    // _drawTextWithParagraph(canvas,TextAlign.center);
+    // _drawTextWithParagraph(canvas,TextAlign.right);
+
+    // _drawWithTextPaint(canvas);
+    // _drawTextPaintShowSize(canvas);
+    _drawTextPaintWithPaint(canvas);
+  }
+
+  void _drawTextWithParagraph(Canvas canvas, TextAlign textAlign) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: textAlign,
+      fontSize: 40,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ));
+    builder.pushStyle(
+      ui.TextStyle(
+          color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+    );
+    builder.addText("Flutter Unit");
+    ui.Paragraph paragraph = builder.build();
+    paragraph.layout(ui.ParagraphConstraints(width: 300));
+    canvas.drawParagraph(paragraph, Offset(0, 0));
+
+    canvas.drawRect(Rect.fromLTRB(0, 0, 300, 40),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawWithTextPaint(Canvas canvas) {
+    var textPainter = TextPainter(
+        text: TextSpan(
+            text: 'Flutter Unit',
+            style: TextStyle(fontSize: 40, color: Colors.black)),
+        textAlign: TextAlign.center,
+        textDirection: TextDirection.ltr);
+
+    // 进行布局
+    textPainter.layout();
+    textPainter.paint(canvas, Offset.zero);
+  }
+
+  void _drawTextPaintShowSize(Canvas canvas) {
+    TextPainter textPainter = TextPainter(
+        text: TextSpan(
+            text: 'Flutter Unit',
+            style: TextStyle(
+              // foreground: Paint()..style=PaintingStyle.stroke,
+                fontSize: 40,
+                color: Colors.black)),
+        textAlign: TextAlign.center,
+        textDirection: TextDirection.ltr);
+
+    textPainter.layout(); // 进行布局
+    Size size = textPainter.size; // 尺寸必须在布局后获取
+    textPainter.paint(canvas, Offset(-size.width / 2, -size.height / 2));
+
+    canvas.drawRect(
+        Rect.fromLTRB(0, 0, size.width, size.height)
+            .translate(-size.width / 2, -size.height / 2),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawTextPaintWithPaint(Canvas canvas) {
+    Paint textPaint = Paint()
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 1;
+    TextPainter textPainter = TextPainter(
+        text: TextSpan(
+            text: 'Flutter Unit by 张风捷特烈',
+            style: TextStyle(
+                foreground: textPaint, fontSize: 40)),
+        textAlign: TextAlign.center,
+        textDirection: TextDirection.ltr);
+
+    textPainter.layout(maxWidth: 280); // 进行布局
+    Size size = textPainter.size; // 尺寸必须在布局后获取
+    textPainter.paint(canvas, Offset(-size.width / 2, -size.height / 2));
+
+    canvas.drawRect(
+        Rect.fromLTRB(0, 0, size.width, size.height)
+            .translate(-size.width / 2, -size.height / 2),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => false;
+}

assets/draw/p04/s07.dart

@@ -0,0 +1,125 @@
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate(step: 25);
+
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  PaperPainter() {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    _drawTextLeft(canvas);
+    _drawTextTextAlignRight(canvas);
+    _drawTextPaint(canvas, "100", offset: Offset(0, 0));
+  }
+
+  void _drawTextLeft(Canvas canvas) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.left,
+      fontSize: 40,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(
+            color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText("Flutter Unit");
+
+    canvas.drawParagraph(
+        builder.build()..layout(ui.ParagraphConstraints(width: 300)),
+        Offset(0, -100));
+    canvas.drawRect(Rect.fromLTRB(0, 0 - 100.0, 300, 40 - 100.0),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawTextCenter(Canvas canvas,String str) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.center,
+      fontSize: 12,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(
+            color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText(str);
+
+    canvas.drawParagraph(
+        builder.build()..layout(ui.ParagraphConstraints(width: 12.0*str.length)),
+        Offset(0, 0));
+
+  }
+
+  void _drawTextTextAlignRight(Canvas canvas) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.right,
+      fontSize: 40,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(
+            color: Colors.black87, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText("Flutter Unit");
+
+    canvas.drawParagraph(
+        builder.build()..layout(ui.ParagraphConstraints(width: 300)),
+        Offset(0, 100));
+
+    canvas.drawRect(Rect.fromLTRB(0, 0 + 100.0, 300, 40 + 100.0),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  void _drawTextPaint(Canvas canvas, String text,
+      {Offset offset = Offset.zero}) {
+    TextPainter(
+        text: TextSpan(
+            text: text, style: TextStyle(fontSize: 12, color: Colors.black)),
+        textAlign: TextAlign.left,
+        textDirection: TextDirection.ltr)
+      ..layout(maxWidth: 300)
+      ..paint(canvas, offset);
+
+    canvas.drawRect(Rect.fromLTRB(0, 0, 300, 40),
+        _paint..color = Colors.blue.withAlpha(33));
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => false;
+}

assets/draw/p05/p05.dart

@@ -0,0 +1 @@
+export 'p05_page.dart';

assets/draw/p05/p05_page.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+import 's07.dart' as s7;
+import 's08.dart' as s8;
+import 's09.dart' as s9;
+import 's10.dart' as s10;
+import 's11.dart' as s11;
+
+
+class P05Page extends StatelessWidget {
+  const P05Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p05',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+        s7.Paper(),
+        s8.Paper(),
+        s9.Paper(),
+        s10.Paper(),
+        s11.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p05/s01.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.deepPurpleAccent
+      ..style = PaintingStyle.fill;
+    path
+      ..moveTo(0, 0) //移至(0,0)点
+      ..lineTo(60, 80) //从(0,0)画线到(60, 80) 点
+      ..lineTo(60, 0) //从(60,80)画线到(60, 0) 点
+      ..lineTo(0, -80) //从(60, 0) 画线到(0, -80)点
+      ..close(); //闭合路径
+    canvas.drawPath(path, paint);
+
+    paint
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 2;
+    path
+      ..moveTo(0, 0)
+      ..lineTo(-60, 80)
+      ..lineTo(-60, 0)
+      ..lineTo(0, -80);
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s02.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+class PaperPainter extends CustomPainter {
+
+  final Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.green
+      ..style = PaintingStyle.fill;
+    path
+      ..relativeMoveTo(0, 0)
+      ..relativeLineTo(100, 120)
+      ..relativeLineTo(-10, -60)
+      ..relativeLineTo( 60,-10,)
+      ..close();
+    canvas.drawPath(path, paint);
+
+    path.reset();
+    paint
+      ..style = PaintingStyle.stroke..color=Colors.green
+      ..strokeWidth = 2;
+    path
+      ..relativeMoveTo(-200, 0)
+      ..relativeLineTo(100, 120)
+      ..relativeLineTo(-10, -60)
+      ..relativeLineTo( 60,-10,)..close();
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s03.dart

@@ -0,0 +1,54 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+  final Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+    var rect = Rect.fromCenter(center: Offset(0, 0), width: 160, height: 100);
+
+    path.lineTo(30, 30);
+    path..arcTo(rect, 0, pi * 1.5, true);
+    canvas.drawPath(path, paint);
+
+    path.reset();
+    canvas.translate(200, 0);
+    path.lineTo(30, 30);
+    path..arcTo(rect, 0, pi * 1.5, false);
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s04.dart

@@ -0,0 +1,77 @@
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+    path.lineTo(80, -40);
+
+    //绘制中间
+    path
+      ..arcToPoint(
+        Offset(40, 40),
+        radius: Radius.circular(60),
+        largeArc: false,
+      )
+      ..close();
+    canvas.drawPath(path, paint);
+
+    //绘制左侧
+    path.reset();
+    canvas.translate(-150, 0);
+    path.lineTo(80, -40);
+    path
+      ..arcToPoint(Offset(40, 40),
+          radius: Radius.circular(60), largeArc: true, clockwise: false)
+      ..close();
+    canvas.drawPath(path, paint);
+
+    //绘制右侧
+    path.reset();
+    canvas.translate(150 + 150.0, 0);
+    path.lineTo(80, -40);
+    path
+      ..arcToPoint(
+        Offset(40, 40),
+        radius: Radius.circular(60),
+        largeArc: true,
+      )
+      ..close();
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s05.dart

@@ -0,0 +1,80 @@
+
+import 'dart:ui';
+import 'package:flutter/material.dart';
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+  final Coordinate coordinate=Coordinate();
+
+  final Offset p1 = Offset(80, -100);
+  final Offset p2 = Offset(160, 0);
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+
+    //抛物线
+    path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 1);
+    _drawHelper(canvas);
+    canvas.drawPath(path, paint);
+
+    //椭圆线
+    path.reset();
+    canvas.translate(-180, 0);
+    path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 0.5);
+    canvas.drawPath(path, paint);
+    _drawHelper(canvas);
+
+    //双曲线
+    path.reset();
+    canvas.translate(180+180.0, 0);
+    path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 1.5);
+    canvas.drawPath(path, paint);
+    _drawHelper(canvas);
+  }
+
+  void _drawHelper(Canvas canvas) {
+    canvas.drawPoints(
+        PointMode.points,
+        [
+          p1,
+          p2,
+        ],
+        Paint()
+          ..strokeWidth = 6
+          ..strokeCap = StrokeCap.round
+          ..color = Colors.blue);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s06.dart

@@ -0,0 +1,88 @@
+
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+
+class PaperPainter extends CustomPainter {
+
+  final Coordinate coordinate = Coordinate();
+
+  final Offset p1 = Offset(100, -100);
+  final Offset p2 = Offset(160, 50);
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+
+    path.quadraticBezierTo(p1.dx, p1.dy, p2.dx, p2.dy);
+    _drawHelper(canvas);
+
+    path.relativeQuadraticBezierTo(p1.dx, p1.dy, p2.dx, p2.dy);
+    canvas.drawPath(path, paint);
+
+  }
+
+  void _drawHelper(Canvas canvas) {
+    canvas.drawPoints(
+        PointMode.polygon,
+        [
+          Offset.zero,
+          p1,
+          p2,
+          p1.translate(160, 50),
+          p2.translate(160, 50),
+        ],
+        Paint()
+          ..strokeWidth = 1
+          ..strokeCap = StrokeCap.round
+          ..color = Colors.blue);
+    canvas.drawPoints(
+        PointMode.points,
+        [
+          Offset.zero,
+          p1,
+          p2,
+          p1.translate(160, 50),
+          p2.translate(160, 50),
+        ],
+        Paint()
+          ..strokeWidth = 6
+          ..strokeCap = StrokeCap.round
+          ..color = Colors.blue);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s07.dart

@@ -0,0 +1,91 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  final Offset p1 = Offset(80, -100);
+  final Offset p2 = Offset(80, 50);
+  final Offset p3 = Offset(160, 50);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint();
+
+    paint
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+    path.cubicTo(p1.dx, p1.dy, p2.dx, p2.dy, p3.dx, p3.dy);
+    _drawHelper(canvas);
+
+    path.relativeCubicTo(p1.dx, p1.dy, p2.dx, p2.dy, p3.dx, p3.dy);
+    canvas.drawPath(path, paint);
+
+  }
+
+  void _drawHelper(Canvas canvas) {
+    canvas.drawPoints(
+        PointMode.lines,
+        [
+          Offset.zero,
+          p1,
+          p2,
+          p3,
+          Offset.zero + p3,
+          p1 + p3,
+          p2 + p3,
+          p3 + p3,
+        ],
+        Paint()
+          ..strokeWidth = 1
+          ..strokeCap = StrokeCap.round
+          ..color = Colors.blue);
+    canvas.drawPoints(
+        PointMode.points,
+        [
+          Offset.zero,
+          p1,
+          p2,
+          p3,
+          Offset.zero + p3,
+          p1 + p3,
+          p2 + p3,
+          p3 + p3,
+        ],
+        Paint()
+          ..strokeWidth = 6
+          ..strokeCap = StrokeCap.round
+          ..color = Colors.blue);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s08.dart

@@ -0,0 +1,50 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+
+    Rect rect = Rect.fromPoints(Offset(100, 100), Offset(160, 160));
+    path
+      ..lineTo(100, 100)
+      ..addRect(rect)
+      ..relativeLineTo(100, -100)
+      ..addRRect(RRect.fromRectXY(rect.translate(100, -100), 10, 10));
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s09.dart

@@ -0,0 +1,52 @@
+import 'dart:math';
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+
+    Rect rect = Rect.fromPoints(Offset(100, 100), Offset(160, 140));
+    path
+      ..lineTo(100, 100)
+      ..addOval(rect)
+      ..relativeLineTo(100, -100)
+      ..addArc(rect.translate(100 + 60.0, -100), 0, pi);
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s10.dart

@@ -0,0 +1,66 @@
+import 'dart:math';
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(
+          coordinate: Coordinate()
+        ),
+      ),
+    );
+  }
+}
+
+
+class PaperPainter extends CustomPainter {
+
+  final Coordinate? coordinate;
+  PaperPainter({this.coordinate});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate?.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+
+    var p0 = Offset(100, 100);
+    path
+      ..lineTo(100, 100)
+      ..addPolygon([
+        p0,
+        p0.translate(20, -20),
+        p0.translate(40, -20),
+        p0.translate(60, 0),
+        p0.translate(60, 20),
+        p0.translate(40, 40),
+        p0.translate(20, 40),
+        p0.translate(0, 20),
+      ], true)
+      ..addPath(
+          Path()..relativeQuadraticBezierTo(125, -100, 260, 0), Offset.zero)
+      ..lineTo(160, 100);
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p05/s11.dart

@@ -0,0 +1,39 @@
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate(step: 25);
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => false;
+}

assets/draw/p06/p06.dart

@@ -0,0 +1 @@
+export 'p06_page.dart';

assets/draw/p06/p06_page.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+
+class P06Page extends StatelessWidget {
+  const P06Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p06',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p06/s01.dart

@@ -0,0 +1,56 @@
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+
+  final Coordinate coordinate = Coordinate();
+  PaperPainter();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+
+    Paint paint = Paint()
+      ..color = Colors.purpleAccent
+      ..strokeWidth = 2
+      ..style = PaintingStyle.stroke;
+
+    path
+      ..lineTo(100, 100)
+      ..relativeLineTo(0, -50)
+      ..close();
+
+    canvas.drawPath(path, paint);
+    canvas.drawPath(path.shift(Offset(100, 0)), paint);
+    canvas.drawPath(path.shift(Offset(200, 0)), paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p06/s02.dart

@@ -0,0 +1,61 @@
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purple
+      ..style = PaintingStyle.fill;
+
+    path
+      ..relativeMoveTo(0, 0)
+      ..relativeLineTo(-30, 120)
+      ..relativeLineTo(30, -30)
+      ..relativeLineTo(30, 30)
+      ..close();
+
+    canvas.drawPath(path, paint);
+
+    print(path.contains(Offset(20, 20)));
+    print(path.contains(Offset(0, 20)));
+
+    Rect bounds = path.getBounds();
+    canvas.drawRect(
+        bounds,
+        Paint()
+          ..color = Colors.orange
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 1);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p06/s03.dart

@@ -0,0 +1,56 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+
+  final Coordinate coordinate = Coordinate();
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint()
+      ..color = Colors.purple
+      ..style = PaintingStyle.fill;
+    path
+      ..relativeMoveTo(0, 0)
+      ..relativeLineTo(-30, 120)
+      ..relativeLineTo(30, -30)
+      ..relativeLineTo( 30,30)
+      ..close();
+
+    for(int i=0;i<8;i++){
+      canvas.drawPath(path.transform(Matrix4.rotationZ(i*pi/4).storage), paint);
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p06/s04.dart

@@ -0,0 +1,68 @@
+
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+
+
+  final Coordinate coordinate= Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Path path = Path();
+    Paint paint = Paint();
+    paint
+      ..color = Colors.purple
+      ..style = PaintingStyle.fill;
+    path
+      ..relativeMoveTo(0, 0)
+      ..relativeLineTo(-30, 120)
+      ..relativeLineTo(30, -30)
+      ..relativeLineTo( 30,30)
+      ..close();
+
+
+    var pathOval =Path()..addOval(Rect.fromCenter(center: Offset(0, 0),width: 60,height: 60));
+    canvas.drawPath(Path.combine(PathOperation.difference, path, pathOval), paint);
+
+    canvas.translate(120, 0);
+    canvas.drawPath(Path.combine(PathOperation.intersect, path, pathOval), paint);
+
+    canvas.translate(120, 0);
+    canvas.drawPath(Path.combine(PathOperation.union, path, pathOval), paint);
+
+    canvas.translate(-120*3.0, 0);
+    canvas.drawPath(Path.combine(PathOperation.reverseDifference, path, pathOval), paint);
+
+    canvas.translate(-120, 0);
+    canvas.drawPath(Path.combine(PathOperation.xor, path, pathOval), paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p06/s05.dart

@@ -0,0 +1,74 @@
+
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate.dart';
+
+
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatelessWidget{
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+
+}
+
+class PaperPainter extends CustomPainter {
+  final Coordinate coordinate = Coordinate();
+
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Paint paint = Paint()
+      ..color = Colors.purple
+      ..strokeWidth = 1
+      ..style = PaintingStyle.stroke;
+
+    Path path = Path();
+    path
+      ..relativeMoveTo(0, 0)
+      ..relativeLineTo(-30, 120)
+      ..relativeLineTo(30, -30)
+      ..relativeLineTo(30, 30)
+      ..close();
+
+    path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));
+
+    PathMetrics pms = path.computeMetrics();
+    pms.forEach((pm) {
+      print(
+          "---length:-${pm.length}----contourIndex:-${pm.contourIndex}----contourIndex:-${pm.isClosed}----");
+
+      Tangent? tangent = pm.getTangentForOffset(pm.length * 0.5);
+      if(tangent==null) return;
+      print(
+          "---position:-${tangent.position}----angle:-${tangent.angle}----vector:-${tangent.vector}----");
+
+      canvas.drawCircle(
+          tangent.position, 5, Paint()..color = Colors.deepOrange);
+    });
+
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p06/s06.dart

@@ -0,0 +1,83 @@
+import 'dart:ui';
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
+  late AnimationController _ctrl;
+  double progress = 0.0;
+
+  @override
+  void initState() {
+    super.initState();
+    _ctrl = AnimationController(
+        duration: Duration(seconds: 3), vsync: this)
+      ..forward();
+  }
+
+  @override
+  void dispose() {
+    _ctrl.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(progress: _ctrl),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Animation<double> progress;
+
+  PaperPainter({required this.progress}) : super(repaint: progress);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Paint paint = Paint()
+      ..color = Colors.purple
+      ..strokeWidth = 1
+      ..style = PaintingStyle.stroke;
+
+    Path path = Path();
+    path
+      ..relativeMoveTo(0, 0)
+      ..relativeLineTo(-30, 120)
+      ..relativeLineTo(30, -30)
+      ..relativeLineTo(30, 30)
+      ..close();
+
+    path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));
+
+    PathMetrics pms = path.computeMetrics();
+    for (PathMetric pm in pms) {
+      Tangent? tangent = pm.getTangentForOffset(pm.length * progress.value);
+      if(tangent ==null) continue;
+      canvas.drawCircle(
+          tangent.position, 5, Paint()..color = Colors.deepOrange);
+    }
+
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) =>
+      oldDelegate.progress != progress;
+}

assets/draw/p07/p07.dart

@@ -0,0 +1 @@
+export 'p07_page.dart';

assets/draw/p07/p07_page.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+
+class P07Page extends StatelessWidget {
+  const P07Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p07',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p07/s01.dart

@@ -0,0 +1,61 @@
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  static const double step = 20; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+  // 颜色列表 256 个元素
+  final Color colors = Color(0xffBBE9F7).withRed(0);
+  // final Color colors = Color(0xff00E9F9);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint = Paint();
+
+    canvas.save();
+    canvas.translate(size.width / 2, size.height / 2);
+
+    List<String> values = colors.value.toRadixString(2).split('').toList();
+
+    // 遍历列表 绘制矩形色块
+    canvas.translate(-step * 4.0, -step * 2.0);
+    values.asMap().forEach((i, v) {
+      int line = (i % 8); // 行
+      int row = i ~/ 8; // 列
+      var topLeft = Offset(step * line, step * row);
+      var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step));
+      canvas.drawRect(
+          rect, paint..color = v == '0' ? Colors.red : Colors.black);
+    });
+
+    canvas.restore();
+    coordinate.paint(canvas, size); //绘制坐标系
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p07/s02.dart

@@ -0,0 +1,55 @@
+import 'dart:ui';
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  static const double step = 15; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+  // 颜色列表 256 个元素
+  final List<Color> colors =
+  List<Color>.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0));
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint = Paint();
+
+    canvas.save();
+    canvas.translate(size.width / 2, size.height / 2);
+
+    // 遍历列表 绘制矩形色块
+    canvas.translate(-step * 8.0, -step * 8.0);
+    colors.asMap().forEach((i, color) {
+      int line = (i % 16); // 行
+      int row = i ~/ 16; // 列
+      var topLeft = Offset(step * line, step * row);
+      var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step));
+      canvas.drawRect(rect, paint..color = color);
+    });
+
+    canvas.restore();
+    coordinate.paint(canvas, size); //绘制坐标系
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

assets/draw/p07/s03.dart

@@ -0,0 +1,112 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate_pro.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _image;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image =
+    await loadImageFromAssets('assets/images/icon_head.png');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white, child: CustomPaint(painter: PaperPainter(_image)));
+  }
+
+
+}
+
+class PaperPainter extends CustomPainter {
+
+  final ui.Image? image;
+
+
+  PaperPainter(this.image);
+
+  static const double step = 20; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+  // 颜色列表 256 个元素
+  final List<Color> colors =
+  List<Color>.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0));
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(image ==null) return;
+
+    Paint srcPaint = Paint();
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-step * 17, -step * 7);
+    Paint dstPaint = Paint();
+    BlendMode.values.asMap().forEach((i, value) {
+      int line = i ~/ 10;
+      int row = i % 10;
+      canvas.save();
+
+      canvas.translate(3.7 * step * row, 5.5 * step * line);
+      canvas.drawImageRect(image!, Rect.fromPoints(Offset.zero, Offset(image!.width*1.0,image!.height*1.0)),
+          Rect.fromCenter(center:Offset.zero, width: 25*2.0,height: 25*2.0), dstPaint);
+
+      srcPaint
+        ..color = Color(0xffff0000)
+        ..blendMode = value;
+      canvas.drawRect(
+          Rect.fromPoints(Offset.zero, Offset(20 * 2.0, 20 * 2.0)), srcPaint);
+
+      _simpleDrawText(canvas,value.toString().split(".")[1],offset: Offset(-10, 50));
+      canvas.restore();
+    });
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+
+  void _simpleDrawText(Canvas canvas, String str,
+      {Offset offset = Offset.zero, Color color = Colors.black}) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.left,
+      fontSize: 11,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText(str);
+
+    canvas.drawParagraph(
+        builder.build()
+          ..layout(ui.ParagraphConstraints(width: 11.0 * str.length)),
+        offset);
+  }
+}

assets/draw/p07/s04.dart

@@ -0,0 +1,123 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _srcImage;
+  ui.Image? _dstImage;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _srcImage = await loadImageFromAssets('assets/images/src.png');
+    _dstImage = await loadImageFromAssets('assets/images/dst.png');
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(painter: PaperPainter(_srcImage, _dstImage)));
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+}
+
+class PaperPainter extends CustomPainter {
+  final ui.Image? srcImage;
+  final ui.Image? dstImage;
+
+  PaperPainter(this.srcImage, this.dstImage);
+
+  static const double step = 20; // 方格变长
+  final Coordinate coordinate = Coordinate(step: step);
+
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (dstImage == null || srcImage == null) return;
+
+    Paint srcPaint = Paint();
+    Paint dstPaint = Paint();
+
+    int index = 4;
+
+    BlendMode srcModel = BlendMode.dstOver;
+    BlendMode dstModel = BlendMode.srcOver;
+
+    srcPaint
+      ..blendMode = srcModel;
+    dstPaint
+      ..blendMode = dstModel;
+
+    _simpleDrawText(canvas, BlendMode.values[index].toString().split(".")[1],
+        fontSize: 16,
+        offset: Offset(50, 50));
+
+    canvas.translate(size.width / 2, size.height / 2);
+
+    canvas.drawImageRect(
+        dstImage!,
+        Rect.fromPoints(
+            Offset.zero, Offset(dstImage!.width * 1.0, dstImage!.height * 1.0)),
+        Rect.fromCenter(
+            center: Offset.zero, width: 400, height: 400),
+        dstPaint);
+
+    canvas.drawImageRect(
+        srcImage!,
+        Rect.fromPoints(
+            Offset.zero, Offset(srcImage!.width * 1.0, srcImage!.height * 1.0)),
+        Rect.fromCenter(
+            center: Offset.zero, width: 400, height: 400),
+        srcPaint);
+
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+
+  void _simpleDrawText(Canvas canvas, String str,
+      {double fontSize = 11,Offset offset = Offset.zero, Color color = Colors.black}) {
+    var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
+      textAlign: TextAlign.left,
+      fontSize: fontSize,
+      textDirection: TextDirection.ltr,
+      maxLines: 1,
+    ))
+      ..pushStyle(
+        ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic),
+      )
+      ..addText(str);
+
+    canvas.drawParagraph(
+        builder.build()
+          ..layout(ui.ParagraphConstraints(width: fontSize * str.length)),
+        offset);
+  }
+}

assets/draw/p07/s05.dart

@@ -0,0 +1,81 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:image/image.dart' as image;
+
+import '../components/coordinate_pro.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  image.Image? _image;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _image = await loadImageFromAssets('assets/images/wy_300x200.jpg');
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white, child: CustomPaint(painter: PaperPainter(_image)));
+  }
+
+  //读取 assets 中的图片
+  Future<image.Image?> loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    List<int> bytes = data.buffer.asUint8List();
+    return image.decodeImage(Uint8List.fromList(bytes));
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final image.Image? imageSrc;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.imageSrc) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawImage(canvas);
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) =>true;
+
+  void _drawImage(Canvas canvas) {
+    if (imageSrc == null)  return;
+    image.Pixel pixel = imageSrc!.getPixel(imageSrc!.width, 0);
+    var color = Color.fromARGB(pixel.a.toInt(),pixel.r.toInt(),pixel.g.toInt(),pixel.b.toInt());
+    canvas.drawCircle(Offset.zero, 10, _paint..color = color);
+  }
+}

assets/draw/p07/s06.dart

@@ -0,0 +1,110 @@
+import 'dart:async';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:image/image.dart' as image;
+
+import '../components/coordinate_pro.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  image.Image? _image;
+  List<Ball> balls = [];
+  double d = 20; //复刻的像素边长
+
+  @override
+  void initState() {
+    super.initState();
+    _initBalls();
+  }
+
+  void _initBalls() async {
+    _image = await loadImageFromAssets('assets/images/icon_head.png');
+    if (_image == null) return;
+    for (int i = 0; i < _image!.width; i++) {
+      for (int j = 0; j < _image!.height; j++) {
+        Ball ball = Ball();
+        ball.x = i * d + d / 2;
+        ball.y = j * d + d / 2;
+        ball.r = d / 2;
+        image.Pixel pixel = _image!.getPixel(i, j);
+        var color = Color.fromARGB(pixel.a.toInt(),pixel.r.toInt(),pixel.g.toInt(),pixel.b.toInt());
+        ball.color = color;
+        balls.add(ball);
+      }
+    }
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+          painter: PaperPainter(balls),
+        ));
+  }
+
+  //读取 assets 中的图片
+  Future<image.Image?> loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    List<int> bytes = data.buffer.asUint8List();
+    return image.decodeImage(Uint8List.fromList(bytes));
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  late Paint _paint;
+
+  final double strokeWidth = 0.5;
+  final Color color = Colors.blue;
+
+  final List<Ball> balls;
+  final Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.balls) {
+    _paint = Paint()
+      ..style = PaintingStyle.fill
+      ..strokeWidth = strokeWidth
+      ..color = color;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(-710, -1000);
+    _drawImage(canvas);
+  }
+
+  void _drawImage(Canvas canvas) {
+    balls.forEach((Ball ball) {
+      canvas.drawCircle(
+          Offset(ball.x, ball.y), ball.r, _paint..color = ball.color);
+    });
+  }
+
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) => true;
+
+}
+
+class Ball {
+  double x; //点位X
+  double y; //点位Y
+  Color color; //颜色
+  double r; // 半径
+
+  Ball({this.x=0, this.y=0, this.color=Colors.black, this.r=5});
+
+}

assets/draw/p08/p08.dart

@@ -0,0 +1 @@
+export 'p08_page.dart';

assets/draw/p08/p08_page.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+import 's06.dart' as s6;
+import 's07.dart' as s7;
+import 's08.dart' as s8;
+import 's09.dart' as s9;
+
+
+class P08Page extends StatelessWidget {
+  const P08Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p08',
+
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+        s7.Paper(),
+        s8.Paper(),
+        s9.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p08/s01.dart

@@ -0,0 +1,113 @@
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  Coordinate coordinate = Coordinate();
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-100, 0);
+
+    drawShaderLinear(canvas);
+  }
+
+  void drawShaderLinear(Canvas canvas) {
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+    Paint paint = Paint();
+
+    paint
+      ..style = PaintingStyle.stroke
+      ..color = Colors.blue
+      ..strokeJoin = StrokeJoin.miter
+      ..strokeWidth = 50;
+
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.clamp);
+    canvas.drawLine(
+      Offset(0, 0),
+      Offset(200, 0),
+      paint,
+    );
+
+    canvas.translate(240, 0);
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.repeated);
+    canvas.drawLine(
+      Offset(0, 0),
+      Offset(200, 0),
+      paint,
+    );
+
+    canvas.translate(-240*2.0, 0);
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror);
+    canvas.drawLine(
+      Offset(0, 0),
+      Offset(200, 0),
+      paint,
+    );
+
+    canvas.translate(0, 100);
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror,Matrix4.rotationZ(pi/6).storage);
+    canvas.drawLine(
+      Offset(0, 0),
+      Offset(200, 0),
+      paint,
+    );
+
+    canvas.translate(240, 0);
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror,Matrix4.translationValues(20, 0, 0).storage);
+    canvas.drawLine(
+      Offset(0, 0),
+      Offset(200, 0),
+      paint,
+    );
+
+    canvas.translate(240, 0);
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror,Matrix4.skewX(-pi/6).storage);
+    canvas.drawLine(
+      Offset(0, 0),
+      Offset(200, 0),
+      paint,
+    );
+
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s02.dart

@@ -0,0 +1,111 @@
+
+import 'package:flutter/material.dart';
+
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  Coordinate coordinate = Coordinate();
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    drawShaderRadial(canvas);
+  }
+
+  void drawShaderRadial(Canvas canvas) {
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+    Paint paint =  Paint();
+    paint
+      ..style = PaintingStyle.fill
+      ..color = Colors.blue;
+
+    paint.shader = ui.Gradient.radial(
+        Offset(0, 0), 25, colors, pos, TileMode.clamp);
+    canvas.drawCircle(
+      Offset(0, 0),
+      50,
+      paint,
+    );
+
+    canvas.translate(160, 0);
+    paint.shader = ui.Gradient.radial(
+        Offset(0, 0), 25, colors, pos, TileMode.repeated);
+    canvas.drawCircle(
+      Offset(0, 0),
+      50,
+      paint,
+    );
+
+    canvas.translate(-160*2.0, 0);
+    paint.shader = ui.Gradient.radial(
+        Offset(0, 0), 25, colors, pos, TileMode.mirror);
+    canvas.drawCircle(
+      Offset(0, 0),
+      50,
+      paint,
+    );
+
+    canvas.translate(0, 120);
+    paint.shader = ui.Gradient.radial(Offset(0, 0), 25, colors,
+        pos, TileMode.mirror, null, Offset(10, 10), 1);
+    canvas.drawCircle(
+      Offset.zero,
+      50,
+      paint,
+    );
+
+    canvas.translate(160, 0);
+    paint.shader = ui.Gradient.radial(Offset(0, 0), 25, colors,
+        pos, TileMode.mirror, null, Offset(-10, -10), 3);
+    canvas.drawCircle(
+      Offset.zero,
+      50,
+      paint,
+    );
+
+
+    canvas.translate(160, 0);
+    paint.shader = ui.Gradient.radial(Offset(0, 0), 25, colors,
+        pos, TileMode.mirror, null, Offset(-10, -10), 0);
+    canvas.drawCircle(
+      Offset.zero,
+      50,
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s03.dart

@@ -0,0 +1,92 @@
+import 'dart:math';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    drawShaderSweep(canvas);
+  }
+
+  void drawShaderSweep(Canvas canvas) {
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+    Paint paint = Paint();
+    paint
+      ..style = PaintingStyle.fill
+      ..color = Colors.blue;
+
+    paint.shader =
+        ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.clamp, pi / 2, pi);
+    canvas.drawCircle(
+      Offset.zero,
+      50,
+      paint,
+    );
+
+    canvas.translate(160, 0);
+    paint.shader =
+        ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.repeated, pi / 2, pi);
+    canvas.drawCircle(
+      Offset.zero,
+      50,
+      paint,
+    );
+
+    canvas.translate(-160*2.0, 0);
+    paint.shader =
+        ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.mirror, pi / 2, pi);
+    canvas.drawCircle(
+      Offset.zero,
+      50,
+      paint,
+    );
+
+    canvas.translate(-160*2.0, 0);
+    paint.shader =
+        ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.mirror, pi / 2, pi);
+    canvas.drawCircle(
+      Offset.zero,
+      50,
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s04.dart

@@ -0,0 +1,98 @@
+import 'dart:async';
+import 'dart:typed_data';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+
+import 'package:flutter/services.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: ImageShaderPainter(_img),
+      ),
+    );
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+}
+
+class ImageShaderPainter extends CustomPainter {
+  ui.Image? img;
+
+  ImageShaderPainter(this.img);
+  Coordinate coordinate = Coordinate();
+  @override
+  void paint(Canvas canvas, Size size) {
+    if(img == null) return;
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Paint paint = Paint()..shader = ImageShader(
+        img!,
+        TileMode.repeated,
+        TileMode.repeated,
+        Float64List.fromList([
+          1, 0, 0, 0,
+          0, 1, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1,
+        ]));
+
+    canvas.drawCircle(Offset(100, 100), 50, paint);
+
+    canvas.translate(120, 0);
+
+    canvas.drawCircle(
+        Offset(100, 100),
+        50,
+        paint
+          ..strokeWidth = 10
+          ..style = PaintingStyle.stroke);
+
+    canvas.translate(-120*2.0, 0);
+
+    canvas.drawLine(
+        Offset(100 , 50),
+        Offset(100 , 50 + 100.0),
+        paint
+          ..strokeWidth = 30
+          ..style = PaintingStyle.stroke);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s05.dart

@@ -0,0 +1,98 @@
+import 'dart:async';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+          painter: PaperPainter(_img),
+        ));
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+  Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.img);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (img == null) return;
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-120 * 2.0 - imgW / 4, -imgH / 4);
+    drawColorFilter(canvas);
+  }
+
+  double get imgW => img!.width.toDouble();
+
+  double get imgH => img!.height.toDouble();
+
+  void drawColorFilter(Canvas canvas) {
+    var paint = Paint();
+    paint.colorFilter = ColorFilter.linearToSrgbGamma();
+    _drawImage(canvas, paint);
+
+    paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.modulate);
+    _drawImage(canvas, paint);
+
+    paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.difference);
+    _drawImage(canvas, paint);
+
+    paint.colorFilter = ColorFilter.mode(Colors.blue, BlendMode.plus);
+    _drawImage(canvas, paint);
+
+    paint.colorFilter = ColorFilter.mode(Colors.blue, BlendMode.lighten);
+    _drawImage(canvas, paint);
+  }
+
+  void _drawImage(Canvas canvas, Paint paint) {
+    canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint);
+    canvas.translate(120, 0);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s06.dart

@@ -0,0 +1,139 @@
+import 'dart:async';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        color: Colors.white,
+        child: CustomPaint(
+          painter: PaperPainter(_img),
+        ));
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+  Coordinate coordinate = Coordinate();
+
+  PaperPainter(this.img);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (img == null) return;
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-120*2 - imgW / 4, -imgH / 4);
+    drawColorFilter(canvas);
+  }
+
+  double get imgW => img!.width.toDouble();
+
+  double get imgH => img!.height.toDouble();
+
+  void drawColorFilter(Canvas canvas) {
+    var paint = Paint();
+
+    _drawImage(canvas, paint);
+
+    const ColorFilter carveCarve = ColorFilter.matrix(<double>[
+      -1, 0, 0, 0, 255,
+      0, 0, 0, 0, 0,
+      0, 0, 0, 0, 0,
+      0, 0, 0, 1, 0,
+    ]);
+    paint.colorFilter = carveCarve;
+    // _drawImage(canvas, paint);
+
+    const ColorFilter negative = ColorFilter.matrix(<double>[
+      -1, 0, 0, 0, 255,
+      0, -1, 0, 0, 255,
+      0, 0, -1,0, 255,
+      0, 0, 0, 1, 0
+    ]);
+    paint.colorFilter = negative;
+    // _drawImage(canvas, paint);
+
+    const ColorFilter sepia = ColorFilter.matrix(<double>[
+      0.393, 0.769, 0.189, 0, 0,
+      0.349, 0.686, 0.168, 0, 0,
+      0.272, 0.534, 0.131, 0 , 0,
+      0,     0,     0,     1, 0,
+    ]);
+    _drawImage(canvas, paint..colorFilter=sepia);
+
+    const ColorFilter greyscale = ColorFilter.matrix(<double>[
+      0.2126, 0.7152, 0.0722, 0, 0,
+      0.2126, 0.7152, 0.0722, 0, 0,
+      0.2126, 0.7152, 0.0722, 0, 0,
+      0,      0,      0,      1, 0,
+    ]);
+    _drawImage(canvas, paint..colorFilter=greyscale);
+
+    const n = 90.0;
+    const ColorFilter light = ColorFilter.matrix(<double>[
+      1,0,0,0,n,
+      0,1,0,0,n,
+      0,0,1,0,n,
+      0,0,0,1,0
+    ]);
+    _drawImage(canvas, paint..colorFilter=light);
+
+    const n2 = -126.0;
+    const ColorFilter darken = ColorFilter.matrix(<double>[
+      1,0,0,0,n2,
+      0,1,0,0,n2,
+      0,0,1,0,n2,
+      0,0,0,1,0
+    ]);
+    _drawImage(canvas, paint..colorFilter=darken);
+
+  }
+
+  void _drawImage(Canvas canvas, Paint paint) {
+    canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint);
+    canvas.translate(120, 0);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s07.dart

@@ -0,0 +1,102 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: PaperPainter(_img),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+  Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (img == null) return;
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-120*2.5 - imgW / 4, -imgH / 4);
+    drawMaskFilter(canvas);
+  }
+
+  double get imgW => img!.width.toDouble();
+
+  double get imgH => img!.height.toDouble();
+
+  void drawMaskFilter(Canvas canvas) {
+    var paint = Paint();
+    _drawImage(canvas, paint);
+
+    paint.maskFilter = MaskFilter.blur(BlurStyle.inner, 20);
+    _drawImage(canvas, paint);
+
+    paint.maskFilter = MaskFilter.blur(BlurStyle.outer, 3);
+    _drawImage(canvas, paint);
+
+    paint.maskFilter = MaskFilter.blur(BlurStyle.solid, 3);
+    _drawImage(canvas, paint);
+
+    paint.maskFilter = MaskFilter.blur(BlurStyle.normal, 3);
+    _drawImage(canvas, paint);
+
+    paint.maskFilter = MaskFilter.blur(BlurStyle.normal, 5);
+    _drawImage(canvas, paint);
+  }
+
+  void _drawImage(Canvas canvas, Paint paint) {
+    canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint);
+    canvas.translate(120, 0);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s08.dart

@@ -0,0 +1,100 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: PaperPainter(_img),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+
+  Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (img == null) return;
+    coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-120 * 2.0 - imgW / 4, -imgH / 4);
+    drawImageFilter(canvas);
+  }
+
+  double get imgW => img!.width.toDouble();
+
+  double get imgH => img!.height.toDouble();
+
+  void drawImageFilter(Canvas canvas) {
+    var paint = Paint();
+    _drawImage(canvas, paint);
+
+    paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.4, sigmaY: 0.4);
+    _drawImage(canvas, paint);
+
+    paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.6, sigmaY: 0.6);
+    _drawImage(canvas, paint);
+
+    paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.8, sigmaY: 0.8);
+    _drawImage(canvas, paint);
+
+    paint.imageFilter = ui.ImageFilter.matrix(Matrix4.skew(pi / 8, 0).storage);
+    _drawImage(canvas, paint);
+  }
+
+  void _drawImage(Canvas canvas, Paint paint) {
+    canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint);
+    canvas.translate(120, 0);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p08/s09.dart

@@ -0,0 +1,99 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'dart:ui' as ui;
+
+import '../components/coordinate_pro.dart';
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  const Paper({super.key});
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> {
+  ui.Image? _img;
+
+  bool get hasImage => _img != null;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  void _loadImage() async {
+    _img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
+    setState(() {});
+  }
+
+  //读取 assets 中的图片
+  Future<ui.Image>? loadImageFromAssets(String path) async {
+    ByteData data = await rootBundle.load(path);
+    return decodeImageFromList(data.buffer.asUint8List());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: PaperPainter(_img),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  ui.Image? img;
+
+  PaperPainter(this.img);
+
+  Coordinate coordinate = Coordinate();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    if (img == null) return;
+    // coordinate.paint(canvas, size);
+    canvas.translate(size.width / 2, size.height / 2);
+    canvas.translate(-120 * 1.5 - imgW / 4, -imgH / 4);
+    drawFilterQuality(canvas);
+  }
+
+  double get imgW => img!.width.toDouble();
+
+  double get imgH => img!.height.toDouble();
+
+  void drawFilterQuality(Canvas canvas) {
+    var paint = Paint();
+    paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.6, sigmaY: 0.6);
+    paint.maskFilter = MaskFilter.blur(BlurStyle.inner, 20);
+    paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.modulate);
+    paint.filterQuality = FilterQuality.none;
+    _drawImage(canvas, paint);
+    paint.filterQuality = FilterQuality.low;
+    _drawImage(canvas, paint);
+    paint.filterQuality = FilterQuality.medium;
+    _drawImage(canvas, paint);
+    paint.filterQuality = FilterQuality.high;
+    _drawImage(canvas, paint);
+  }
+
+  void _drawImage(Canvas canvas, Paint paint) {
+    canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH),
+        Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint);
+    canvas.translate(120, 0);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}

assets/draw/p09/p09.dart

@@ -0,0 +1 @@
+export 'p09_page.dart';

assets/draw/p09/p09_page.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+
+class P09Page extends StatelessWidget {
+  const P09Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p09',
+
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p09/s01.dart

@@ -0,0 +1,60 @@
+
+import 'package:flutter/material.dart';
+
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: CustomPaint(
+            // painter: BgPainter(), // 背景
+            foregroundPainter: BgPainter(Colors.blue.withOpacity(0.9)), // 前景
+            child:
+            Text(
+              "张风捷特烈",
+              style: TextStyle(color: Colors.black, fontSize: 20),
+            ),
+          ),
+        ),
+        Expanded(
+          child: CustomPaint(
+            painter: BgPainter(Colors.red), // 背景
+            // foregroundPainter: BgPainter(), // 前景
+            child:
+            Text(
+              "张风捷特烈",
+              style: TextStyle(color: Colors.white, fontSize: 20),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class BgPainter extends CustomPainter {
+  final Color color;
+
+  BgPainter(this.color);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero&size);
+    canvas.drawPaint(Paint()..color = color);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return false;
+  }
+}

assets/draw/p09/s02.dart

@@ -0,0 +1,65 @@
+import 'dart:ui';
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(child: _buildChild());
+  }
+
+  Widget _buildChild() {
+    final Widget just = CustomPaint(
+      painter: BgPainter(), // 背景
+    );
+
+    final Widget withSize = CustomPaint(
+      size: Size(100,100),
+      painter: BgPainter(), // 背景
+    );
+
+
+    final Widget withLayoutBuilder = LayoutBuilder(
+      builder: _builderByLayout,
+    );
+
+
+    final Widget withChild = CustomPaint(
+      painter: BgPainter(),
+      child: Container(
+        width: 100,
+        height: 100,
+      ), // 背景
+    );
+
+    return withChild;
+  }
+
+  Widget _builderByLayout(BuildContext context, BoxConstraints constraints) {
+    return CustomPaint(
+      size: Size(constraints.maxWidth, constraints.maxHeight),
+      painter: BgPainter(), // 背景
+    );
+  }
+}
+
+class BgPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero&size);
+
+    canvas.drawRect(
+        Rect.fromPoints(Offset.zero, Offset(size.width, size.height)),
+        Paint()..color = Colors.red);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
+

assets/draw/p09/s03.dart

@@ -0,0 +1,52 @@
+import 'dart:async';
+import 'dart:math';
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../components/coordinate_pro.dart';
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatelessWidget{
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size(100,100),
+      painter: PicMan(), // 背景
+    );
+  }
+
+}
+
+class PicMan extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    canvas.translate(size.width/2, size.height/2);
+    _drawArcDetail(canvas);
+  }
+
+  void _drawArcDetail(Canvas canvas) {
+    var rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 100);
+    Paint _paint = Paint();
+
+
+    var a = pi / 8;
+    canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color=Colors.yellowAccent);
+    canvas.translate(40, 0);
+
+    canvas.translate(40, 0);
+    canvas.drawCircle(Offset(0, 0), 6, _paint);
+    canvas.translate(25, 0);
+    canvas.drawCircle(Offset(0, 0), 6, _paint);
+
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}

assets/draw/p10/p10.dart

@@ -0,0 +1 @@
+export 'p10_page.dart';

assets/draw/p10/p10_page.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+import 's05.dart' as s5;
+
+class P10Page extends StatelessWidget {
+  const P10Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p10',
+
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p10/s01.dart

@@ -0,0 +1,71 @@
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+
+class Paper extends StatefulWidget {
+  final Color color;
+  final double angle;
+  const Paper({Key? key, this.color = Colors.lightBlue, this.angle = 30 }) : super(key: key);
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper>{
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100),
+        painter: PicManPainter(color: widget.color, angle : widget.angle), // 背景
+      ),
+    );
+  }
+}
+
+class PicManPainter extends CustomPainter {
+  final Color color; // 颜色
+  final double angle; // 角度(与x轴交角 角度制)
+
+  Paint _paint = Paint();
+
+  PicManPainter({this.color = Colors.yellowAccent, this.angle = 30});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    final double radius = size.width / 2;
+    canvas.translate(radius, size.height / 2);
+
+    _drawHead(canvas, size);
+    _drawEye(canvas, radius);
+  }
+
+  //绘制头
+  void _drawHead(Canvas canvas, Size size) {
+    var rect = Rect.fromCenter(
+        center: Offset(0, 0), height: size.width, width: size.height);
+    var a = angle / 180 * pi;
+    canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color);
+  }
+
+  //绘制眼睛
+  void _drawEye(Canvas canvas, double radius) {
+    canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
+        _paint..color = Colors.white);
+  }
+
+  @override
+  bool shouldRepaint(covariant PicManPainter oldDelegate) =>
+      oldDelegate.color != color || oldDelegate.angle != angle;
+}

assets/draw/p10/s02.dart

@@ -0,0 +1,87 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/11/2
+/// contact me by email 1981462002@qq.com
+/// 说明:
+///
+
+class Paper extends StatefulWidget {
+  final Color color;
+
+  const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      lowerBound: 10,
+      upperBound: 40,
+      duration: const Duration(seconds: 1),
+      vsync: this,
+    )..repeat(reverse: true);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100),
+        painter: PicManPainter(color: widget.color, angle: _controller), // 背景
+      ),
+    );
+  }
+}
+
+class PicManPainter extends CustomPainter {
+
+  final Animation<double> angle; // 角度(与x轴交角 角度制)
+  final Color color; // 颜色
+  Paint _paint = Paint();
+
+  PicManPainter({this.color = Colors.yellowAccent, required this.angle})
+      : super(repaint: angle);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    final double radius = size.width / 2;
+    canvas.translate(radius, size.height / 2);
+    _drawHead(canvas, size);
+    _drawEye(canvas, radius);
+  }
+
+  //绘制头
+  void _drawHead(Canvas canvas, Size size) {
+    var rect = Rect.fromCenter(
+        center: Offset(0, 0), height: size.width, width: size.height);
+    var a = angle.value / 180 * pi;
+    canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color);
+  }
+
+  //绘制眼睛
+  void _drawEye(Canvas canvas, double radius) {
+    canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
+        _paint..color = Colors.white);
+  }
+
+  @override
+  bool shouldRepaint(covariant PicManPainter oldDelegate) {
+    print('-----shouldRepaint---------');
+    return true;
+  }
+}

assets/draw/p10/s03.dart

@@ -0,0 +1,94 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/11/2
+/// contact me by email 1981462002@qq.com
+/// 说明:
+///
+
+class Paper extends StatefulWidget {
+  final Color color;
+
+  const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<Color?> _colorCtrl;
+  late Animation<double> _angleCtrl;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 1),
+      vsync: this,
+    );
+
+    _angleCtrl = _controller.drive(Tween(begin: 10, end: 40));
+
+    _colorCtrl =
+        ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
+
+    _controller.repeat(reverse: true);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100),
+        painter: PicManPainter(
+            color: _colorCtrl, angle: _angleCtrl, repaint: _controller),
+      ),
+    );
+  }
+}
+
+class PicManPainter extends CustomPainter {
+  final Animation<double> repaint;
+  final Animation<double> angle;
+  final Animation<Color?> color;
+
+  Paint _paint = Paint();
+
+  PicManPainter({ required this.repaint,required this.color,required this.angle})
+      : super(repaint: repaint);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    final double radius = size.width / 2;
+    canvas.translate(radius, size.height / 2);
+    _drawHead(canvas, size);
+    _drawEye(canvas, radius);
+  }
+
+  //绘制头
+  void _drawHead(Canvas canvas, Size size) {
+    var rect = Rect.fromCenter(
+        center: Offset(0, 0), height: size.width, width: size.height);
+    var a = angle.value / 180 * pi;
+    canvas.drawArc(
+        rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color.value??Colors.black);
+  }
+
+  //绘制眼睛
+  void _drawEye(Canvas canvas, double radius) {
+    canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
+        _paint..color = Colors.white);
+  }
+
+  @override
+  bool shouldRepaint(covariant PicManPainter oldDelegate)=> oldDelegate.repaint != repaint;
+}

assets/draw/p10/s04.dart

@@ -0,0 +1,82 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/11/2
+/// contact me by email 1981462002@qq.com
+/// 说明:
+///
+
+class Paper extends StatefulWidget {
+  final Color color;
+
+  const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 1),
+      vsync: this,
+    );
+
+    _controller.repeat(reverse: true);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100),
+        painter: PicManPainter(_controller), // 背景
+      ),
+    );
+  }
+}
+
+class PicManPainter extends CustomPainter {
+  final Animation<double> repaint; // 角度(与x轴交角 角度制)
+
+  final ColorTween colorTween = ColorTween(begin: Colors.blue, end: Colors.red);
+  final Tween<double> angleTween = Tween(begin: 10.0, end: 40.0);
+
+  Paint _paint = Paint();
+
+  PicManPainter(this.repaint)
+      : super(repaint: repaint);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    final double radius = size.width / 2;
+    canvas.translate(radius, size.height / 2);
+    _drawHead(canvas, size);
+    _drawEye(canvas, radius);
+  }
+
+  //绘制头
+  void _drawHead(Canvas canvas, Size size) {
+    var rect = Rect.fromCenter(
+        center: Offset(0, 0), height: size.width, width: size.height);
+    double a = angleTween.evaluate(repaint) / 180 * pi;
+    canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true,
+        _paint..color = colorTween.evaluate(repaint)??Colors.black);
+  }
+
+  //绘制眼睛
+  void _drawEye(Canvas canvas, double radius) {
+    canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
+        _paint..color = Colors.white);
+  }
+
+  @override
+  bool shouldRepaint(covariant PicManPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}

assets/draw/p10/s05.dart

@@ -0,0 +1,100 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/11/2
+/// contact me by email 1981462002@qq.com
+/// 说明:
+///
+
+class Paper extends StatefulWidget {
+  final Color color;
+
+  const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 1),
+      vsync: this,
+    );
+
+    _controller.repeat(reverse: true);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100), painter: PicManPainter(_controller), // 背景
+      ),
+    );
+  }
+}
+
+class PicManPainter extends CustomPainter {
+  final Animation<double> repaint;
+
+  // 创建 Tween
+  final ColorDoubleTween tween = ColorDoubleTween(
+      begin: ColorDouble(color: Colors.blue, value: 10),
+      end: ColorDouble(color: Colors.red, value: 10));
+
+  Paint _paint = Paint();
+
+  PicManPainter(this.repaint) : super(repaint: repaint);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    final double radius = size.width / 2;
+    canvas.translate(radius, size.height / 2);
+    _drawHead(canvas, size);
+    _drawEye(canvas, radius);
+  }
+
+  //绘制头
+  void _drawHead(Canvas canvas, Size size) {
+    var rect = Rect.fromCenter(
+        center: Offset(0, 0), height: size.width, width: size.height);
+    var a = tween.evaluate(repaint).value / 180 * pi;
+    canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true,
+        _paint..color = tween.evaluate(repaint).color ?? Colors.black);
+  }
+
+  //绘制眼睛
+  void _drawEye(Canvas canvas, double radius) {
+    canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
+        _paint..color = Colors.white);
+  }
+
+  @override
+  bool shouldRepaint(covariant PicManPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}
+
+class ColorDouble {
+  final Color? color;
+  final double value;
+
+  ColorDouble({this.color = Colors.blue, this.value = 0});
+}
+
+class ColorDoubleTween extends Tween<ColorDouble> {
+  ColorDoubleTween({required ColorDouble begin, required ColorDouble end})
+      : super(begin: begin, end: end);
+
+  @override
+  ColorDouble lerp(double t) => ColorDouble(
+        color: Color.lerp(begin?.color, end?.color, t),
+        value: (begin!.value + (end!.value - begin!.value) * t),
+      );
+}

assets/draw/p11/p11.dart

@@ -0,0 +1 @@
+export 'p11_page.dart';

assets/draw/p11/p11_page.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+
+class P11Page extends StatelessWidget {
+  const P11Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p11',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p11/s01.dart

@@ -0,0 +1,121 @@
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CurveBox(curve: const Cubic(1, -0.06, 0.1, 1.2),),
+    );
+  }
+}
+
+
+class CurveBox extends StatefulWidget {
+  final Color color;
+  final Curve curve;
+
+  CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear})
+      : super(key: key);
+
+  @override
+  _CurveBoxState createState() => _CurveBoxState();
+}
+
+class _CurveBoxState extends State<CurveBox>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _angleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 3),
+      vsync: this,
+    );
+    _angleAnimation = CurveTween(curve: widget.curve).animate(_controller);
+    _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size(100, 100),
+      painter: CurveBoxPainter(_controller, _angleAnimation), // 背景
+    );
+  }
+}
+
+class CurveBoxPainter extends CustomPainter {
+  final Animation<double> repaint; //
+  Animation<double> angleAnimation;
+
+  Paint _paint = Paint();
+
+  CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {}
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawRing(canvas, size);
+    _drawRedCircle(canvas, size);
+    _drawGreenCircle(canvas, size);
+  }
+
+  //绘制环
+  void _drawRing(Canvas canvas, Size size) {
+    final double strokeWidth = 5;
+    _paint
+      ..color = Colors.blue
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth;
+    canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint);
+  }
+
+  // 绘制红球
+  void _drawRedCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.rotate(angleAnimation.value * 2 * pi);
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  // 绘制绿球
+  void _drawGreenCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.translate(0,angleAnimation.value * (size.height-10));
+    _paint
+      ..color = Colors.green
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant CurveBoxPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}

assets/draw/p11/s02.dart

@@ -0,0 +1,175 @@
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final curvesMap = {
+      "linear": Curves.linear,
+      "decelerate": Curves.decelerate,
+      "fastLinearToSlowEaseIn": Curves.fastLinearToSlowEaseIn,
+      "ease": Curves.ease,
+      "easeIn": Curves.easeIn,
+      "easeInToLinear": Curves.easeInToLinear,
+      "easeInSine": Curves.easeInSine,
+      "easeInQuad": Curves.easeInCubic,
+      "easeInCubic": Curves.easeInCubic,
+      "easeInQuart": Curves.easeInQuart,
+      "easeInQuint": Curves.easeInQuint,
+      "easeInExpo": Curves.easeInExpo,
+      "easeInCirc": Curves.easeInCirc,
+      "easeInBack": Curves.easeInBack,
+      "easeOut": Curves.easeOut,
+      "linearToEaseOut": Curves.linearToEaseOut,
+      "easeOutSine": Curves.easeOutSine,
+      "easeOutQuad": Curves.easeOutQuad,
+      "easeOutCubic": Curves.easeOutCubic,
+      "easeOutQuart": Curves.easeOutQuart,
+      "easeOutQuint": Curves.easeOutQuint,
+
+      // "easeOutExpo": Curves.easeOutExpo,
+      // "easeOutCirc": Curves.easeOutCirc,
+      // "easeOutBack": Curves.easeOutBack,
+      // "easeInOut": Curves.easeInOut,
+      // "easeInOutSine": Curves.easeInOutSine,
+      // "easeInOutQuad": Curves.easeInOutQuad,
+      // "easeInOutCubic": Curves.easeInOutCubic,
+      // "easeInOutQuart": Curves.easeInOutQuart,
+      // "easeInOutQuint": Curves.easeInOutQuint,
+      // "easeInOutExpo": Curves.easeInOutExpo,
+      // "easeInOutCirc": Curves.easeInOutCirc,
+      // "easeInOutBack": Curves.easeInOutBack,
+      // "fastOutSlowIn": Curves.fastOutSlowIn,
+      // "slowMiddle": Curves.slowMiddle,
+      // "bounceIn": Curves.bounceIn,
+      // "bounceOut": Curves.bounceOut,
+      // "bounceInOut": Curves.bounceInOut,
+      // "elasticIn": Curves.elasticIn,
+      // "elasticInOut": Curves.elasticInOut,
+      // "elasticOut": Curves.elasticOut,
+    };
+    return Center(
+      child:
+      Wrap(
+        runSpacing: 20,
+        children: curvesMap.keys.map((e) => Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            CurveBox(curve: curvesMap[e]!,),
+            SizedBox(height: 3,),
+            Text(e,style: TextStyle(fontSize: 10),)
+          ],
+        )).toList(),
+      ),
+    );
+  }
+}
+
+class CurveBox extends StatefulWidget {
+  final Color color;
+  final Curve curve;
+
+  const CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear})
+      : super(key: key);
+
+  @override
+  _CurveBoxState createState() => _CurveBoxState();
+}
+
+class _CurveBoxState extends State<CurveBox>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _angleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 3),
+      vsync: this,
+    );
+    _angleAnimation = CurveTween(curve: widget.curve).animate(_controller);
+    _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size(100, 100),
+      painter: CurveBoxPainter(_controller, _angleAnimation), // 背景
+    );
+  }
+}
+
+class CurveBoxPainter extends CustomPainter {
+  final Animation<double> repaint; //
+  Animation<double> angleAnimation;
+
+  Paint _paint = Paint();
+
+  CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {}
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawRing(canvas, size);
+    _drawRedCircle(canvas, size);
+    _drawGreenCircle(canvas, size);
+  }
+
+  //绘制环
+  void _drawRing(Canvas canvas, Size size) {
+    final double strokeWidth = 5;
+    _paint
+      ..color = Colors.blue
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth;
+    canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint);
+  }
+
+  // 绘制红球
+  void _drawRedCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.rotate(angleAnimation.value * 2 * pi);
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  // 绘制绿球
+  void _drawGreenCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.translate(0,angleAnimation.value * (size.height-10));
+    _paint
+      ..color = Colors.green
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant CurveBoxPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}