24

assets/images/boy.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1648260431391" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="2335" width="128" height="128">
+    <defs>
+        <style type="text/css">@font-face { font-family: feedback-iconfont; src:
+            url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"),
+            url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"),
+            url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype");
+            }
+        </style>
+    </defs>
+    <path
+        d="M256.426084 356.440421l39.699149-9.882191 9.882191-66.789984a800.798269 800.798269 0 0 0 140.565654-14.141756c49.751722-12.778696 109.385636-32.713461 109.385635-32.713462s54.011288 35.439583 89.450871 39.699149 73.77567 12.778696 73.77567 12.778696l8.519131 58.270852 36.973026 9.882192L784.612177 235.63915l45.492157-52.477844s-29.816957-90.813931-103.592627-117.904766a263.581898 263.581898 0 0 0-143.462158-8.519131S460.885217-6.133774 360.018711 34.076522c-136.306088 54.011288-161.86348 167.486106-161.863479 167.486106l35.439583 26.920453z"
+        fill="#6C9DFF" p-id="2336"></path>
+    <path
+        d="M299.362502 285.390873l253.87009-43.958714 166.123045 43.958714s-2.896504 49.751722 2.896504 51.114783 83.828244 12.778696 85.191306 76.672174-68.153044 65.25654-68.153045 65.25654l-8.51913 95.073497S733.497394 630.415659 693.798245 660.232616a193.895411 193.895411 0 0 1-80.93174 35.439582H402.614364s-69.516105-11.245252-87.917427-48.218278a622.237293 622.237293 0 0 1-31.180018-76.672175l4.259566-90.813931s-79.568679-18.401322-73.775671-73.775671 78.035236-59.633914 78.035236-59.633913z"
+        fill="#FFECE3" p-id="2337"></path>
+    <path
+        d="M443.846956 695.331433h133.068819l29.816956 92.68814 81.954036 12.778696v46.855218s-60.656209 29.816957-175.664471 35.098818a284.368577 284.368577 0 0 1-194.917707-72.41261l105.466836-19.082852z"
+        fill="#FFECE3" p-id="2338"></path>
+    <path
+        d="M232.231754 837.771296c-42.595653 49.751722-51.114783 167.486106-51.114784 167.486106h655.973051s9.882191-103.592627-46.855218-158.966976a185.37628 185.37628 0 0 0-104.955688-43.277183 254.210855 254.210855 0 0 1-162.715393 55.374348 339.061395 339.061395 0 0 1-190.658141-52.137078 97.629236 97.629236 0 0 0-99.673827 31.520783z"
+        fill="#FF9FC2" p-id="2339"></path>
+    <path
+        d="M685.279115 525.289588m-46.855218 0a46.855218 46.855218 0 1 0 93.710436 0 46.855218 46.855218 0 1 0-93.710436 0Z"
+        fill="#EC7094" p-id="2340"></path>
+    <path
+        d="M338.720885 525.289588m-46.855218 0a46.855218 46.855218 0 1 0 93.710436 0 46.855218 46.855218 0 1 0-93.710436 0Z"
+        fill="#EC7094" p-id="2341"></path>
+    <path
+        d="M451.003025 356.440421a12.778696 12.778696 0 0 0 17.038262-19.764383A70.368018 70.368018 0 0 0 423.401043 323.72696a69.686488 69.686488 0 0 0-43.788331 13.289843 12.608313 12.608313 0 0 0-1.533444 17.038262 12.949078 12.949078 0 0 0 17.890174 1.874208 46.34407 46.34407 0 0 1 27.431601-7.326452 47.0256 47.0256 0 0 1 27.601982 7.8376zM572.996975 356.440421a46.34407 46.34407 0 0 1 27.601982-7.326452 47.0256 47.0256 0 0 1 27.601983 7.326452 12.778696 12.778696 0 0 0 17.038261-19.764383 79.398296 79.398296 0 0 0-87.747044 0 12.608313 12.608313 0 0 0-1.533444 17.038261 12.949078 12.949078 0 0 0 17.038262 2.726122z"
+        fill="#4C4497" p-id="2342"></path>
+    <path
+        d="M849.698334 924.325662a156.070471 156.070471 0 0 0-139.202593-136.306089l-77.524088-8.007982a27.4316 27.4316 0 0 1-24.023948-22.14974l-10.222956-42.254887h2.044591a148.914402 148.914402 0 0 0 148.914402-154.877793l-2.214974-52.818609a87.576662 87.576662 0 0 0 40.210296-157.94468l17.038261-112.793288 28.453896-28.113131a17.038261 17.038261 0 0 0 5.111478-11.415635c0-3.23727 2.214974-78.376001-80.079827-132.728053-65.597305-43.277183-147.892106-36.291496-170.38261-34.076523-25.216626-11.586018-137.328384-56.567027-255.573916-7.8376a272.612177 272.612177 0 0 0-154.366645 175.834854 17.038261 17.038261 0 0 0 5.111478 17.038261l37.82494 34.076523 12.608313 101.036888a87.406279 87.406279 0 0 0 41.743739 156.581619l-2.214973 52.818609A148.914402 148.914402 0 0 0 423.23066 715.606964h2.044591l-10.222956 43.447566a27.261218 27.261218 0 0 1-23.853566 21.638591l-77.524088 8.007983a156.070471 156.070471 0 0 0-139.202592 136.306088l-10.222957 78.716766a17.038261 17.038261 0 0 0 14.652905 18.571705h2.214973a17.038261 17.038261 0 0 0 17.038262-14.823287l10.222956-78.716766a122.164332 122.164332 0 0 1 108.874488-106.148367l19.423618-2.044591A346.047082 346.047082 0 0 0 512 865.543661c11.926783 0 23.853565 0 35.439583-1.533443a8.519131 8.519131 0 0 0 7.667217-9.200661 8.689513 8.689513 0 0 0-9.200661-7.667218c-11.07487 1.022296-22.490505 1.533443-34.076522 1.533444A341.617134 341.617134 0 0 1 366.663633 817.83653l28.113131-2.896504A60.996975 60.996975 0 0 0 448.276904 766.721747l11.926782-51.114783H563.114783l11.926783 51.114783a61.167357 61.167357 0 0 0 53.840905 48.559044l27.772365 2.896504a284.368577 284.368577 0 0 1-27.601983 11.586018 8.519131 8.519131 0 0 0 2.896505 17.038261 8.519131 8.519131 0 0 0 2.896504 0 287.605846 287.605846 0 0 0 52.307462-24.535096l19.423617 2.044591a122.164332 122.164332 0 0 1 108.874488 106.148367l10.222957 78.716766a17.038261 17.038261 0 0 0 17.038261 14.823287h2.214974a17.038261 17.038261 0 0 0 14.652904-19.082853z m-103.76301-450.32124l-2.555739-59.804296 15.6752 8.519131a8.519131 8.519131 0 0 0 8.178365-14.99367l-24.535095-13.460226-1.192679-26.75007a53.840905 53.840905 0 0 1 4.429948 106.489131z m-511.147831-52.988992a53.840905 53.840905 0 0 1 48.388661-53.500139l-1.192678 26.75007-25.557392 13.460226a8.519131 8.519131 0 1 0 8.178366 14.99367l15.6752-8.519131-2.555739 59.804296a54.011288 54.011288 0 0 1-43.617949-52.988992z m52.137079-140.565653l-2.214974 52.818609a87.576662 87.576662 0 0 0-17.038261 2.385357l-11.926783-95.92541a17.038261 17.038261 0 0 0-5.452244-10.563722l-34.076522-31.009635a240.921011 240.921011 0 0 1 131.364993-142.95101c105.807601-43.788331 209.911376 0 228.312698 7.667217l-4.259565 20.105148a8.519131 8.519131 0 0 0 6.985687 9.711809H580.153044a8.519131 8.519131 0 0 0 8.178365-7.496835l3.23727-20.27553c15.6752-2.044591 90.813931-9.711809 147.892106 27.942748a132.898436 132.898436 0 0 1 64.575009 96.777322l-27.090835 26.75007a17.038261 17.038261 0 0 0-4.941095 9.541426l-17.038261 108.874489a88.08781 88.08781 0 0 0-15.164053-1.874209l-2.214974-52.818609a17.038261 17.038261 0 0 0-18.230939-17.038261 265.967255 265.967255 0 0 1-82.465184-12.267548 210.763289 210.763289 0 0 1-70.027252-31.350401l14.993669-92.517757a8.519131 8.519131 0 1 0-17.038261-2.726122l-14.993669 92.68814h-2.214974a406.532909 406.532909 0 0 1-110.067167 32.883844 661.766059 661.766059 0 0 1-133.579966 12.608313 17.038261 17.038261 0 0 0-17.890174 18.060557z m54.352052 365.811464A113.985966 113.985966 0 0 1 308.392781 562.262615l11.074869-263.752281a745.253538 745.253538 0 0 0 124.379306-13.289844 504.843675 504.843675 0 0 0 110.578314-31.861548 278.916333 278.916333 0 0 0 73.264523 31.520783 336.846421 336.846421 0 0 0 77.012939 13.460226L715.607219 562.262615a115.008262 115.008262 0 0 1-114.837879 119.267827H423.23066a113.985966 113.985966 0 0 1-82.805949-35.269201z"
+        fill="#4C4497" p-id="2343"></path>
+    <path
+        d="M597.191305 838.623209l-11.245252 2.555739a8.519131 8.519131 0 0 0 1.703826 17.038261h1.703826l11.926783-2.726122a8.519131 8.519131 0 1 0-3.9188-17.038261zM571.633914 509.78477a8.519131 8.519131 0 0 0-8.519131 8.519131c0 21.979357-23.001652 39.869531-51.114783 39.869531s-51.114783-17.038261-51.114783-39.869531a8.519131 8.519131 0 1 0-17.038261 0c0 31.3504 30.498487 56.907792 68.153044 56.907792s68.153044-25.557392 68.153044-56.907792a8.519131 8.519131 0 0 0-8.51913-8.519131zM636.208923 434.134891a8.519131 8.519131 0 0 0 5.452244-14.993669 75.309114 75.309114 0 0 0-82.124419 0 8.519131 8.519131 0 0 0 10.904487 13.119461 50.092487 50.092487 0 0 1 30.157722-8.348748 51.114783 51.114783 0 0 1 30.328105 8.348748 8.519131 8.519131 0 0 0 5.281861 1.874208z"
+        fill="#4C4497" p-id="2344"></path>
+    <path
+        d="M431.579408 420.504283m-33.90614 0a33.906139 33.906139 0 1 0 67.812279 0 33.906139 33.906139 0 1 0-67.812279 0Z"
+        fill="#4C4497" p-id="2345"></path>
+</svg>

