books

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