diff --git a/assets/images/anima.webp b/assets/images/anima.webp new file mode 100644 index 0000000..3efbad4 Binary files /dev/null and b/assets/images/anima.webp differ diff --git a/assets/images/bg.jpeg b/assets/images/bg.jpeg new file mode 100644 index 0000000..f4bf605 Binary files /dev/null and b/assets/images/bg.jpeg differ diff --git a/assets/images/boy.svg b/assets/images/boy.svg new file mode 100644 index 0000000..5cb95f9 --- /dev/null +++ b/assets/images/boy.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/draw.webp b/assets/images/draw.webp new file mode 100644 index 0000000..db266cf Binary files /dev/null and b/assets/images/draw.webp differ diff --git a/assets/images/dream.webp b/assets/images/dream.webp new file mode 100644 index 0000000..e976588 Binary files /dev/null and b/assets/images/dream.webp differ diff --git a/assets/images/dst.png b/assets/images/dst.png new file mode 100644 index 0000000..2b58bb3 Binary files /dev/null and b/assets/images/dst.png differ diff --git a/assets/images/first.webp b/assets/images/first.webp new file mode 100644 index 0000000..b335fe3 Binary files /dev/null and b/assets/images/first.webp differ diff --git a/assets/images/flutter.png b/assets/images/flutter.png new file mode 100644 index 0000000..b891cf3 Binary files /dev/null and b/assets/images/flutter.png differ diff --git a/assets/images/icon_head.png b/assets/images/icon_head.png new file mode 100644 index 0000000..e12afaa Binary files /dev/null and b/assets/images/icon_head.png differ diff --git a/assets/images/layout.webp b/assets/images/layout.webp new file mode 100644 index 0000000..392cd6f Binary files /dev/null and b/assets/images/layout.webp differ diff --git a/assets/images/rain.png b/assets/images/rain.png new file mode 100644 index 0000000..2236061 Binary files /dev/null and b/assets/images/rain.png differ diff --git a/assets/images/regex.webp b/assets/images/regex.webp new file mode 100644 index 0000000..8034173 Binary files /dev/null and b/assets/images/regex.webp differ diff --git a/assets/images/render.webp b/assets/images/render.webp new file mode 100644 index 0000000..dbb6ecc Binary files /dev/null and b/assets/images/render.webp differ diff --git a/assets/images/right_chat.png b/assets/images/right_chat.png new file mode 100644 index 0000000..299edbd Binary files /dev/null and b/assets/images/right_chat.png differ diff --git a/assets/images/scroll.webp b/assets/images/scroll.webp new file mode 100644 index 0000000..3430b79 Binary files /dev/null and b/assets/images/scroll.webp differ diff --git a/assets/images/shoot.png b/assets/images/shoot.png new file mode 100644 index 0000000..65f0237 Binary files /dev/null and b/assets/images/shoot.png differ diff --git a/assets/images/src.png b/assets/images/src.png new file mode 100644 index 0000000..5c557ac Binary files /dev/null and b/assets/images/src.png differ diff --git a/assets/images/sword.png b/assets/images/sword.png new file mode 100644 index 0000000..82bf71c Binary files /dev/null and b/assets/images/sword.png differ diff --git a/assets/images/t.svg b/assets/images/t.svg new file mode 100644 index 0000000..78c0ceb --- /dev/null +++ b/assets/images/t.svg @@ -0,0 +1,728 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/touch.webp b/assets/images/touch.webp new file mode 100644 index 0000000..9ecdcfc Binary files /dev/null and b/assets/images/touch.webp differ diff --git a/assets/images/wy_200x300.jpg b/assets/images/wy_200x300.jpg new file mode 100644 index 0000000..ce7c56b Binary files /dev/null and b/assets/images/wy_200x300.jpg differ diff --git a/assets/images/wy_300x200.jpg b/assets/images/wy_300x200.jpg new file mode 100644 index 0000000..82ad407 Binary files /dev/null and b/assets/images/wy_300x200.jpg differ diff --git a/lib/main.dart b/lib/main.dart index 6ae6bc5..76cfee1 100644 --- a/lib/main.dart +++ b/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, diff --git a/lib/navigation/app_navigation.dart b/lib/navigation/app_navigation.dart new file mode 100644 index 0000000..a28da76 --- /dev/null +++ b/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: [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 createState() => _BookAppNavigationState(); +} + +class _BookAppNavigationState extends State { + 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 menus = []; + String path = menu.path.substring(1); + List 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(() {}); + } +} diff --git a/lib/navigation/router/menus/anima.dart b/lib/navigation/router/menus/anima.dart new file mode 100644 index 0000000..ed1105b --- /dev/null +++ b/lib/navigation/router/menus/anima.dart @@ -0,0 +1,78 @@ +Map 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 驱动钟表运动', + }, + ] +}; diff --git a/lib/navigation/router/menus/draw.dart b/lib/navigation/router/menus/draw.dart new file mode 100644 index 0000000..72b0270 --- /dev/null +++ b/lib/navigation/router/menus/draw.dart @@ -0,0 +1,90 @@ +Map 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.[番外]数学中的角度知识', + } + ] +}; diff --git a/lib/navigation/router/menus/dream.dart b/lib/navigation/router/menus/dream.dart new file mode 100644 index 0000000..ec4e69b --- /dev/null +++ b/lib/navigation/router/menus/dream.dart @@ -0,0 +1,90 @@ +Map 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.结语 - 离开新手村，继续冒险吧，朋友！', + }, + ] +}; diff --git a/lib/navigation/router/menus/layout.dart b/lib/navigation/router/menus/layout.dart new file mode 100644 index 0000000..1806d7f --- /dev/null +++ b/lib/navigation/router/menus/layout.dart @@ -0,0 +1,70 @@ +Map 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.立于布局体系之上的风采', + }, + ] +}; diff --git a/lib/navigation/router/menus/menu_tree.dart b/lib/navigation/router/menus/menu_tree.dart new file mode 100644 index 0000000..9b6b7d0 --- /dev/null +++ b/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 root = { + 'path': '', + 'label': '', + 'children': [ + dashboard, + drawMenus, + layoutMenus, + dreamMenus, + animaMenus, + touchMenus, + scrollMenus, + renderMenus, + ] +}; + +Map 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 data, int deep, String prefix) { + String path = data['path']; + String label = data['label']; + List>? childrenMap = data['children']; + List 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, + ); +} diff --git a/lib/navigation/router/menus/render.dart b/lib/navigation/router/menus/render.dart new file mode 100644 index 0000000..900ac88 --- /dev/null +++ b/lib/navigation/router/menus/render.dart @@ -0,0 +1,74 @@ +Map 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.终结篇: 立于渲染机制之上的风采', + }, + ] +}; diff --git a/lib/navigation/router/menus/scroll.dart b/lib/navigation/router/menus/scroll.dart new file mode 100644 index 0000000..6cab03b --- /dev/null +++ b/lib/navigation/router/menus/scroll.dart @@ -0,0 +1,78 @@ +Map 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 动画处理逻辑', + } + ] +}; diff --git a/lib/navigation/router/menus/touch.dart b/lib/navigation/router/menus/touch.dart new file mode 100644 index 0000000..2920847 --- /dev/null +++ b/lib/navigation/router/menus/touch.dart @@ -0,0 +1,70 @@ +Map 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 驱动钟表运动', + }, + ] +}; diff --git a/lib/navigation/router/routers/app.dart b/lib/navigation/router/routers/app.dart new file mode 100644 index 0000000..3a56731 --- /dev/null +++ b/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: [ + 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); + }, + ) + ], +); diff --git a/lib/navigation/router/routers/dashboard.dart b/lib/navigation/router/routers/dashboard.dart new file mode 100644 index 0000000..84457a3 --- /dev/null +++ b/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: [ + 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, + ); + }, + ), + ], +); diff --git a/lib/navigation/router/routers/draw.dart b/lib/navigation/router/routers/draw.dart new file mode 100644 index 0000000..07e2f7c --- /dev/null +++ b/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: [ + 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(); + }, + ), + ], +); diff --git a/lib/navigation/views/top_bar.dart b/lib/navigation/views/top_bar.dart new file mode 100644 index 0000000..4bb5919 --- /dev/null +++ b/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() + ], + ), + ); + } +} diff --git a/lib/navigation/views/top_logo.dart b/lib/navigation/views/top_logo.dart new file mode 100644 index 0000000..657df31 --- /dev/null +++ b/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), + ) + ], + ), + ); + } +} diff --git a/lib/pages/dashboard/chat_room.dart b/lib/pages/dashboard/chat_room.dart new file mode 100644 index 0000000..8f85e2c --- /dev/null +++ b/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),), + ], + ), + ), + ); + } +} diff --git a/lib/pages/dashboard/view_book/book_cell.dart b/lib/pages/dashboard/view_book/book_cell.dart new file mode 100644 index 0000000..362f910 --- /dev/null +++ b/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 createState() => _BookCellState(); +} + +class _BookCellState extends State { + @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) { + + } +} diff --git a/lib/pages/dashboard/view_book/title_group.dart b/lib/pages/dashboard/view_book/title_group.dart new file mode 100644 index 0000000..9d015c1 --- /dev/null +++ b/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, + ), + ], + ); + } +} diff --git a/lib/pages/dashboard/view_books.dart b/lib/pages/dashboard/view_books.dart new file mode 100644 index 0000000..4c9c213 --- /dev/null +++ b/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 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 freeBooks = [ + BookInfo( + name: 'Flutter 入门教程', + path: 'first', + url: 'https://juejin.cn/book/7212822723330834487', + info: '以有趣的案例为基础，带你入门 Flutter 技术', + cover: 'assets/images/first.webp', + price: '0', + ), +]; + +List 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, + // ); + } +} diff --git a/lib/v12/pages/empty/empty_panel.dart b/lib/v12/pages/empty/empty_panel.dart index 1e99155..6aadee2 100644 --- a/lib/v12/pages/empty/empty_panel.dart +++ b/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('返回首页')) + ], + ), ), ); } diff --git a/packages/idraw/lib/components/coordinate.dart b/packages/idraw/lib/components/coordinate.dart new file mode 100644 index 0000000..9463ec9 --- /dev/null +++ b/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(); + } +} diff --git a/packages/idraw/lib/components/coordinate_pro.dart b/packages/idraw/lib/components/coordinate_pro.dart new file mode 100644 index 0000000..6c334f2 --- /dev/null +++ b/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(); + } +} diff --git a/packages/idraw/lib/components/demo_shower.dart b/packages/idraw/lib/components/demo_shower.dart new file mode 100644 index 0000000..775e388 --- /dev/null +++ b/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 demos; + const DemoShower({super.key, required this.demos}); + + @override + State createState() => _DemoShowerState(); +} + +class _DemoShowerState extends State { + 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 createState() => _TolyIconButtonState(); +} + +class _TolyIconButtonState extends State { + 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; + }); + } +} diff --git a/packages/idraw/lib/p01/p01.dart b/packages/idraw/lib/p01/p01.dart new file mode 100644 index 0000000..0fa7609 --- /dev/null +++ b/packages/idraw/lib/p01/p01.dart @@ -0,0 +1 @@ +export 'p01_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p01/p01_page.dart b/packages/idraw/lib/p01/p01_page.dart new file mode 100644 index 0000000..0a87145 --- /dev/null +++ b/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(), + ], + ); + } +} diff --git a/packages/idraw/lib/p01/s01_page.dart b/packages/idraw/lib/p01/s01_page.dart new file mode 100644 index 0000000..570fe0f --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/idraw/lib/p01/s02_page.dart b/packages/idraw/lib/p01/s02_page.dart new file mode 100644 index 0000000..f61fc01 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/idraw/lib/p02/p02.dart b/packages/idraw/lib/p02/p02.dart new file mode 100644 index 0000000..7f4911c --- /dev/null +++ b/packages/idraw/lib/p02/p02.dart @@ -0,0 +1 @@ +export 'p02_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p02/p02_page.dart b/packages/idraw/lib/p02/p02_page.dart new file mode 100644 index 0000000..08903ba --- /dev/null +++ b/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(), + ], + ); + } +} diff --git a/packages/idraw/lib/p02/s01.dart b/packages/idraw/lib/p02/s01.dart new file mode 100644 index 0000000..d56336c --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p02/s02.dart b/packages/idraw/lib/p02/s02.dart new file mode 100644 index 0000000..f6a94f3 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p02/s03.dart b/packages/idraw/lib/p02/s03.dart new file mode 100644 index 0000000..e946d93 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p02/s04.dart b/packages/idraw/lib/p02/s04.dart new file mode 100644 index 0000000..829132a --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p02/s05.dart b/packages/idraw/lib/p02/s05.dart new file mode 100644 index 0000000..d8d1aa1 --- /dev/null +++ b/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; +} + diff --git a/packages/idraw/lib/p02/s06.dart b/packages/idraw/lib/p02/s06.dart new file mode 100644 index 0000000..20d5f0f --- /dev/null +++ b/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 { + 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 loadImage(ImageProvider provider) { + Completer completer = Completer(); + 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; +} diff --git a/packages/idraw/lib/p02/s07.dart b/packages/idraw/lib/p02/s07.dart new file mode 100644 index 0000000..46a9be5 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p02/s08.dart b/packages/idraw/lib/p02/s08.dart new file mode 100644 index 0000000..6926743 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p02/s09.dart b/packages/idraw/lib/p02/s09.dart new file mode 100644 index 0000000..8e51fe0 --- /dev/null +++ b/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 { + 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? 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; +} diff --git a/packages/idraw/lib/p02/s10.dart b/packages/idraw/lib/p02/s10.dart new file mode 100644 index 0000000..bff98fc --- /dev/null +++ b/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 { + 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? 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([ + 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([ + 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([ + -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([ + 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([ + 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; +} diff --git a/packages/idraw/lib/p02/s11.dart b/packages/idraw/lib/p02/s11.dart new file mode 100644 index 0000000..5987e8b --- /dev/null +++ b/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 { + 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? 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; +} diff --git a/packages/idraw/lib/p02/s12.dart b/packages/idraw/lib/p02/s12.dart new file mode 100644 index 0000000..40831ae --- /dev/null +++ b/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 { + 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? 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; +} diff --git a/packages/idraw/lib/p02/s13.dart b/packages/idraw/lib/p02/s13.dart new file mode 100644 index 0000000..a8ae402 --- /dev/null +++ b/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 { + 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? 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; +} diff --git a/packages/idraw/lib/p03/p03.dart b/packages/idraw/lib/p03/p03.dart new file mode 100644 index 0000000..fb5811c --- /dev/null +++ b/packages/idraw/lib/p03/p03.dart @@ -0,0 +1 @@ +export 'p03_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p03/p03_page.dart b/packages/idraw/lib/p03/p03_page.dart new file mode 100644 index 0000000..83bf582 --- /dev/null +++ b/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(), + ], + ); + } +} diff --git a/packages/idraw/lib/p03/s01.dart b/packages/idraw/lib/p03/s01.dart new file mode 100644 index 0000000..634563c --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s02.dart b/packages/idraw/lib/p03/s02.dart new file mode 100644 index 0000000..193f872 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s03.dart b/packages/idraw/lib/p03/s03.dart new file mode 100644 index 0000000..a560f7b --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s04.dart b/packages/idraw/lib/p03/s04.dart new file mode 100644 index 0000000..df393f0 --- /dev/null +++ b/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 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(); + } + + +} diff --git a/packages/idraw/lib/p03/s05.dart b/packages/idraw/lib/p03/s05.dart new file mode 100644 index 0000000..1d44c4e --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s06.dart b/packages/idraw/lib/p03/s06.dart new file mode 100644 index 0000000..4d28c6b --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s07.dart b/packages/idraw/lib/p03/s07.dart new file mode 100644 index 0000000..b51cee4 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s08.dart b/packages/idraw/lib/p03/s08.dart new file mode 100644 index 0000000..6b5be7d --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s09.dart b/packages/idraw/lib/p03/s09.dart new file mode 100644 index 0000000..850e4b4 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s10.dart b/packages/idraw/lib/p03/s10.dart new file mode 100644 index 0000000..541495f --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s11.dart b/packages/idraw/lib/p03/s11.dart new file mode 100644 index 0000000..68ff835 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s12.dart b/packages/idraw/lib/p03/s12.dart new file mode 100644 index 0000000..01a1521 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p03/s13.dart b/packages/idraw/lib/p03/s13.dart new file mode 100644 index 0000000..5e33345 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p04/p04.dart b/packages/idraw/lib/p04/p04.dart new file mode 100644 index 0000000..8a11e69 --- /dev/null +++ b/packages/idraw/lib/p04/p04.dart @@ -0,0 +1 @@ +export 'p04_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p04/p04_page.dart b/packages/idraw/lib/p04/p04_page.dart new file mode 100644 index 0000000..cd8fb6e --- /dev/null +++ b/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(), + ], + ); + } +} diff --git a/packages/idraw/lib/p04/s01.dart b/packages/idraw/lib/p04/s01.dart new file mode 100644 index 0000000..8347d5b --- /dev/null +++ b/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 { + 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? 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); + } + } +} diff --git a/packages/idraw/lib/p04/s02.dart b/packages/idraw/lib/p04/s02.dart new file mode 100644 index 0000000..0b87f70 --- /dev/null +++ b/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 { + @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? 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); + } + } +} diff --git a/packages/idraw/lib/p04/s03.dart b/packages/idraw/lib/p04/s03.dart new file mode 100644 index 0000000..b2d5dec --- /dev/null +++ b/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 { + @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? 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); + } + } +} diff --git a/packages/idraw/lib/p04/s04.dart b/packages/idraw/lib/p04/s04.dart new file mode 100644 index 0000000..4fcd18b --- /dev/null +++ b/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 { + @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? 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 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 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 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}); +} diff --git a/packages/idraw/lib/p04/s05.dart b/packages/idraw/lib/p04/s05.dart new file mode 100644 index 0000000..87f9897 --- /dev/null +++ b/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 { + @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? 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 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}); +} \ No newline at end of file diff --git a/packages/idraw/lib/p04/s06.dart b/packages/idraw/lib/p04/s06.dart new file mode 100644 index 0000000..05793ca --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p04/s07.dart b/packages/idraw/lib/p04/s07.dart new file mode 100644 index 0000000..f211ddf --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/p05.dart b/packages/idraw/lib/p05/p05.dart new file mode 100644 index 0000000..8ee5f6b --- /dev/null +++ b/packages/idraw/lib/p05/p05.dart @@ -0,0 +1 @@ +export 'p05_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p05/p05_page.dart b/packages/idraw/lib/p05/p05_page.dart new file mode 100644 index 0000000..e11f734 --- /dev/null +++ b/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(), + ], + ); + } +} diff --git a/packages/idraw/lib/p05/s01.dart b/packages/idraw/lib/p05/s01.dart new file mode 100644 index 0000000..9e5792d --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s02.dart b/packages/idraw/lib/p05/s02.dart new file mode 100644 index 0000000..6e0ceaa --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s03.dart b/packages/idraw/lib/p05/s03.dart new file mode 100644 index 0000000..249946f --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s04.dart b/packages/idraw/lib/p05/s04.dart new file mode 100644 index 0000000..c25d1f0 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s05.dart b/packages/idraw/lib/p05/s05.dart new file mode 100644 index 0000000..c0a6a66 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s06.dart b/packages/idraw/lib/p05/s06.dart new file mode 100644 index 0000000..f21f54e --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s07.dart b/packages/idraw/lib/p05/s07.dart new file mode 100644 index 0000000..2342730 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s08.dart b/packages/idraw/lib/p05/s08.dart new file mode 100644 index 0000000..05b873d --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s09.dart b/packages/idraw/lib/p05/s09.dart new file mode 100644 index 0000000..40faf9a --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s10.dart b/packages/idraw/lib/p05/s10.dart new file mode 100644 index 0000000..554cb21 --- /dev/null +++ b/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; +} diff --git a/packages/idraw/lib/p05/s11.dart b/packages/idraw/lib/p05/s11.dart new file mode 100644 index 0000000..739ab41 --- /dev/null +++ b/packages/idraw/lib/p05/s11.dart @@ -0,0 +1,39 @@ +import 'dart:ui' as ui; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +import '../components/coordinate.dart'; + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + final Coordinate coordinate = Coordinate(step: 25); + + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + } + + @override + bool shouldRepaint(PaperPainter oldDelegate) => false; +} diff --git a/pubspec.lock b/pubspec.lock index 5efc459..90c6cb4 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -120,6 +120,13 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "12.1.1" + idraw: + dependency: "direct main" + description: + path: "packages/idraw" + relative: true + source: path + version: "0.0.1" lints: dependency: transitive description: @@ -269,6 +276,13 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "0.6.0" + toly_menu: + dependency: "direct main" + description: + path: "E:\\Projects\\Flutter\\packages\\toly_menu" + relative: false + source: path + version: "0.0.1" url_launcher: dependency: "direct main" description: @@ -366,5 +380,5 @@ packages: source: hosted version: "0.3.7" sdks: - dart: ">=3.1.0 <4.0.0" + dart: ">=3.1.1 <4.0.0" flutter: ">=3.13.0" diff --git a/pubspec.yaml b/pubspec.yaml index 136624c..8b73a4f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -43,6 +43,10 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 + toly_menu: + path: E:\Projects\Flutter\packages\toly_menu + idraw: + path: packages/idraw dev_dependencies: flutter_test: @@ -67,7 +71,8 @@ flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: - # assets: + assets: + - assets/images/ # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg diff --git a/test/parser/menu.dart b/test/parser/menu.dart new file mode 100644 index 0000000..9db4b6a --- /dev/null +++ b/test/parser/menu.dart @@ -0,0 +1,27 @@ +import 'package:iroute/navigation/router/menus/menu_tree.dart'; +import 'package:toly_menu/toly_menu.dart'; + +void main() { + Map data = dashboard; + MenuNode node = parser(data, 0, ''); + print(node); +} + +MenuNode parser(Map data, int deep, String prefix) { + String path = data['path']; + String label = data['label']; + List>? childrenMap = data['children']; + List 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, + ); +}