lib/main.dart

@@ -5,13 +5,14 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:window_manager/window_manager.dart';
 
+import 'navigation/app_navigation.dart';
 import 'v12/app.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
   setSize();
   GoRouter.optionURLReflectsImperativeAPIs = true;
-  runApp(UnitApp());
+  runApp(TolyBooksApp());
 }
 
 
@@ -19,7 +20,7 @@ void setSize() async{
   if(kIsWeb||Platform.isAndroid||Platform.isIOS) return;
     await windowManager.ensureInitialized();
     WindowOptions windowOptions = const WindowOptions(
-      size: Size(800, 540),
+      size: Size(1024, 1024*3/4),
       minimumSize: Size(600, 400),
       center: true,
       backgroundColor: Colors.transparent,

lib/navigation/app_navigation.dart

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:iroute/components/components.dart';
+import 'package:toly_menu/src/menu.dart';
+import 'package:toly_menu/src/model/menu_state.dart';
+import 'package:toly_menu/toly_menu.dart';
+
+import '../v12/app/navigation/transition/fade_page_transitions_builder.dart';
+import 'router/menus/menu_tree.dart';
+import 'views/top_logo.dart';
+import 'views/top_bar.dart';
+import 'package:iroute/navigation/router/routers/app.dart';
+
+class TolyBooksApp extends StatelessWidget {
+  final GoRouter _router = GoRouter(
+    initialLocation: '/dashboard/view',
+    routes: <RouteBase>[appRoute],
+    onException: (BuildContext ctx, GoRouterState state, GoRouter router) {
+      router.go('/404', extra: state.uri.toString());
+    },
+    // redirect: _authRedirect
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      routerConfig: _router,
+      debugShowCheckedModeBanner: false,
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        fontFamily: "宋体",
+        primarySwatch: Colors.blue,
+        pageTransitionsTheme: const PageTransitionsTheme(builders: {
+          TargetPlatform.android: ZoomPageTransitionsBuilder(),
+          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
+          TargetPlatform.macOS: FadePageTransitionsBuilder(),
+          TargetPlatform.windows: FadePageTransitionsBuilder(),
+          TargetPlatform.linux: FadePageTransitionsBuilder(),
+        }),
+      ),
+    );
+  }
+}
+
+class BookAppNavigation extends StatefulWidget {
+  final Widget content;
+  const BookAppNavigation({super.key, required this.content});
+
+  @override
+  State<BookAppNavigation> createState() => _BookAppNavigationState();
+}
+
+class _BookAppNavigationState extends State<BookAppNavigation> {
+  MenuState state = MenuState(
+      expandMenus: ['/dashboard'],
+      activeMenu: '/dashboard/view',
+      items: rootMenu.children);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Row(
+        children: [
+          DragToMoveWrap(
+            child: Container(
+              color: const Color(0xff001529),
+              width: 210,
+              child: Column(
+                children: [
+                  TopLogo(),
+                  Expanded(child: TolyMenu(state: state, onSelect: _onSelect)),
+                ],
+              ),
+            ),
+          ),
+          Expanded(
+            child: Column(
+              children: [AppTopBar(), Expanded(child: widget.content)],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  void _onSelect(MenuNode menu) {
+    if (menu.isLeaf) {
+      state = state.copyWith(activeMenu: menu.path);
+      print(menu.path);
+      // print(;
+      context.go(menu.path);
+    } else {
+      List<String> menus = [];
+      String path = menu.path.substring(1);
+      List<String> parts = path.split('/');
+
+      if (parts.isNotEmpty) {
+        String path = '';
+        for (String part in parts) {
+          path += '/$part';
+          menus.add(path);
+        }
+      }
+
+      if (state.expandMenus.contains(menu.path)) {
+        menus.remove(menu.path);
+      }
+
+      state = state.copyWith(expandMenus: menus);
+    }
+    setState(() {});
+  }
+}

lib/navigation/router/menus/anima.dart

@@ -0,0 +1,78 @@
+Map<String,dynamic> animaMenus = {
+  'path' : '/anima',
+  'label' :  '动画-流光幻影',
+  'children': [
+    {
+      'path' : '/chapter1',
+      'label' :  '1.欢迎来到 Flutter 动画世界',
+    },
+    {
+      'path' : '/chapter2',
+      'label' :  '2.基于文字的组件动画初体验',
+    },
+    {
+      'path' : '/chapter3',
+      'label' :  '3.全面认识 AnimationController 的使用',
+    },
+    {
+      'path' : '/chapter4',
+      'label' :  '4.认知和自定义 Curve 动画曲线',
+    },
+    {
+      'path' : '/chapter5',
+      'label' :  '5.认识和自定义 Tween 补间动画',
+    },
+    {
+      'path' : '/chapter6',
+      'label' :  '6.通过三个案例巩固练习动画使用',
+    },
+    {
+      'path' : '/chapter7',
+      'label' :  '7.通过 loading 绘制练习动画使用',
+    },
+    {
+      'path' : '/chapter8',
+      'label' :  '8.Flutter 内置动画组件-显式动画',
+    },
+    {
+      'path' : '/chapter9',
+      'label' :  '9.显式动画 AnimatedWidget 源码解读',
+    },
+    {
+      'path' : '/chapter10',
+      'label' :  '10.Flutter 内置动画组件-隐式动画',
+    },
+    {
+      'path' : '/chapter11',
+      'label' :  '11.隐式动画 ImplicitlyAnimatedWidget 源码解读',
+    },
+    {
+      'path' : '/chapter12',
+      'label' :  '12.Flutter 内置动画组件 - 其他动画',
+    },
+    {
+      'path' : '/chapter13',
+      'label' :  '13.Flutter 框架层动画相关类源码分析',
+    },
+    {
+      'path' : '/chapter14',
+      'label' :  '14.Flutter 框架层动画相关类关系梳理',
+    },
+    {
+      'path' : '/chapter15',
+      'label' :  '15.AnimationController 源码解读',
+    },
+    {
+      'path' : '/chapter16',
+      'label' :  '16.Ticker 与 TickerProvider 源码解读',
+    },
+    {
+      'path' : '/chapter17',
+      'label' :  '17.小试牛刀 - 秒表功能和界面分析',
+    },
+    {
+      'path' : '/chapter18',
+      'label' :  '18.使用 Ticker 驱动钟表运动',
+    },
+  ]
+};

lib/navigation/router/menus/draw.dart

@@ -0,0 +1,90 @@
+Map<String, dynamic> drawMenus = {
+  'path': '/draw',
+  'label': '绘制-妙笔生花',
+  'children': [
+    {
+      'path': '/chapter1',
+      'label': '1.纯粹的世界',
+    },
+    {
+      'path': '/chapter2',
+      'label': '2.认识画笔的属性',
+    },
+    {
+      'path': '/chapter3',
+      'label': '3.画布绘制基础操作',
+    },
+    {
+      'path': '/chapter4',
+      'label': '4.画布绘制图片文字',
+    },
+    {
+      'path': '/chapter5',
+      'label': '5.路径的图形添加',
+    },
+    {
+      'path': '/chapter6',
+      'label': '6.路径的操作方法',
+    },
+    {
+      'path': '/chapter7',
+      'label': '7.熟悉而陌生的颜色',
+    },
+    {
+      'path': '/chapter8',
+      'label': '8.着色器和过滤器',
+    },
+    {
+      'path': '/chapter9',
+      'label': '9.世界之基-CustomPainter',
+    },
+    {
+      'path': '/chapter10',
+      'label': '10.绘制中使用动画',
+    },
+    {
+      'path': '/chapter11',
+      'label': '11.动画器曲线和方法',
+    },
+    {
+      'path': '/chapter12',
+      'label': '12.手势在绘制中的使用',
+    },
+    {
+      'path': '/chapter13',
+      'label': '13.Path 与曲线拟合',
+    },
+    {
+      'path': '/chapter14',
+      'label': '14.认知贝塞尔曲线',
+    },
+    {
+      'path': '/chapter15',
+      'label': '15.使用贝塞尔曲线',
+    },
+    {
+      'path': '/chapter16',
+      'label': '16.简单统计图表绘制',
+    },
+    {
+      'path': '/chapter17',
+      'label': '17.复杂图表绘制',
+    },
+    {
+      'path': '/chapter18',
+      'label': '18.粒子物理运动',
+    },
+    {
+      'path': '/chapter19',
+      'label': '19.粒子背景效果',
+    },
+    {
+      'path': '/chapter20',
+      'label': '20.粒子时钟',
+    },
+    {
+      'path': '/chapter21',
+      'label': '21.[番外]数学中的角度知识',
+    }
+  ]
+};

lib/navigation/router/menus/dream.dart

@@ -0,0 +1,90 @@
+Map<String,dynamic> dreamMenus = {
+  'path' : '/dream',
+  'label' :  '基础-梦始之地',
+  'children': [
+    {
+      'path' : '/chapter1',
+      'label' :  '1.欢迎来到 Flutter 梦始之地',
+    },
+    {
+      'path' : '/chapter2',
+      'label' :  '2.白话引言: 语言、框架和应用',
+    },
+    {
+      'path' : '/chapter3',
+      'label' :  '3.白话引言: 状态、行为和逻辑',
+    },
+    {
+      'path' : '/chapter4',
+      'label' :  '4.学会说话 - 语句和量的定义',
+    },
+    {
+      'path' : '/chapter5',
+      'label' :  '5.封装基础 - 函数方法的定义',
+    },
+    {
+      'path' : '/chapter6',
+      'label' :  '6.万物基石 - 基本数据类型',
+    },
+    {
+      'path' : '/chapter7',
+      'label' :  '7.逻辑桥梁 - 流程控制语句',
+    },
+    {
+      'path' : '/chapter8',
+      'label' :  '8.逻辑血肉 - 运算符的使用',
+    },
+    {
+      'path' : '/chapter9',
+      'label' :  '9.面向对象 - 定义与使用类',
+    },
+    {
+      'path' : '/chapter10',
+      'label' :  '10.面向对象 - 类与类间关系',
+    },
+    {
+      'path' : '/chapter11',
+      'label' :  '11.面向对象 - 封装、继承和多态',
+    },
+    {
+      'path' : '/chapter12',
+      'label' :  '12.面向对象 - 抽象、接口和混入',
+    },
+    {
+      'path' : '/chapter13',
+      'label' :  '13.语法集锦 - 类型相关其他语法',
+    },
+    {
+      'path' : '/chapter14',
+      'label' :  '14.语法集锦 - 语言相关其他语法',
+    },
+    {
+      'path' : '/chapter15',
+      'label' :  '15.梦始之地 - 计数器项目分析',
+    },
+    {
+      'path' : '/chapter16',
+      'label' :  '16.梦始之地 - 组件的概念与使用',
+    },
+    {
+      'path' : '/chapter17',
+      'label' :  '17.小试牛刀 - 秒表功能和界面分析',
+    },
+    {
+      'path' : '/chapter18',
+      'label' :  '18.小试牛刀 - 界面交互与数据维护',
+    },
+    {
+      'path' : '/chapter19',
+      'label' :  '19.状态管理 - 主题色与国际化切换',
+    },
+    {
+      'path' : '/chapter20',
+      'label' :  '20.状态管理 - 局部构建和逻辑分离',
+    },
+    {
+      'path' : '/chapter21',
+      'label' :  '21.结语 - 离开新手村，继续冒险吧，朋友！',
+    },
+  ]
+};

lib/navigation/router/menus/layout.dart

@@ -0,0 +1,70 @@
+Map<String,dynamic> layoutMenus = {
+  'path' : '/layout',
+  'label' :  '布局-薪火相传',
+  'children': [
+    {
+      'path' : '/chapter1',
+      'label' :  '1.欢迎进入 Flutter 布局探索',
+    },
+    {
+      'path' : '/chapter2',
+      'label' :  '2.从打破紧约束开始说起',
+    },
+    {
+      'path' : '/chapter3',
+      'label' :  '3.认识常用组件下施加的约束',
+    },
+    {
+      'path' : '/chapter4',
+      'label' :  '4.探索 Flex 对布局结构的划分',
+    },
+    {
+      'path' : '/chapter5',
+      'label' :  '5.Flex、Wrap、Stack 组件属性梳理',
+    },
+    {
+      'path' : '/chapter6',
+      'label' :  '6.常见单子布局组件作用分析',
+    },
+    {
+      'path' : '/chapter7',
+      'label' :  '7.常见布局实践演练',
+    },
+    {
+      'path' : '/chapter8',
+      'label' :  '8.探索约束传递与尺寸确定',
+    },
+    {
+      'path' : '/chapter9',
+      'label' :  '9.探索单子布局组件源码实现(上)',
+    },
+    {
+      'path' : '/chapter10',
+      'label' :  '10.探索单子布局组件源码实现(下)',
+    },
+    {
+      'path' : '/chapter11',
+      'label' :  '11.探索 Flex、Wrap、Stack 源码实现',
+    },
+    {
+      'path' : '/chapter12',
+      'label' :  '12.使用单子与多子自定义布局',
+    },
+    {
+      'path' : '/chapter13',
+      'label' :  '13.使用 Flow 组件自定义布局',
+    },
+    {
+      'path' : '/chapter14',
+      'label' :  '14.浮层 Overlay 的使用与定位',
+    },
+    {
+      'path' : '/chapter15',
+      'label' :  '15.IntrinsicHeight 作用与源码实现',
+    },
+    {
+      'path' : '/chapter16',
+      'label' :  '16.立于布局体系之上的风采',
+    },
+  ]
+};

lib/navigation/router/menus/menu_tree.dart

@@ -0,0 +1,74 @@
+import 'package:toly_menu/toly_menu.dart';
+
+import 'anima.dart';
+import 'draw.dart';
+import 'dream.dart';
+import 'layout.dart';
+import 'render.dart';
+import 'scroll.dart';
+import 'touch.dart';
+
+Map<String, dynamic> root = {
+  'path': '',
+  'label': '',
+  'children': [
+    dashboard,
+    drawMenus,
+    layoutMenus,
+    dreamMenus,
+    animaMenus,
+    touchMenus,
+    scrollMenus,
+    renderMenus,
+  ]
+};
+
+Map<String, dynamic> dashboard = {
+  'path': '/dashboard',
+  'label': '面板总览',
+  'children': [
+    {
+      'path': '/view',
+      'label': '小册全集',
+    },
+    {
+      'path': '/chat',
+      'label': '读者交流',
+      'children': [
+        {
+          'path': '/a',
+          'label': '第一交流区',
+        },
+        {
+          'path': '/b',
+          'label': '第二交流区',
+        },
+        {
+          'path': '/c',
+          'label': '第三交流区',
+        },
+      ]
+    },
+  ],
+};
+
+MenuNode get rootMenu => parser(root, -1, '');
+
+MenuNode parser(Map<String, dynamic> data, int deep, String prefix) {
+  String path = data['path'];
+  String label = data['label'];
+  List<Map<String, dynamic>>? childrenMap = data['children'];
+  List<MenuNode> children = [];
+  if (childrenMap != null && childrenMap.isNotEmpty) {
+    for (int i = 0; i < childrenMap.length; i++) {
+      MenuNode cNode = parser(childrenMap[i], deep + 1, prefix + path);
+      children.add(cNode);
+    }
+  }
+  return MenuNode(
+    path: prefix + path,
+    label: label,
+    deep: deep,
+    children: children,
+  );
+}

lib/navigation/router/menus/render.dart

@@ -0,0 +1,74 @@
+Map<String,dynamic> renderMenus = {
+  'path' : '/render',
+  'label' :  '渲染-聚沙成塔',
+  'children': [
+    {
+      'path' : '/chapter1',
+      'label' :  '1.欢迎进入 Flutter 渲染机制',
+    },
+    {
+      'path' : '/chapter2',
+      'label' :  '2.从 runApp 方法到三树首脑会晤',
+    },
+    {
+      'path' : '/chapter3',
+      'label' :  '3.初识元素节点的挂载和三树成型',
+    },
+    {
+      'path' : '/chapter4',
+      'label' :  '4.探索单子渲染对象、元素的数据结构',
+    },
+    {
+      'path' : '/chapter5',
+      'label' :  '5.探索多子渲染对象、元素的数据结构',
+    },
+    {
+      'path' : '/chapter6',
+      'label' :  '6.探索组合型组件、元素存在的意义',
+    },
+    {
+      'path' : '/chapter7',
+      'label' :  '7.探索状态类 State 源码实现与价值',
+    },
+    {
+      'path' : '/chapter8',
+      'label' :  '8.探索节点更新时的变与不变',
+    },
+    {
+      'path' : '/chapter9',
+      'label' :  '9.探索多子元素更新和 Key 的作用',
+    },
+    {
+      'path' : '/chapter10',
+      'label' :  '10.探索代理组件、元素的实现与价值',
+    },
+    {
+      'path' : '/chapter11',
+      'label' :  '11.组件、元素、渲染对象关系梳理',
+    },
+    {
+      'path' : '/chapter12',
+      'label' :  '12.探索 WidgetsBinding 的初始化',
+    },
+    {
+      'path' : '/chapter13',
+      'label' :  '13.探索 BuildOwner 构建管理器',
+    },
+    {
+      'path' : '/chapter14',
+      'label' :  '14.探索 PipelineOwner 渲染管线',
+    },
+    {
+      'path' : '/chapter15',
+      'label' :  '15.探索 RenderObject 的绘制与布局',
+    },
+    {
+      'path' : '/chapter16',
+      'label' :  '16.探索 Layer 树与 Scene 的构建',
+    },
+    {
+      'path' : '/chapter17',
+      'label' :  '17.终结篇: 立于渲染机制之上的风采',
+    },
+  ]
+};

lib/navigation/router/menus/scroll.dart

@@ -0,0 +1,78 @@
+Map<String,dynamic> scrollMenus = {
+  'path' : '/scroll',
+  'label' :  '滑动-珠联璧合',
+  'children': [
+    {
+      'path' : '/chapter1',
+      'label' :  '1.认知视口滑动的构成',
+    },
+    {
+      'path' : '/chapter2',
+      'label' :  '2.从 ListView 的源码开始谈起',
+    },
+    {
+      'path' : '/chapter3',
+      'label' :  '3.探索 BoxScrollView 与 ScrollView 组件',
+    },
+    {
+      'path' : '/chapter4',
+      'label' :  '4.探索 ScrollView 一族其他滑动组件',
+    },
+    {
+      'path' : '/chapter5',
+      'label' :  '5.Scrollable 与 Viewport 的珠联璧合',
+    },
+    {
+      'path' : '/chapter6',
+      'label' :  '6.探索 Scrollable 组件成员属性',
+    },
+    {
+      'path' : '/chapter7',
+      'label' :  '7.探索 ViewPort 组件成员属性',
+    },
+    {
+      'path' : '/chapter8',
+      'label' :  '8.再探索 ScrollView 一族的实现',
+    },
+    {
+      'path' : '/chapter9',
+      'label' :  '9.探索 Sliver 组件吸顶效果',
+    },
+    {
+      'path' : '/chapter10',
+      'label' :  '10.探索 NestedScrollView 嵌套滑动',
+    },
+    {
+      'path' : '/chapter11',
+      'label' :  '11.探索 SliverConstraints 滑块约束',
+    },
+    {
+      'path' : '/chapter12',
+      'label' :  '12.探索滑动中加载和缓存的实现',
+    },
+    {
+      'path' : '/chapter13',
+      'label' :  '13.探索 Sliver 一族组件的必要性',
+    },
+    {
+      'path' : '/chapter14',
+      'label' :  '14.探索 PageView 源码实现',
+    },
+    {
+      'path' : '/chapter15',
+      'label' :  '15.探索 SingleChildScrollView 源码实现',
+    },
+    {
+      'path' : '/chapter16',
+      'label' :  '16.探索 Notification 通知机制',
+    },
+    {
+      'path' : '/chapter17',
+      'label' :  '17.探索 ScrollableState 滑动处理逻辑',
+    },
+    {
+      'path' : '/chapter18',
+      'label' :  '18.探索 ScrollableState 动画处理逻辑',
+    }
+  ]
+};

lib/navigation/router/menus/touch.dart

@@ -0,0 +1,70 @@
+Map<String,dynamic> touchMenus = {
+  'path' : '/touch',
+  'label' :  '手势-执掌天下',
+  'children': [
+    {
+      'path' : '/chapter1',
+      'label' :  '1.手势探索开篇前言',
+    },
+    {
+      'path' : '/chapter2',
+      'label' :  '2.认识 GestureDetector 各种默认手势',
+    },
+    {
+      'path' : '/chapter3',
+      'label' :  '3.从弹簧绘制实现竖直拖拽手势',
+    },
+    {
+      'path' : '/chapter4',
+      'label' :  '4.从图章绘制实践 tap 手势操作',
+    },
+    {
+      'path' : '/chapter5',
+      'label' :  '5.从白板绘制实践 pan 手势操作',
+    },
+    {
+      'path' : '/chapter6',
+      'label' :  '6.从矩阵变换实践 scale 手势操作',
+    },
+    {
+      'path' : '/chapter7',
+      'label' :  '7.探索 GestureDetector 组件源码',
+    },
+    {
+      'path' : '/chapter8',
+      'label' :  '8.探索 RawGestureDetector 组件源码',
+    },
+    {
+      'path' : '/chapter9',
+      'label' :  '9.知识储备: 认识 GestureRecognizer 相关类',
+    },
+    {
+      'path' : '/chapter10',
+      'label' :  '10.知识储备: 认识手势竞技相关类',
+    },
+    {
+      'path' : '/chapter11',
+      'label' :  '11.探索单击手势 TapGestureRecognizer 源码',
+    },
+    {
+      'path' : '/chapter12',
+      'label' :  '12.探索双击手势 DoubleTapGestureRecognizer 源码',
+    },
+    {
+      'path' : '/chapter13',
+      'label' :  '13.漫画手势: 来场竞技吧',
+    },
+    {
+      'path' : '/chapter14',
+      'label' :  '14.自定义实现 N 连击手势事件',
+    },
+    {
+      'path' : '/chapter15',
+      'label' :  '15.从 Listener 组件探索事件的源头',
+    },
+    {
+      'path' : '/chapter18',
+      'label' :  '18.使用 Ticker 驱动钟表运动',
+    },
+  ]
+};

lib/navigation/router/routers/app.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:iroute/v12/pages/empty/empty_panel.dart';
+
+import '../../../navigation/app_navigation.dart';
+import 'dashboard.dart';
+import 'draw.dart';
+
+
+final RouteBase appRoute = ShellRoute(
+  builder: (BuildContext context, GoRouterState state, Widget child) {
+    return BookAppNavigation(content: child);
+  },
+  routes: <RouteBase>[
+    dashboardRouters,
+    drawRouters,
+    // GoRoute(
+    //     path: 'counter',
+    //     builder: (BuildContext context, GoRouterState state) {
+    //       return const CounterPage();
+    //     }),
+    // sortRouters,
+    // GoRoute(
+    //   path: 'user',
+    //   builder: (BuildContext context, GoRouterState state) {
+    //     return const UserPage();
+    //   },
+    // ),
+    // GoRoute(
+    //   path: 'settings',
+    //   builder: (BuildContext context, GoRouterState state) {
+    //     return const SettingPage();
+    //   },
+    // ),
+    GoRoute(
+      path: '/404',
+      builder: (BuildContext context, GoRouterState state) {
+        String msg = '无法访问: ${state.extra}';
+        return EmptyPanel(msg: msg);
+      },
+    )
+  ],
+);

lib/navigation/router/routers/dashboard.dart

@@ -0,0 +1,32 @@
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:iroute/pages/dashboard/chat_room.dart';
+import 'package:iroute/pages/dashboard/view_books.dart';
+
+final RouteBase dashboardRouters = GoRoute(
+  path: '/dashboard',
+  redirect: (_,state) {
+    if (state.fullPath == '/dashboard') {
+      return '/dashboard/view';
+    }
+    return null;
+  },
+  routes: <RouteBase>[
+    GoRoute(
+      path: 'view',
+      builder: (BuildContext context, GoRouterState state) {
+        return const ViewBooks();
+      },
+    ),
+    GoRoute(
+      path: 'chat/:roomId',
+      builder: (BuildContext context, GoRouterState state) {
+        String? roomId = state.pathParameters['roomId'];
+        return  ChatRoom(
+          roomId: roomId,
+        );
+      },
+    ),
+  ],
+);

lib/navigation/router/routers/draw.dart

@@ -0,0 +1,47 @@
+
+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) {
+    if (state.fullPath == '/draw') {
+      return '/draw/chapter1';
+    }
+    return null;
+  },
+  routes: <RouteBase>[
+    GoRoute(
+      path: 'chapter1',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P01Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter2',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P02Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter3',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P03Page();
+      },
+    ),
+    GoRoute(
+      path: 'chapter4',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P04Page();
+      },
+    ),    GoRoute(
+      path: 'chapter5',
+      builder: (BuildContext context, GoRouterState state) {
+        return const P05Page();
+      },
+    ),
+  ],
+);

