books

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;
+}