books

lib/components/toly_ui/decoration/title.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+
+class TolyTitle extends StatelessWidget {
+  final Widget child;
+  final Color? lineColor;
+  final Color? color;
+  const TolyTitle({
+    super.key,
+    required this.child,
+    this.lineColor,
+    this.color,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: TitleDecoration(
+        color,lineColor,
+      ),
+      child: child,
+    );
+  }
+}
+
+class TitleDecoration extends Decoration {
+  final Color? lineColor;
+  final Color? color;
+
+  const TitleDecoration( this.color,this.lineColor,);
+
+  @override
+  BoxPainter createBoxPainter([VoidCallback? onChanged]) =>
+      TitlePainter(color: color, lineColor: lineColor);
+}
+
+class TitlePainter extends BoxPainter {
+  final Color? color;
+  final Color? lineColor;
+
+  const TitlePainter({this.color, this.lineColor});
+
+  @override
+  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
+    canvas.save();
+    canvas.translate(offset.dx, offset.dy);
+    Size size = configuration.size ?? Size.zero;
+    final Paint paint = Paint()
+      // ..style = PaintingStyle.stroke
+      ..color = color??Colors.transparent
+      ..strokeWidth = 1;
+
+
+    final Rect zone = Rect.fromCenter(
+      center: Offset(size.width / 2, size.height / 2),
+      width: size.width,
+      height: size.height,
+    );
+
+    canvas.drawRect(zone, paint);
+    final Paint paint2 = Paint()
+      ..strokeWidth = 1
+      // ..style = PaintingStyle.stroke
+      //   ..color = const Color(0xffFFFAA7);
+      ..color = lineColor??Colors.transparent;
+
+    const double start = 4;
+    canvas.drawLine(const Offset(0, start), Offset(size.width, start), paint2);
+    double end = size.height - 4;
+    canvas.drawLine(Offset(0, end), Offset(size.width, end), paint2);
+
+    canvas.drawCircle(Offset(10,size.height/2), 4, paint2);
+
+    //
+    // canvas.translate(
+    //   offset.dx + (configuration.size?.width??0) / 2,
+    //   offset.dy + (configuration.size?.height??0) / 2,
+    // );
+    //
+    // final Rect zone = Rect.fromCenter(
+    //   center: Offset.zero,
+    //   width: configuration.size.width,
+    //   height: configuration.size.height,
+    // );
+    //
+    // path.addRRect(RRect.fromRectAndRadius(
+    //   zone,
+    //   Radius.circular(20),
+    // ));
+    //
+    // const DashPainter(span: 4, step: 9).paint(canvas, path, paint);
+    canvas.restore();
+  }
+}

lib/navigation/router/routers/draw.dart

@@ -1,13 +1,11 @@
-
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:idraw/idraw.dart';
 import 'package:iroute/pages/dashboard/chat_room.dart';
 
-
 final RouteBase drawRouters = GoRoute(
   path: '/draw',
-  redirect: (_,state) {
+  redirect: (_, state) {
     if (state.fullPath == '/draw') {
       return '/draw/chapter1';
     }
@@ -37,11 +35,48 @@ final RouteBase drawRouters = GoRoute(
       builder: (BuildContext context, GoRouterState state) {
         return const P04Page();
       },
-    ),    GoRoute(
+    ),
+    GoRoute(
       path: 'chapter5',
       builder: (BuildContext context, GoRouterState state) {
         return const P05Page();
       },
     ),
+    GoRoute(
+      path: 'chapter6',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P06Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter7',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P07Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter8',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P08Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter9',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P09Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter10',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P10Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter11',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P11Page();
+      },
+    ),
   ],
 );

lib/pages/dashboard/view_book/title_group.dart

@@ -1,37 +1,34 @@
 import 'package:flutter/material.dart';
 