lib/navigation/views/top_bar.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+import '../../components/components.dart';
+
+class AppTopBar extends StatelessWidget {
+  const AppTopBar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+
+    return DragToMoveWrap(
+      child: const Row(
+        children: [
+          SizedBox(width: 20,),
+          // Text(
+          //   '404 界面丢失',
+          //   style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+          // ),
+          Spacer(),
+          WindowButtons()
+        ],
+      ),
+    );
+  }
+}

lib/navigation/views/top_logo.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class TopLogo extends StatelessWidget {
+  const TopLogo({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 12.0,vertical: 8),
+      child: Row(
+        children: [
+          FlutterLogo(),
+          const SizedBox(width: 8,),
+          Text(
+            'Flutter Books',
+            style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/pages/dashboard/chat_room.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class ChatRoom extends StatelessWidget {
+  final String? roomId;
+  const ChatRoom({super.key, required this.roomId});
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      child:  Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text('id: ${roomId}',style: TextStyle(fontSize: 32)),
+            const SizedBox(height: 16,),
+            Text('交流区正在建设中...',style: TextStyle(fontSize: 32),),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/dashboard/view_book/book_cell.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/src/gestures/events.dart';
+
+import '../view_books.dart';
+
+class BookCell extends StatefulWidget {
+  final BookInfo bookInfo;
+  const BookCell({super.key, required this.bookInfo});
+
+  @override
+  State<BookCell> createState() => _BookCellState();
+}
+
+class _BookCellState extends State<BookCell> {
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: _onEnter,
+      cursor: SystemMouseCursors.click,
+      child: Center(
+        child: Padding(
+          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                  child: Center(child: ClipRRect(
+                      child: Image.asset(widget.bookInfo.cover),
+                      borderRadius:BorderRadius.circular(8)
+                  ))),
+              const SizedBox(height: 8),
+
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                child: Text(
+                  '${widget.bookInfo.info}',
+                  style:
+                  TextStyle(fontSize: 12, color: Color(0xff515767)),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onEnter(PointerEnterEvent event) {
+
+  }
+}

lib/pages/dashboard/view_book/title_group.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class TitleGroup extends StatelessWidget {
+  final String title;
+  const TitleGroup({super.key, required this.title});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        const SizedBox(
+          height: 16,
+        ),
+        Row(
+          children: [
+            const SizedBox(
+              width: 16,
+            ),
+            CircleAvatar(
+              radius: 6,
+            ),
+            const SizedBox(
+              width: 16,
+            ),
+            Text(
+              title,
+              style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
+            ),
+          ],
+        ),
+        const SizedBox(
+          height: 16,
+        ),
+      ],
+    );
+  }
+}

lib/pages/dashboard/view_books.dart

@@ -0,0 +1,186 @@
+import 'package:flutter/material.dart';
+
+import 'view_book/book_cell.dart';
+import 'view_book/title_group.dart';
+
+class BookInfo {
+  final String name;
+  final String path;
+  final String url;
+  final String price;
+  final String info;
+  final String cover;
+
+  BookInfo({
+    required this.name,
+    required this.path,
+    required this.url,
+    required this.price,
+    required this.info,
+    required this.cover,
+  });
+}
+
+List<BookInfo> kBooks = [
+  BookInfo(
+    name: 'Flutter语言基础·梦始之地',
+    path: 'dream',
+    url: 'https://juejin.cn/book/6844733827617652750',
+    info: '从语法到思想，欢迎来到 Flutter 梦开始的地方',
+    cover: 'assets/images/dream.webp',
+    price: '3.5',
+  ),
+  BookInfo(
+    name: 'Flutter绘制指南·妙笔生花',
+    path: 'draw',
+    url: 'https://juejin.cn/book/6844733827265331214',
+    info: '带你见证 Flutter 的绘制之美，擦出创造的火花',
+    cover: 'assets/images/draw.webp',
+    price: '3.28',
+  ),
+  BookInfo(
+    name: 'Flutter布局探索·薪火相传',
+    path: 'layout',
+    url: 'https://juejin.cn/book/7075958265250578469',
+    info: '由浅入深，从源码探索 Flutter 布局原理',
+    cover: 'assets/images/layout.webp',
+    price: '3.5',
+  ),
+  BookInfo(
+    name: 'Flutter手势探索·执掌天下',
+    path: 'touch',
+    url: 'https://juejin.cn/book/6896378716427911181',
+    info: 'Flutter 手势探索，用你的手指，掌控着整个屏幕世界 ',
+    cover: 'assets/images/touch.webp',
+    price: '3.5',
+  ),
+  BookInfo(
+    name: 'Flutter滑动探索·珠联璧合',
+    path: 'scroll',
+    url: 'https://juejin.cn/book/6984685333312962573',
+    info: '从源码入手，带你深入探索 Flutter 滑动体系',
+    price: '3.5',
+    cover: 'assets/images/scroll.webp',
+  ),
+  BookInfo(
+    name: 'Flutter动画探索·流光幻影',
+    path: 'anima',
+    url: 'https://juejin.cn/book/6965102582473687071',
+    info: 'Flutter 动画探索，一起去见证 Flutter 动画的风采',
+    cover: 'assets/images/anima.webp',
+    price: '3.5',
+  ),
+
+  BookInfo(
+    name: 'Flutter渲染机制·聚沙成塔',
+    path: 'dream',
+    url: 'https://juejin.cn/book/7084139149673889805',
+    info: '全面探索框架源码，助你攀登九层之台，一览顶上风采',
+    price: '3.5',
+    cover: 'assets/images/render.webp',
+  ),
+];
+List<BookInfo> freeBooks = [
+  BookInfo(
+    name: 'Flutter 入门教程',
+    path: 'first',
+    url: 'https://juejin.cn/book/7212822723330834487',
+    info: '以有趣的案例为基础，带你入门 Flutter 技术',
+    cover: 'assets/images/first.webp',
+    price: '0',
+  ),
+];
+
+List<BookInfo> projectBooks = [
+  BookInfo(
+    name: 'Flutter 实战：正则匹配应用',
+    path: 'regex',
+    url: 'https://juejin.cn/book/7161060514377203751',
+    info: '从思想分析到实践， Flutter 全平台玩转正则表达式',
+    cover: 'assets/images/regex.webp',
+    price: '0',
+  ),
+];
+
+
+class ViewBooks extends StatelessWidget {
+  const ViewBooks({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    SliverGridDelegate gridDelegate =
+        const SliverGridDelegateWithMaxCrossAxisExtent(
+      maxCrossAxisExtent: 240,
+      mainAxisSpacing: 10,
+      mainAxisExtent: 280,
+      crossAxisSpacing: 10,
+    );
+    return CustomScrollView(
+      slivers: [
+
+        SliverToBoxAdapter(
+          child: TitleGroup(title: 'Flutter 七剑合璧',),
+        ),
+
+        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(
+    //   maxCrossAxisExtent: 240,
+    //   mainAxisSpacing: 10,
+    //   mainAxisExtent: 260,
+    //   crossAxisSpacing: 10,
+    // );
+    // return GridView.builder(
+    //   padding: EdgeInsets.all(10),
+    //   gridDelegate: gridDelegate,
+    //   itemBuilder: (_, i) {
+    //     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,
+    // );
+  }
+}

lib/v12/pages/empty/empty_panel.dart

@@ -8,21 +8,23 @@ class EmptyPanel extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return  Center(
-      child: Wrap(
-        spacing: 16,
-        crossAxisAlignment: WrapCrossAlignment.center,
-        direction: Axis.vertical,
-        children: [
-          Icon(Icons.nearby_error,size: 64, color: Colors.redAccent),
-          Text(
-            msg,
-            style: TextStyle(fontSize: 24, color: Colors.grey),
-          ),
-          ElevatedButton(onPressed: (){
-            context.go('/');
-          }, child: Text('返回首页'))
-        ],
+    return  Material(
+      child: Center(
+        child: Wrap(
+          spacing: 16,
+          crossAxisAlignment: WrapCrossAlignment.center,
+          direction: Axis.vertical,
+          children: [
+            Icon(Icons.nearby_error,size: 64, color: Colors.redAccent),
+            Text(
+              msg,
+              style: TextStyle(fontSize: 24, color: Colors.grey),
+            ),
+            ElevatedButton(onPressed: (){
+              context.go('/');
+            }, child: Text('返回首页'))
+          ],
+        ),
       ),
     );
   }

packages/idraw/lib/components/coordinate.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+@immutable
+class Coordinate {
+  final double step;
+  final double strokeWidth;
+  final Color axisColor;
+  final Color gridColor;
+
+  Coordinate(
+      {this.step = 20,
+        this.strokeWidth = .5,
+        this.axisColor = Colors.blue,
+        this.gridColor = Colors.grey});
+
+  final Paint _gridPaint = Paint();
+
+  void paint(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawGrid(canvas, size);
+    _drawAxis(canvas, size);
+    canvas.restore();
+  }
+
+  void _drawGrid(Canvas canvas, Size size) {
+    _gridPaint
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = .5
+      ..color = Colors.grey;
+    _drawBottomRight(canvas, size);
+    canvas.save();
+    canvas.scale(1, -1); //沿x轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, 1); //沿y轴镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+
+    canvas.save();
+    canvas.scale(-1, -1); //沿原点镜像
+    _drawBottomRight(canvas, size);
+    canvas.restore();
+  }
+
+  void _drawAxis(Canvas canvas, Size size) {
+    _gridPaint
+      ..color = Colors.blue
+      ..strokeWidth = 1.5;
+    canvas.drawLine(
+        Offset(-size.width / 2, 0), Offset(size.width / 2, 0), _gridPaint);
+    canvas.drawLine(
+        Offset(0, -size.height / 2), Offset(0, size.height / 2), _gridPaint);
+    canvas.drawLine(Offset(0, size.height / 2),
+        Offset(0 - 7.0, size.height / 2 - 10), _gridPaint);
+    canvas.drawLine(Offset(0, size.height / 2),
+        Offset(0 + 7.0, size.height / 2 - 10), _gridPaint);
+    canvas.drawLine(
+        Offset(size.width / 2, 0), Offset(size.width / 2 - 10, 7), _gridPaint);
+    canvas.drawLine(
+        Offset(size.width / 2, 0), Offset(size.width / 2 - 10, -7), _gridPaint);
+  }
+
+  void _drawBottomRight(Canvas canvas, Size size) {
+    canvas.save();
+    for (int i = 0; i < size.height / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), _gridPaint);
+      canvas.translate(0, step);
+    }
+    canvas.restore();
+
+    canvas.save();
+    for (int i = 0; i < size.width / 2 / step; i++) {
+      canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), _gridPaint);
+      canvas.translate(step , 0);
+    }
+    canvas.restore();
+  }
+}

packages/idraw/lib/components/coordinate_pro.dart

@@ -0,0 +1,164 @@
+import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+@immutable
+class Coordinate {
+  final double step;
+  final double strokeWidth;
+  final Color axisColor;
+  final Color gridColor;
+  final TextPainter _textPainter = TextPainter(textDirection: TextDirection.ltr);
+
+  Coordinate(
+      {this.step = 20,
+      this.strokeWidth = .5,
+      this.axisColor = Colors.blue,
+      this.gridColor = Colors.grey});
+
+  final Paint _gridPaint = Paint();
+  final Path _gridPath = Path();
+
+  void paint(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawGridLine(canvas, size);
+    _drawAxis(canvas, size);
+    _drawText(canvas, size);
+    canvas.restore();
+  }
+
+
+
+  void _drawAxis(Canvas canvas, Size size) {
+    _gridPaint
+      ..color = Colors.blue
+      ..strokeWidth = 1.5;
+    canvas.drawLine(
+        Offset(-size.width / 2, 0), Offset(size.width / 2, 0), _gridPaint);
+    canvas.drawLine(
+        Offset(0, -size.height / 2), Offset(0, size.height / 2), _gridPaint);
+    canvas.drawLine(Offset(0, size.height / 2),
+        Offset(0 - 7.0, size.height / 2 - 10), _gridPaint);
+    canvas.drawLine(Offset(0, size.height / 2),
+        Offset(0 + 7.0, size.height / 2 - 10), _gridPaint);
+    canvas.drawLine(
+        Offset(size.width / 2, 0), Offset(size.width / 2 - 10, 7), _gridPaint);
+    canvas.drawLine(
+        Offset(size.width / 2, 0), Offset(size.width / 2 - 10, -7), _gridPaint);
+  }
+
+  void _drawGridLine(Canvas canvas, Size size) {
+    _gridPaint
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = .5
+      ..color = Colors.grey;
+
+    for (int i = 0; i < size.width / 2 / step; i++) {
+      _gridPath.moveTo(step * i, -size.height / 2 );
+      _gridPath.relativeLineTo(0, size.height);
+
+      _gridPath.moveTo(-step * i, -size.height / 2 );
+      _gridPath.relativeLineTo(0, size.height);
+    }
+
+    for (int i = 0; i < size.height / 2 / step; i++) {
+      _gridPath.moveTo(-size.width / 2,step * i );
+      _gridPath.relativeLineTo(size.width,0 );
+
+      _gridPath.moveTo(-size.width / 2,-step * i,  );
+      _gridPath.relativeLineTo(size.width,0 );
+    }
+
+    canvas.drawPath(_gridPath, _gridPaint);
+  }
+
+  void _drawAxisText(Canvas canvas, String str,
+      {Color color = Colors.black, bool? x = false}) {
+    TextSpan text = TextSpan(
+        text: str,
+        style: TextStyle(
+          fontSize: 11,
+          color: color,
+        ));
+
+    _textPainter.text = text;
+    _textPainter.layout(); // 进行布局
+    Size size = _textPainter.size;
+    Offset offset = Offset.zero;
+    if (x == null) {
+      offset = Offset(-size.width*1.5, size.width*0.7);
+    } else if (x) {
+      offset = Offset(-size.width / 2, size.height / 2);
+    } else {
+      offset = Offset(size.height / 2, -size.height / 2 + 2);
+    }
+    _textPainter.paint(canvas, offset);
+  }
+
+  void _drawText(Canvas canvas, Size size) {
+    // y > 0 轴 文字
+    canvas.save();
+    for (int i = 0; i < size.height / 2 / step; i++) {
+      if (step < 30 && i.isOdd || i == 0) {
+        canvas.translate(0, step);
+        continue;
+      } else {
+        var str = (i * step).toInt().toString();
+        _drawAxisText(canvas, str, color: Colors.green);
+      }
+      canvas.translate(0, step);
+    }
+    canvas.restore();
+
+    // x > 0 轴 文字
+    canvas.save();
+    for (int i = 0; i < size.width / 2 / step; i++) {
+      if (i == 0) {
+        _drawAxisText(canvas, "O", color: Colors.black, x: null);
+        canvas.translate(step, 0);
+        continue;
+      }
+      if (step < 30 && i.isOdd) {
+        canvas.translate(step, 0);
+        continue;
+      } else {
+        var str = (i * step).toInt().toString();
+        _drawAxisText(canvas, str, color: Colors.green, x: true);
+      }
+      canvas.translate(step, 0);
+    }
+    canvas.restore();
+
+    // y < 0 轴 文字
+    canvas.save();
+    for (int i = 0; i < size.height / 2 / step; i++) {
+      if (step < 30 && i.isOdd || i == 0) {
+        canvas.translate(0, -step);
+        continue;
+      } else {
+        var str = (-i * step).toInt().toString();
+        _drawAxisText(canvas, str, color: Colors.green);
+      }
+
+      canvas.translate(0, -step);
+    }
+    canvas.restore();
+
+    // x < 0 轴 文字
+    canvas.save();
+    for (int i = 0; i < size.width / 2 / step; i++) {
+      if (step < 30 && i.isOdd || i == 0) {
+        canvas.translate(-step, 0);
+        continue;
+      } else {
+        var str = (-i * step).toInt().toString();
+        _drawAxisText(canvas, str, color: Colors.green, x: true);
+      }
+      canvas.translate(-step, 0);
+    }
+    canvas.restore();
+  }
+}

packages/idraw/lib/components/demo_shower.dart

@@ -0,0 +1,119 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class DemoShower extends StatefulWidget {
+  final List<Widget> demos;
+   const DemoShower({super.key, required this.demos});
+
+  @override
+  State<DemoShower> createState() => _DemoShowerState();
+}
+
+class _DemoShowerState extends State<DemoShower> {
+  PageController _ctrl = PageController();
+  int _index = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: Alignment.bottomCenter,
+      children: [
+        PageView(
+          controller: _ctrl,
+          children: widget.demos,
+        ),
+
+        Positioned(
+            bottom: 20,
+            child:  Wrap(
+              crossAxisAlignment: WrapCrossAlignment.center,
+              children: [
+                TolyIconButton(
+                  onTap: (){
+                    _index= (_index-1)%widget.demos.length;
+                    setState(() {
+
+                    });
+                    _ctrl.animateToPage(_index,curve: Curves.easeIn,duration: Duration(milliseconds: 200));
+                  },
+                  iconData: Icons.navigate_before,
+                  size: 36,
+                ),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 12),
+                  child: Text('第 ${_index+1}/${widget.demos.length} 页',style: TextStyle(fontSize: 16,color: Colors.grey),),
+                ),
+
+                TolyIconButton(
+                  onTap: (){
+                    _index= (_index+1)%widget.demos.length;
+                    setState(() {
+
+                    });
+                    _ctrl.animateToPage(_index,curve: Curves.easeIn,duration: Duration(milliseconds: 200));
+                  },
+                  size: 36,
+                  iconData: Icons.navigate_next,
+                ),
+
+              ],
+            )),
+
+      ],
+    );
+  }
+}
+
+
+class TolyIconButton extends StatefulWidget {
+  final IconData iconData;
+  final VoidCallback onTap;
+  final double size;
+  const TolyIconButton({
+    super.key,
+    required this.iconData,
+    required this.size, required this.onTap,
+  });
+
+  @override
+  State<TolyIconButton> createState() => _TolyIconButtonState();
+}
+
+class _TolyIconButtonState extends State<TolyIconButton> {
+  bool _hover = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: widget.onTap,
+      child: MouseRegion(
+        onEnter: _onEnter,
+        onExit: _onExit,
+        cursor: SystemMouseCursors.click,
+        child: Container(
+          width: widget.size,
+          height: widget.size,
+          decoration: BoxDecoration(
+              color: _hover?Colors.grey.withOpacity(0.6):Colors.grey.withOpacity(0.5), shape: BoxShape.circle),
+          child:  Icon(
+            widget.iconData,
+            size: 26,
+            color: Colors.white,
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onEnter(PointerEnterEvent event) {
+    setState(() {
+      _hover = true;
+    });
+  }
+
+  void _onExit(PointerExitEvent event) {
+    setState(() {
+      _hover = false;
+    });
+  }
+}

packages/idraw/lib/p01/p01.dart

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

packages/idraw/lib/p01/p01_page.dart

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

packages/idraw/lib/p01/s01_page.dart

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

packages/idraw/lib/p01/s02_page.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint( // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    // 创建画笔
+    final Paint paint = Paint();
+    paint
+      ..color = Colors.blue //颜色
+      ..strokeWidth = 4 //线宽
+      ..style = PaintingStyle.stroke; //模式--线型
+
+    //绘制线
+    canvas.drawLine(Offset(0, 0), Offset(100, 100), paint);
+
+    Path path = Path();
+    path.moveTo(100, 100);
+    path.lineTo(200, 0);
+    canvas.drawPath(path, paint..color = Colors.red);
+  }
+
+  void drawLine(Canvas canvas) {}
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

packages/idraw/lib/p02/p02.dart

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

packages/idraw/lib/p02/p02_page.dart

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

packages/idraw/lib/p02/s01.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        // 使用CustomPaint
+        painter: PaperPainter(),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    // drawIsAntiAliasColor(canvas);
+    drawStyleStrokeWidth(canvas);
+  }
+
+  // 测试 isAntiAlias 和 color属性
+  void drawIsAntiAliasColor(Canvas canvas) {
+    Paint paint = Paint();
+    canvas.drawCircle(
+        Offset(180, 180),
+        170,
+        paint
+          ..color = Colors.blue
+          ..strokeWidth = 5);
+    canvas.drawCircle(
+        Offset(180 + 360.0, 180),
+        170,
+        paint
+          ..isAntiAlias = false
+          ..color = Colors.red);
+  }
+
+  // 测试 style 和 strokeWidth 属性
+  void drawStyleStrokeWidth(Canvas canvas) {
+    Paint paint = Paint()..color = Colors.red;
+    canvas.drawCircle(
+        Offset(180, 180),
+        150,
+        paint
+          ..style = PaintingStyle.stroke
+          ..strokeWidth = 50);
+    canvas.drawCircle(
+        Offset(180 + 360.0, 180),
+        150,
+        paint
+          ..strokeWidth = 50
+          ..style = PaintingStyle.fill);
+    //测试线
+    canvas.drawLine(
+        Offset(0, 180 - 150.0),
+        Offset(1600, 180 - 150.0),
+        paint
+          ..strokeWidth = 1
+          ..color = Colors.blueAccent);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

packages/idraw/lib/p02/s02.dart

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

packages/idraw/lib/p02/s03.dart

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

packages/idraw/lib/p02/s04.dart

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

packages/idraw/lib/p02/s05.dart

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

packages/idraw/lib/p02/s06.dart

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

packages/idraw/lib/p02/s07.dart

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

packages/idraw/lib/p02/s08.dart

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

packages/idraw/lib/p02/s09.dart

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

packages/idraw/lib/p02/s10.dart

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

packages/idraw/lib/p02/s11.dart

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

packages/idraw/lib/p02/s12.dart

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

packages/idraw/lib/p02/s13.dart

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

packages/idraw/lib/p03/p03.dart

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

packages/idraw/lib/p03/p03_page.dart

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

packages/idraw/lib/p03/s01.dart

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

packages/idraw/lib/p03/s02.dart

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

packages/idraw/lib/p03/s03.dart

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

packages/idraw/lib/p03/s04.dart

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

packages/idraw/lib/p03/s05.dart

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

packages/idraw/lib/p03/s06.dart

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

packages/idraw/lib/p03/s07.dart

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

packages/idraw/lib/p03/s08.dart

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

packages/idraw/lib/p03/s09.dart

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

packages/idraw/lib/p03/s10.dart

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

packages/idraw/lib/p03/s11.dart

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

packages/idraw/lib/p03/s12.dart

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

packages/idraw/lib/p03/s13.dart

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

packages/idraw/lib/p04/p04.dart

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

packages/idraw/lib/p04/p04_page.dart

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

packages/idraw/lib/p04/s01.dart

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

packages/idraw/lib/p04/s02.dart

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

packages/idraw/lib/p04/s03.dart

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

packages/idraw/lib/p04/s04.dart

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

packages/idraw/lib/p04/s05.dart

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

packages/idraw/lib/p04/s06.dart

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

packages/idraw/lib/p04/s07.dart

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

packages/idraw/lib/p05/p05.dart

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

packages/idraw/lib/p05/p05_page.dart

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

packages/idraw/lib/p05/s01.dart

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

packages/idraw/lib/p05/s02.dart

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

packages/idraw/lib/p05/s03.dart

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

packages/idraw/lib/p05/s04.dart

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

packages/idraw/lib/p05/s05.dart

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

packages/idraw/lib/p05/s06.dart

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

packages/idraw/lib/p05/s07.dart

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

packages/idraw/lib/p05/s08.dart

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

packages/idraw/lib/p05/s09.dart

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

packages/idraw/lib/p05/s10.dart

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