+import '../../../components/toly_ui/decoration/title.dart';
+
 class TitleGroup extends StatelessWidget {
   final String title;
-  const TitleGroup({super.key, required this.title});
+  final Color? color;
+  final Color? lineColor;
+
+  const TitleGroup({super.key, required this.title, this.color=const Color(0xff333333), this.lineColor});
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Padding(
-      children: [
+      padding: EdgeInsets.symmetric(vertical: 16),
-        const SizedBox(
+      child: Center(
-          height: 16,
+        child: TolyTitle(
-        ),
+          color: color,
-        Row(
+          lineColor: lineColor,
-          children: [
+          child:
-            const SizedBox(
+          Container(
-              width: 16,
+            padding: EdgeInsets.symmetric(horizontal: 24,vertical: 10),
-            ),
+            child: Text(
-            CircleAvatar(
-              radius: 6,
-            ),
-            const SizedBox(
-              width: 16,
-            ),
-            Text(
               title,
-              style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+              style: TextStyle(fontSize: 14,
+                  color: Colors.white,
+                  fontWeight: FontWeight.bold
+              ),
             ),
-          ],
+          ),  ),
-        ),
+      ),
-        const SizedBox(
-          height: 16,
-        ),
-      ],
     );
   }
 }

lib/pages/dashboard/view_books.dart

@@ -70,7 +70,6 @@ List<BookInfo> kBooks = [
     cover: 'assets/images/anima.webp',
     price: '3.5',
   ),
-
   BookInfo(
     name: 'Flutter渲染机制·聚沙成塔',
     path: 'dream',
@@ -102,7 +101,6 @@ List<BookInfo> projectBooks = [
   ),
 ];
 
-
 class ViewBooks extends StatelessWidget {
   const ViewBooks({super.key});
 
@@ -117,70 +115,43 @@ class ViewBooks extends StatelessWidget {
     );
     return CustomScrollView(
       slivers: [
+        SliverToBoxAdapter(
+          child: TitleGroup(
+            title: 'Flutter 七剑合璧',
+            lineColor: const Color(0xff6EAFF9),
+          ),
+        ),
+        _buildSliverSliverGrid(kBooks,gridDelegate),
+        SliverToBoxAdapter(
+          child: TitleGroup(
+            title: 'Flutter 实战探索',
+            lineColor: const Color(0xffFD983A),
+          ),
+        ),
+        _buildSliverSliverGrid(projectBooks,gridDelegate),
+
 
         SliverToBoxAdapter(
-          child: TitleGroup(title: 'Flutter 七剑合璧',),
+          child: TitleGroup(
+            title: 'Flutter 免费小册',
+            lineColor: const Color(0xff7864E1),
+          ),
         ),
-
+        _buildSliverSliverGrid(freeBooks,gridDelegate),
-        SliverGrid(
-            delegate: SliverChildBuilderDelegate(
-                  (_, i) => BookCell(bookInfo:kBooks[i]),
-              childCount: kBooks.length,
-            ),
-            gridDelegate: gridDelegate),
-
-        SliverToBoxAdapter(
-          child: TitleGroup(title: 'Flutter 实战探索',),
-        ),
-
-
-        SliverGrid(
-            delegate: SliverChildBuilderDelegate(
-                  (_, i) => BookCell(bookInfo:projectBooks[i]),
-              childCount: projectBooks.length,
-            ),
-            gridDelegate: gridDelegate),
-
-        SliverToBoxAdapter(
-          child: TitleGroup(title: 'Flutter 免费小册',),
-        ),
-        SliverGrid(
-            delegate: SliverChildBuilderDelegate(
-                  (_, i) => BookCell(bookInfo:freeBooks[i]),
-              childCount: freeBooks.length,
-            ),
-            gridDelegate: gridDelegate),
       ],
     );
+  }
 
-    // SliverGridDelegate gridDelegate = const SliverGridDelegateWithMaxCrossAxisExtent(
+  Widget _buildSliverSliverGrid(
-    //   maxCrossAxisExtent: 240,
+      List<BookInfo> books, SliverGridDelegate gridDelegate) {
-    //   mainAxisSpacing: 10,
+    return SliverPadding(
-    //   mainAxisExtent: 260,
+      padding: const EdgeInsets.symmetric(horizontal: 10),
-    //   crossAxisSpacing: 10,
+      sliver: SliverGrid(
-    // );
+          delegate: SliverChildBuilderDelegate(
-    // return GridView.builder(
+            (_, i) => BookCell(bookInfo: books[i]),
-    //   padding: EdgeInsets.all(10),
+            childCount: books.length,
-    //   gridDelegate: gridDelegate,
+          ),
-    //   itemBuilder: (_, i) {
+          gridDelegate: gridDelegate),
-    //     BookInfo bookInfo = kBooks[i];
+    );
-    //     return Center(
-    //       child: Padding(
-    //         padding: EdgeInsets.symmetric(horizontal: 10,vertical: 6),
-    //         child: Column(
-    //           crossAxisAlignment: CrossAxisAlignment.start,
-    //           children: [
-    //             Expanded(child: Center(child: Image.asset(bookInfo.cover))),
-    //             const SizedBox(height: 6,),
-    //             Text('${bookInfo.name}',style: TextStyle(fontSize: 14,fontWeight: FontWeight.bold),),
-    //             const SizedBox(height: 6,),
-    //             Text('${bookInfo.info}',style: TextStyle(fontSize: 12,color: Color(0xff515767)),),
-    //           ],
-    //         ),
-    //       ),
-    //     );
-    //   },
-    //   itemCount: kBooks.length,
-    // );
   }
 }

packages/idraw/lib/components/demo_shower.dart

@@ -15,51 +15,53 @@ class _DemoShowerState extends State<DemoShower> {
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
+    return Material(
-      alignment: Alignment.bottomCenter,
+      child: Stack(
-      children: [
+        alignment: Alignment.bottomCenter,
-        PageView(
+        children: [
-          controller: _ctrl,
+          PageView(
-          children: widget.demos,
+            controller: _ctrl,
-        ),
+            children: widget.demos,
+          ),
 
-        Positioned(
+          Positioned(
-            bottom: 20,
+              bottom: 20,
-            child:  Wrap(
+              child:  Wrap(
-              crossAxisAlignment: WrapCrossAlignment.center,
+                crossAxisAlignment: WrapCrossAlignment.center,
-              children: [
+                children: [
-                TolyIconButton(
+                  TolyIconButton(
-                  onTap: (){
+                    onTap: (){
-                    _index= (_index-1)%widget.demos.length;
+                      _index= (_index-1)%widget.demos.length;
-                    setState(() {
+                      setState(() {
 
-                    });
+                      });
-                    _ctrl.animateToPage(_index,curve: Curves.easeIn,duration: Duration(milliseconds: 200));
+                      _ctrl.animateToPage(_index,curve: Curves.easeIn,duration: Duration(milliseconds: 200));
-                  },
+                    },
-                  iconData: Icons.navigate_before,
+                    iconData: Icons.navigate_before,
-                  size: 36,
+                    size: 36,
-                ),
+                  ),
-                Padding(
+                  Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 12),
+                    padding: const EdgeInsets.symmetric(horizontal: 12),
-                  child: Text('第 ${_index+1}/${widget.demos.length} 页',style: TextStyle(fontSize: 16,color: Colors.grey),),
+                    child: Text('第 ${_index+1}/${widget.demos.length} 页',style: TextStyle(fontSize: 16,color: Colors.grey),),
-                ),
+                  ),
 
-                TolyIconButton(
+                  TolyIconButton(
-                  onTap: (){
+                    onTap: (){
-                    _index= (_index+1)%widget.demos.length;
+                      _index= (_index+1)%widget.demos.length;
-                    setState(() {
+                      setState(() {
 
-                    });
+                      });
-                    _ctrl.animateToPage(_index,curve: Curves.easeIn,duration: Duration(milliseconds: 200));
+                      _ctrl.animateToPage(_index,curve: Curves.easeIn,duration: Duration(milliseconds: 200));
-                  },
+                    },
-                  size: 36,
+                    size: 36,
-                  iconData: Icons.navigate_next,
+                    iconData: Icons.navigate_next,
-                ),
+                  ),
 
-              ],
+                ],
-            )),
+              )),
 
-      ],
+        ],
+      ),
     );
   }
 }

packages/idraw/lib/p06/p06.dart

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

packages/idraw/lib/p06/p06_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;
+import 's06.dart' as s6;
+
+class P06Page extends StatelessWidget {
+  const P06Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+      ],
+    );
+  }
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/p07/p07.dart

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

packages/idraw/lib/p07/p07_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;
+import 's06.dart' as s6;
+
+class P07Page extends StatelessWidget {
+  const P07Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+      ],
+    );
+  }
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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);
+  }
+}

packages/idraw/lib/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);
+  }
+}

packages/idraw/lib/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);
+  }
+}

packages/idraw/lib/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});
+
+}

packages/idraw/lib/p08/p08.dart

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

packages/idraw/lib/p08/p08_page.dart

@@ -0,0 +1,34 @@
+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(
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+        s6.Paper(),
+        s7.Paper(),
+        s8.Paper(),
+        s9.Paper(),
+      ],
+    );
+  }
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/p09/p09.dart

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

packages/idraw/lib/p09/p09_page.dart

@@ -0,0 +1,21 @@
+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(
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+      ],
+    );
+  }
+}

packages/idraw/lib/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;
+  }
+}

packages/idraw/lib/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;
+}
+

packages/idraw/lib/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;
+}

packages/idraw/lib/p10/p10.dart

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

packages/idraw/lib/p10/p10_page.dart

@@ -0,0 +1,25 @@
+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(
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+        s5.Paper(),
+      ],
+    );
+  }
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+  }
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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),
+      );
+}

packages/idraw/lib/p11/p11.dart

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

packages/idraw/lib/p11/p11_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;
+import 's04.dart' as s4;
+
+class P11Page extends StatelessWidget {
+  const P11Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+      ],
+    );
+  }
+}

packages/idraw/lib/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;
+}

packages/idraw/lib/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;
+
+  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;
+}

packages/idraw/lib/p11/s03.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,
+    );
+
+    // _controller.forward();
+    // _controller.reverse(from: 40);
+    // _controller.repeat();
+    // _controller.repeat(reverse: true);
+    _controller.fling();
+  }
+
+  @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;
+  }
+}

packages/idraw/lib/p11/s04.dart

@@ -0,0 +1,105 @@
+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;
+  final ValueNotifier<Color> _color = ValueNotifier<Color>(Colors.blue);
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      lowerBound: 10,
+      upperBound: 40,
+      duration: const Duration(seconds: 1),
+      vsync: this,
+    );
+    _controller.addStatusListener(_statusListen);
+    _controller.forward();
+    // _controller.repeat(reverse: true);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100),
+        painter: PicManPainter(
+            color: _color,
+            angle: _controller,
+            repaint: Listenable.merge([_controller, _color])), // 背景
+      ),
+    );
+  }
+
+  void _statusListen(AnimationStatus status) {
+    switch (status) {
+      case AnimationStatus.dismissed:
+        _color.value = Colors.black;
+        break;
+      case AnimationStatus.forward:
+        _color.value = Colors.blue;
+        break;
+      case AnimationStatus.reverse:
+        _color.value = Colors.red;
+        break;
+      case AnimationStatus.completed:
+        _color.value = Colors.green;
+        break;
+    }
+  }
+}
+
+class PicManPainter extends CustomPainter {
+  final Animation<double> angle;
+  final Listenable repaint;
+  final ValueNotifier<Color> color;
+
+  PicManPainter({required this.color,required this.angle, required this.repaint})
+      : super(repaint: repaint);
+
+  Paint _paint = Paint();
+
+  @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);
+  }
+
+  //绘制眼睛
+  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;
+}