diff --git a/lib/components/toly_ui/decoration/title.dart b/lib/components/toly_ui/decoration/title.dart new file mode 100644 index 0000000..fa005f6 --- /dev/null +++ b/lib/components/toly_ui/decoration/title.dart @@ -0,0 +1,93 @@ +import 'package:flutter/material.dart'; + +class TolyTitle extends StatelessWidget { + final Widget child; + final Color? lineColor; + final Color? color; + const TolyTitle({ + super.key, + required this.child, + this.lineColor, + this.color, + }); + + @override + Widget build(BuildContext context) { + return Container( + decoration: TitleDecoration( + color,lineColor, + ), + child: child, + ); + } +} + +class TitleDecoration extends Decoration { + final Color? lineColor; + final Color? color; + + const TitleDecoration( this.color,this.lineColor,); + + @override + BoxPainter createBoxPainter([VoidCallback? onChanged]) => + TitlePainter(color: color, lineColor: lineColor); +} + +class TitlePainter extends BoxPainter { + final Color? color; + final Color? lineColor; + + const TitlePainter({this.color, this.lineColor}); + + @override + void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) { + canvas.save(); + canvas.translate(offset.dx, offset.dy); + Size size = configuration.size ?? Size.zero; + final Paint paint = Paint() + // ..style = PaintingStyle.stroke + ..color = color??Colors.transparent + ..strokeWidth = 1; + + + final Rect zone = Rect.fromCenter( + center: Offset(size.width / 2, size.height / 2), + width: size.width, + height: size.height, + ); + + canvas.drawRect(zone, paint); + final Paint paint2 = Paint() + ..strokeWidth = 1 + // ..style = PaintingStyle.stroke + // ..color = const Color(0xffFFFAA7); + ..color = lineColor??Colors.transparent; + + const double start = 4; + canvas.drawLine(const Offset(0, start), Offset(size.width, start), paint2); + double end = size.height - 4; + canvas.drawLine(Offset(0, end), Offset(size.width, end), paint2); + + canvas.drawCircle(Offset(10,size.height/2), 4, paint2); + + // + // canvas.translate( + // offset.dx + (configuration.size?.width??0) / 2, + // offset.dy + (configuration.size?.height??0) / 2, + // ); + // + // final Rect zone = Rect.fromCenter( + // center: Offset.zero, + // width: configuration.size.width, + // height: configuration.size.height, + // ); + // + // path.addRRect(RRect.fromRectAndRadius( + // zone, + // Radius.circular(20), + // )); + // + // const DashPainter(span: 4, step: 9).paint(canvas, path, paint); + canvas.restore(); + } +} diff --git a/lib/navigation/router/routers/draw.dart b/lib/navigation/router/routers/draw.dart index 07e2f7c..7cac861 100644 --- a/lib/navigation/router/routers/draw.dart +++ b/lib/navigation/router/routers/draw.dart @@ -1,13 +1,11 @@ - import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:idraw/idraw.dart'; import 'package:iroute/pages/dashboard/chat_room.dart'; - final RouteBase drawRouters = GoRoute( path: '/draw', - redirect: (_,state) { + redirect: (_, state) { if (state.fullPath == '/draw') { return '/draw/chapter1'; } @@ -37,11 +35,48 @@ final RouteBase drawRouters = GoRoute( builder: (BuildContext context, GoRouterState state) { return const P04Page(); }, - ), GoRoute( + ), + GoRoute( path: 'chapter5', builder: (BuildContext context, GoRouterState state) { return const P05Page(); }, ), + GoRoute( + path: 'chapter6', + builder: (BuildContext context, GoRouterState state) { + return const P06Page(); + }, + ), + GoRoute( + path: 'chapter7', + builder: (BuildContext context, GoRouterState state) { + return const P07Page(); + }, + ), + GoRoute( + path: 'chapter8', + builder: (BuildContext context, GoRouterState state) { + return const P08Page(); + }, + ), + GoRoute( + path: 'chapter9', + builder: (BuildContext context, GoRouterState state) { + return const P09Page(); + }, + ), + GoRoute( + path: 'chapter10', + builder: (BuildContext context, GoRouterState state) { + return const P10Page(); + }, + ), + GoRoute( + path: 'chapter11', + builder: (BuildContext context, GoRouterState state) { + return const P11Page(); + }, + ), ], ); diff --git a/lib/pages/dashboard/view_book/title_group.dart b/lib/pages/dashboard/view_book/title_group.dart index 9d015c1..7dd632c 100644 --- a/lib/pages/dashboard/view_book/title_group.dart +++ b/lib/pages/dashboard/view_book/title_group.dart @@ -1,37 +1,34 @@ import 'package:flutter/material.dart'; +import '../../../components/toly_ui/decoration/title.dart'; + class TitleGroup extends StatelessWidget { final String title; - const TitleGroup({super.key, required this.title}); + final Color? color; + final Color? lineColor; + + const TitleGroup({super.key, required this.title, this.color=const Color(0xff333333), this.lineColor}); @override Widget build(BuildContext context) { - return Column( - children: [ - const SizedBox( - height: 16, - ), - Row( - children: [ - const SizedBox( - width: 16, - ), - CircleAvatar( - radius: 6, - ), - const SizedBox( - width: 16, - ), - Text( + return Padding( + padding: EdgeInsets.symmetric(vertical: 16), + child: Center( + child: TolyTitle( + color: color, + lineColor: lineColor, + child: + Container( + padding: EdgeInsets.symmetric(horizontal: 24,vertical: 10), + child: Text( title, - style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold), + style: TextStyle(fontSize: 14, + color: Colors.white, + fontWeight: FontWeight.bold + ), ), - ], - ), - const SizedBox( - height: 16, - ), - ], + ), ), + ), ); } } diff --git a/lib/pages/dashboard/view_books.dart b/lib/pages/dashboard/view_books.dart index 4c9c213..318c84c 100644 --- a/lib/pages/dashboard/view_books.dart +++ b/lib/pages/dashboard/view_books.dart @@ -70,7 +70,6 @@ List kBooks = [ cover: 'assets/images/anima.webp', price: '3.5', ), - BookInfo( name: 'Flutter渲染机制·聚沙成塔', path: 'dream', @@ -102,7 +101,6 @@ List projectBooks = [ ), ]; - class ViewBooks extends StatelessWidget { const ViewBooks({super.key}); @@ -117,70 +115,43 @@ class ViewBooks extends StatelessWidget { ); return CustomScrollView( slivers: [ + SliverToBoxAdapter( + child: TitleGroup( + title: 'Flutter 七剑合璧', + lineColor: const Color(0xff6EAFF9), + ), + ), + _buildSliverSliverGrid(kBooks,gridDelegate), + SliverToBoxAdapter( + child: TitleGroup( + title: 'Flutter 实战探索', + lineColor: const Color(0xffFD983A), + ), + ), + _buildSliverSliverGrid(projectBooks,gridDelegate), + SliverToBoxAdapter( - child: TitleGroup(title: 'Flutter 七剑合璧',), + child: TitleGroup( + title: 'Flutter 免费小册', + lineColor: const Color(0xff7864E1), + ), ), - - 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), + _buildSliverSliverGrid(freeBooks,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, - // ); + Widget _buildSliverSliverGrid( + List books, SliverGridDelegate gridDelegate) { + return SliverPadding( + padding: const EdgeInsets.symmetric(horizontal: 10), + sliver: SliverGrid( + delegate: SliverChildBuilderDelegate( + (_, i) => BookCell(bookInfo: books[i]), + childCount: books.length, + ), + gridDelegate: gridDelegate), + ); } } diff --git a/packages/idraw/lib/components/demo_shower.dart b/packages/idraw/lib/components/demo_shower.dart index 775e388..862e008 100644 --- a/packages/idraw/lib/components/demo_shower.dart +++ b/packages/idraw/lib/components/demo_shower.dart @@ -15,51 +15,53 @@ class _DemoShowerState extends State { @override Widget build(BuildContext context) { - return Stack( - alignment: Alignment.bottomCenter, - children: [ - PageView( - controller: _ctrl, - children: widget.demos, - ), + return Material( + child: 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(() { + 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),), - ), + }); + _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(() { + 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, - ), + }); + _ctrl.animateToPage(_index,curve: Curves.easeIn,duration: Duration(milliseconds: 200)); + }, + size: 36, + iconData: Icons.navigate_next, + ), - ], - )), + ], + )), - ], + ], + ), ); } } diff --git a/packages/idraw/lib/p06/p06.dart b/packages/idraw/lib/p06/p06.dart new file mode 100644 index 0000000..1edcaaf --- /dev/null +++ b/packages/idraw/lib/p06/p06.dart @@ -0,0 +1 @@ +export 'p06_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p06/p06_page.dart b/packages/idraw/lib/p06/p06_page.dart new file mode 100644 index 0000000..67738e0 --- /dev/null +++ b/packages/idraw/lib/p06/p06_page.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +import 'package:idraw/components/demo_shower.dart'; +import 's01.dart' as s1; +import 's02.dart' as s2; +import 's03.dart' as s3; +import 's04.dart' as s4; +import 's05.dart' as s5; +import 's06.dart' as s6; + +class P06Page extends StatelessWidget { + const P06Page({super.key}); + + @override + Widget build(BuildContext context) { + return const DemoShower( + demos: [ + s1.Paper(), + s2.Paper(), + s3.Paper(), + s4.Paper(), + s5.Paper(), + s6.Paper(), + ], + ); + } +} diff --git a/packages/idraw/lib/p06/s01.dart b/packages/idraw/lib/p06/s01.dart new file mode 100644 index 0000000..9c03a4c --- /dev/null +++ b/packages/idraw/lib/p06/s01.dart @@ -0,0 +1,56 @@ + +import 'package:flutter/material.dart'; + +import '../components/coordinate.dart'; + + +/// create by 张风捷特烈 on 2020/5/1 +/// contact me by email 1981462002@qq.com +/// 说明: + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + + + final Coordinate coordinate = Coordinate(); + PaperPainter(); + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + Path path = Path(); + + Paint paint = Paint() + ..color = Colors.purpleAccent + ..strokeWidth = 2 + ..style = PaintingStyle.stroke; + + path + ..lineTo(100, 100) + ..relativeLineTo(0, -50) + ..close(); + + canvas.drawPath(path, paint); + canvas.drawPath(path.shift(Offset(100, 0)), paint); + canvas.drawPath(path.shift(Offset(200, 0)), paint); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/packages/idraw/lib/p06/s02.dart b/packages/idraw/lib/p06/s02.dart new file mode 100644 index 0000000..736007d --- /dev/null +++ b/packages/idraw/lib/p06/s02.dart @@ -0,0 +1,61 @@ + +import 'package:flutter/material.dart'; + +import '../components/coordinate.dart'; + +/// create by 张风捷特烈 on 2020/5/1 +/// contact me by email 1981462002@qq.com +/// 说明: + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + final Coordinate coordinate = Coordinate(); + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + Path path = Path(); + Paint paint = Paint() + ..color = Colors.purple + ..style = PaintingStyle.fill; + + path + ..relativeMoveTo(0, 0) + ..relativeLineTo(-30, 120) + ..relativeLineTo(30, -30) + ..relativeLineTo(30, 30) + ..close(); + + canvas.drawPath(path, paint); + + print(path.contains(Offset(20, 20))); + print(path.contains(Offset(0, 20))); + + Rect bounds = path.getBounds(); + canvas.drawRect( + bounds, + Paint() + ..color = Colors.orange + ..style = PaintingStyle.stroke + ..strokeWidth = 1); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/packages/idraw/lib/p06/s03.dart b/packages/idraw/lib/p06/s03.dart new file mode 100644 index 0000000..13d8cff --- /dev/null +++ b/packages/idraw/lib/p06/s03.dart @@ -0,0 +1,56 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +import '../components/coordinate.dart'; + +/// create by 张风捷特烈 on 2020/5/1 +/// contact me by email 1981462002@qq.com +/// 说明: + + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + + + final Coordinate coordinate = Coordinate(); + + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + Path path = Path(); + Paint paint = Paint() + ..color = Colors.purple + ..style = PaintingStyle.fill; + path + ..relativeMoveTo(0, 0) + ..relativeLineTo(-30, 120) + ..relativeLineTo(30, -30) + ..relativeLineTo( 30,30) + ..close(); + + for(int i=0;i<8;i++){ + canvas.drawPath(path.transform(Matrix4.rotationZ(i*pi/4).storage), paint); + } + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/packages/idraw/lib/p06/s04.dart b/packages/idraw/lib/p06/s04.dart new file mode 100644 index 0000000..5d763b8 --- /dev/null +++ b/packages/idraw/lib/p06/s04.dart @@ -0,0 +1,68 @@ + + +import 'package:flutter/material.dart'; + +import '../components/coordinate.dart'; + + +/// create by 张风捷特烈 on 2020/5/1 +/// contact me by email 1981462002@qq.com +/// 说明: + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + + + final Coordinate coordinate= Coordinate(); + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + Path path = Path(); + Paint paint = Paint(); + paint + ..color = Colors.purple + ..style = PaintingStyle.fill; + path + ..relativeMoveTo(0, 0) + ..relativeLineTo(-30, 120) + ..relativeLineTo(30, -30) + ..relativeLineTo( 30,30) + ..close(); + + + var pathOval =Path()..addOval(Rect.fromCenter(center: Offset(0, 0),width: 60,height: 60)); + canvas.drawPath(Path.combine(PathOperation.difference, path, pathOval), paint); + + canvas.translate(120, 0); + canvas.drawPath(Path.combine(PathOperation.intersect, path, pathOval), paint); + + canvas.translate(120, 0); + canvas.drawPath(Path.combine(PathOperation.union, path, pathOval), paint); + + canvas.translate(-120*3.0, 0); + canvas.drawPath(Path.combine(PathOperation.reverseDifference, path, pathOval), paint); + + canvas.translate(-120, 0); + canvas.drawPath(Path.combine(PathOperation.xor, path, pathOval), paint); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/packages/idraw/lib/p06/s05.dart b/packages/idraw/lib/p06/s05.dart new file mode 100644 index 0000000..dde4a0a --- /dev/null +++ b/packages/idraw/lib/p06/s05.dart @@ -0,0 +1,74 @@ + +import 'dart:ui'; + +import 'package:flutter/material.dart'; + +import '../components/coordinate.dart'; + + + +/// create by 张风捷特烈 on 2020/5/1 +/// contact me by email 1981462002@qq.com +/// 说明: + +class Paper extends StatelessWidget{ + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } + +} + +class PaperPainter extends CustomPainter { + final Coordinate coordinate = Coordinate(); + + + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + Paint paint = Paint() + ..color = Colors.purple + ..strokeWidth = 1 + ..style = PaintingStyle.stroke; + + Path path = Path(); + path + ..relativeMoveTo(0, 0) + ..relativeLineTo(-30, 120) + ..relativeLineTo(30, -30) + ..relativeLineTo(30, 30) + ..close(); + + path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50)); + + PathMetrics pms = path.computeMetrics(); + pms.forEach((pm) { + print( + "---length:-${pm.length}----contourIndex:-${pm.contourIndex}----contourIndex:-${pm.isClosed}----"); + + Tangent? tangent = pm.getTangentForOffset(pm.length * 0.5); + if(tangent==null) return; + print( + "---position:-${tangent.position}----angle:-${tangent.angle}----vector:-${tangent.vector}----"); + + canvas.drawCircle( + tangent.position, 5, Paint()..color = Colors.deepOrange); + }); + + canvas.drawPath(path, paint); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/packages/idraw/lib/p06/s06.dart b/packages/idraw/lib/p06/s06.dart new file mode 100644 index 0000000..9973d70 --- /dev/null +++ b/packages/idraw/lib/p06/s06.dart @@ -0,0 +1,83 @@ +import 'dart:ui'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/5/1 +/// contact me by email 1981462002@qq.com +/// 说明: + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State with SingleTickerProviderStateMixin { + late AnimationController _ctrl; + double progress = 0.0; + + @override + void initState() { + super.initState(); + _ctrl = AnimationController( + duration: Duration(seconds: 3), vsync: this) + ..forward(); + } + + @override + void dispose() { + _ctrl.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(progress: _ctrl), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + final Animation progress; + + PaperPainter({required this.progress}) : super(repaint: progress); + + @override + void paint(Canvas canvas, Size size) { + canvas.translate(size.width / 2, size.height / 2); + + Paint paint = Paint() + ..color = Colors.purple + ..strokeWidth = 1 + ..style = PaintingStyle.stroke; + + Path path = Path(); + path + ..relativeMoveTo(0, 0) + ..relativeLineTo(-30, 120) + ..relativeLineTo(30, -30) + ..relativeLineTo(30, 30) + ..close(); + + path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50)); + + PathMetrics pms = path.computeMetrics(); + for (PathMetric pm in pms) { + Tangent? tangent = pm.getTangentForOffset(pm.length * progress.value); + if(tangent ==null) continue; + canvas.drawCircle( + tangent.position, 5, Paint()..color = Colors.deepOrange); + } + + canvas.drawPath(path, paint); + } + + @override + bool shouldRepaint(PaperPainter oldDelegate) => + oldDelegate.progress != progress; +} diff --git a/packages/idraw/lib/p07/p07.dart b/packages/idraw/lib/p07/p07.dart new file mode 100644 index 0000000..6a2965b --- /dev/null +++ b/packages/idraw/lib/p07/p07.dart @@ -0,0 +1 @@ +export 'p07_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p07/p07_page.dart b/packages/idraw/lib/p07/p07_page.dart new file mode 100644 index 0000000..87c7ad1 --- /dev/null +++ b/packages/idraw/lib/p07/p07_page.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +import 'package:idraw/components/demo_shower.dart'; +import 's01.dart' as s1; +import 's02.dart' as s2; +import 's03.dart' as s3; +import 's04.dart' as s4; +import 's05.dart' as s5; +import 's06.dart' as s6; + +class P07Page extends StatelessWidget { + const P07Page({super.key}); + + @override + Widget build(BuildContext context) { + return const DemoShower( + demos: [ + s1.Paper(), + s2.Paper(), + s3.Paper(), + s4.Paper(), + s5.Paper(), + s6.Paper(), + ], + ); + } +} diff --git a/packages/idraw/lib/p07/s01.dart b/packages/idraw/lib/p07/s01.dart new file mode 100644 index 0000000..3fa49e4 --- /dev/null +++ b/packages/idraw/lib/p07/s01.dart @@ -0,0 +1,61 @@ + +import 'package:flutter/material.dart'; + +import '../components/coordinate_pro.dart'; + + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + static const double step = 20; // 方格变长 + final Coordinate coordinate = Coordinate(step: step); + + // 颜色列表 256 个元素 + final Color colors = Color(0xffBBE9F7).withRed(0); + // final Color colors = Color(0xff00E9F9); + + @override + void paint(Canvas canvas, Size size) { + Paint paint = Paint(); + + canvas.save(); + canvas.translate(size.width / 2, size.height / 2); + + List values = colors.value.toRadixString(2).split('').toList(); + + // 遍历列表 绘制矩形色块 + canvas.translate(-step * 4.0, -step * 2.0); + values.asMap().forEach((i, v) { + int line = (i % 8); // 行 + int row = i ~/ 8; // 列 + var topLeft = Offset(step * line, step * row); + var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step)); + canvas.drawRect( + rect, paint..color = v == '0' ? Colors.red : Colors.black); + }); + + canvas.restore(); + coordinate.paint(canvas, size); //绘制坐标系 + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/packages/idraw/lib/p07/s02.dart b/packages/idraw/lib/p07/s02.dart new file mode 100644 index 0000000..dece160 --- /dev/null +++ b/packages/idraw/lib/p07/s02.dart @@ -0,0 +1,55 @@ +import 'dart:ui'; +import 'package:flutter/material.dart'; + +import '../components/coordinate_pro.dart'; +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + // 使用CustomPaint + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + static const double step = 15; // 方格变长 + final Coordinate coordinate = Coordinate(step: step); + + // 颜色列表 256 个元素 + final List colors = + List.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0)); + + @override + void paint(Canvas canvas, Size size) { + Paint paint = Paint(); + + canvas.save(); + canvas.translate(size.width / 2, size.height / 2); + + // 遍历列表 绘制矩形色块 + canvas.translate(-step * 8.0, -step * 8.0); + colors.asMap().forEach((i, color) { + int line = (i % 16); // 行 + int row = i ~/ 16; // 列 + var topLeft = Offset(step * line, step * row); + var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step)); + canvas.drawRect(rect, paint..color = color); + }); + + canvas.restore(); + coordinate.paint(canvas, size); //绘制坐标系 + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => false; +} diff --git a/packages/idraw/lib/p07/s03.dart b/packages/idraw/lib/p07/s03.dart new file mode 100644 index 0000000..5b1ce84 --- /dev/null +++ b/packages/idraw/lib/p07/s03.dart @@ -0,0 +1,112 @@ +import 'dart:async'; +import 'dart:ui' as ui; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; + +import '../components/coordinate_pro.dart'; + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + ui.Image? _image; + + @override + void initState() { + super.initState(); + _loadImage(); + } + + void _loadImage() async { + _image = + await loadImageFromAssets('assets/images/icon_head.png'); + 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( + color: Colors.white, child: CustomPaint(painter: PaperPainter(_image))); + } + + +} + +class PaperPainter extends CustomPainter { + + final ui.Image? image; + + + PaperPainter(this.image); + + static const double step = 20; // 方格变长 + final Coordinate coordinate = Coordinate(step: step); + + // 颜色列表 256 个元素 + final List colors = + List.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0)); + + @override + void paint(Canvas canvas, Size size) { + if(image ==null) return; + + Paint srcPaint = Paint(); + canvas.translate(size.width / 2, size.height / 2); + canvas.translate(-step * 17, -step * 7); + Paint dstPaint = Paint(); + BlendMode.values.asMap().forEach((i, value) { + int line = i ~/ 10; + int row = i % 10; + canvas.save(); + + canvas.translate(3.7 * step * row, 5.5 * step * line); + canvas.drawImageRect(image!, Rect.fromPoints(Offset.zero, Offset(image!.width*1.0,image!.height*1.0)), + Rect.fromCenter(center:Offset.zero, width: 25*2.0,height: 25*2.0), dstPaint); + + srcPaint + ..color = Color(0xffff0000) + ..blendMode = value; + canvas.drawRect( + Rect.fromPoints(Offset.zero, Offset(20 * 2.0, 20 * 2.0)), srcPaint); + + _simpleDrawText(canvas,value.toString().split(".")[1],offset: Offset(-10, 50)); + canvas.restore(); + }); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; + + void _simpleDrawText(Canvas canvas, String str, + {Offset offset = Offset.zero, Color color = Colors.black}) { + var builder = ui.ParagraphBuilder(ui.ParagraphStyle( + textAlign: TextAlign.left, + fontSize: 11, + textDirection: TextDirection.ltr, + maxLines: 1, + )) + ..pushStyle( + ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic), + ) + ..addText(str); + + canvas.drawParagraph( + builder.build() + ..layout(ui.ParagraphConstraints(width: 11.0 * str.length)), + offset); + } +} diff --git a/packages/idraw/lib/p07/s04.dart b/packages/idraw/lib/p07/s04.dart new file mode 100644 index 0000000..fa9e121 --- /dev/null +++ b/packages/idraw/lib/p07/s04.dart @@ -0,0 +1,123 @@ +import 'dart:async'; +import 'dart:ui' as ui; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; + +import '../components/coordinate_pro.dart'; + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + ui.Image? _srcImage; + ui.Image? _dstImage; + + @override + void initState() { + super.initState(); + _loadImage(); + } + + void _loadImage() async { + _srcImage = await loadImageFromAssets('assets/images/src.png'); + _dstImage = await loadImageFromAssets('assets/images/dst.png'); + setState(() {}); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint(painter: PaperPainter(_srcImage, _dstImage))); + } + + //读取 assets 中的图片 + Future? loadImageFromAssets(String path) async { + ByteData data = await rootBundle.load(path); + return decodeImageFromList(data.buffer.asUint8List()); + } + +} + +class PaperPainter extends CustomPainter { + final ui.Image? srcImage; + final ui.Image? dstImage; + + PaperPainter(this.srcImage, this.dstImage); + + static const double step = 20; // 方格变长 + final Coordinate coordinate = Coordinate(step: step); + + + @override + void paint(Canvas canvas, Size size) { + if (dstImage == null || srcImage == null) return; + + Paint srcPaint = Paint(); + Paint dstPaint = Paint(); + + int index = 4; + + BlendMode srcModel = BlendMode.dstOver; + BlendMode dstModel = BlendMode.srcOver; + + srcPaint + ..blendMode = srcModel; + dstPaint + ..blendMode = dstModel; + + _simpleDrawText(canvas, BlendMode.values[index].toString().split(".")[1], + fontSize: 16, + offset: Offset(50, 50)); + + canvas.translate(size.width / 2, size.height / 2); + + canvas.drawImageRect( + dstImage!, + Rect.fromPoints( + Offset.zero, Offset(dstImage!.width * 1.0, dstImage!.height * 1.0)), + Rect.fromCenter( + center: Offset.zero, width: 400, height: 400), + dstPaint); + + canvas.drawImageRect( + srcImage!, + Rect.fromPoints( + Offset.zero, Offset(srcImage!.width * 1.0, srcImage!.height * 1.0)), + Rect.fromCenter( + center: Offset.zero, width: 400, height: 400), + srcPaint); + + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; + + void _simpleDrawText(Canvas canvas, String str, + {double fontSize = 11,Offset offset = Offset.zero, Color color = Colors.black}) { + var builder = ui.ParagraphBuilder(ui.ParagraphStyle( + textAlign: TextAlign.left, + fontSize: fontSize, + textDirection: TextDirection.ltr, + maxLines: 1, + )) + ..pushStyle( + ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic), + ) + ..addText(str); + + canvas.drawParagraph( + builder.build() + ..layout(ui.ParagraphConstraints(width: fontSize * str.length)), + offset); + } +} diff --git a/packages/idraw/lib/p07/s05.dart b/packages/idraw/lib/p07/s05.dart new file mode 100644 index 0000000..e5546a2 --- /dev/null +++ b/packages/idraw/lib/p07/s05.dart @@ -0,0 +1,81 @@ +import 'dart:async'; +import 'dart:ui' as ui; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:image/image.dart' as image; + +import '../components/coordinate_pro.dart'; + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + image.Image? _image; + + @override + void initState() { + super.initState(); + _loadImage(); + } + + void _loadImage() async { + _image = await loadImageFromAssets('assets/images/wy_300x200.jpg'); + setState(() {}); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, child: CustomPaint(painter: PaperPainter(_image))); + } + + //读取 assets 中的图片 + Future loadImageFromAssets(String path) async { + ByteData data = await rootBundle.load(path); + List bytes = data.buffer.asUint8List(); + return image.decodeImage(Uint8List.fromList(bytes)); + } +} + +class PaperPainter extends CustomPainter { + late Paint _paint; + + final double strokeWidth = 0.5; + final Color color = Colors.blue; + + final image.Image? imageSrc; + final Coordinate coordinate = Coordinate(); + + PaperPainter(this.imageSrc) { + _paint = Paint() + ..style = PaintingStyle.fill + ..strokeWidth = strokeWidth + ..color = color; + } + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + _drawImage(canvas); + } + + @override + bool shouldRepaint(PaperPainter oldDelegate) =>true; + + void _drawImage(Canvas canvas) { + if (imageSrc == null) return; + image.Pixel pixel = imageSrc!.getPixel(imageSrc!.width, 0); + var color = Color.fromARGB(pixel.a.toInt(),pixel.r.toInt(),pixel.g.toInt(),pixel.b.toInt()); + canvas.drawCircle(Offset.zero, 10, _paint..color = color); + } +} diff --git a/packages/idraw/lib/p07/s06.dart b/packages/idraw/lib/p07/s06.dart new file mode 100644 index 0000000..6c289a5 --- /dev/null +++ b/packages/idraw/lib/p07/s06.dart @@ -0,0 +1,110 @@ +import 'dart:async'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'package:image/image.dart' as image; + +import '../components/coordinate_pro.dart'; + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + image.Image? _image; + List balls = []; + double d = 20; //复刻的像素边长 + + @override + void initState() { + super.initState(); + _initBalls(); + } + + void _initBalls() async { + _image = await loadImageFromAssets('assets/images/icon_head.png'); + if (_image == null) return; + for (int i = 0; i < _image!.width; i++) { + for (int j = 0; j < _image!.height; j++) { + Ball ball = Ball(); + ball.x = i * d + d / 2; + ball.y = j * d + d / 2; + ball.r = d / 2; + image.Pixel pixel = _image!.getPixel(i, j); + var color = Color.fromARGB(pixel.a.toInt(),pixel.r.toInt(),pixel.g.toInt(),pixel.b.toInt()); + ball.color = color; + balls.add(ball); + } + } + setState(() {}); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(balls), + )); + } + + //读取 assets 中的图片 + Future loadImageFromAssets(String path) async { + ByteData data = await rootBundle.load(path); + List bytes = data.buffer.asUint8List(); + return image.decodeImage(Uint8List.fromList(bytes)); + } +} + +class PaperPainter extends CustomPainter { + late Paint _paint; + + final double strokeWidth = 0.5; + final Color color = Colors.blue; + + final List balls; + final Coordinate coordinate = Coordinate(); + + PaperPainter(this.balls) { + _paint = Paint() + ..style = PaintingStyle.fill + ..strokeWidth = strokeWidth + ..color = color; + } + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(-710, -1000); + _drawImage(canvas); + } + + void _drawImage(Canvas canvas) { + balls.forEach((Ball ball) { + canvas.drawCircle( + Offset(ball.x, ball.y), ball.r, _paint..color = ball.color); + }); + } + + + @override + bool shouldRepaint(PaperPainter oldDelegate) => true; + +} + +class Ball { + double x; //点位X + double y; //点位Y + Color color; //颜色 + double r; // 半径 + + Ball({this.x=0, this.y=0, this.color=Colors.black, this.r=5}); + +} diff --git a/packages/idraw/lib/p08/p08.dart b/packages/idraw/lib/p08/p08.dart new file mode 100644 index 0000000..dc0b986 --- /dev/null +++ b/packages/idraw/lib/p08/p08.dart @@ -0,0 +1 @@ +export 'p08_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p08/p08_page.dart b/packages/idraw/lib/p08/p08_page.dart new file mode 100644 index 0000000..a370abd --- /dev/null +++ b/packages/idraw/lib/p08/p08_page.dart @@ -0,0 +1,34 @@ +import 'package:flutter/material.dart'; + +import 'package:idraw/components/demo_shower.dart'; +import 's01.dart' as s1; +import 's02.dart' as s2; +import 's03.dart' as s3; +import 's04.dart' as s4; +import 's05.dart' as s5; +import 's06.dart' as s6; +import 's07.dart' as s7; +import 's08.dart' as s8; +import 's09.dart' as s9; + + +class P08Page extends StatelessWidget { + const P08Page({super.key}); + + @override + Widget build(BuildContext context) { + return const DemoShower( + demos: [ + s1.Paper(), + s2.Paper(), + s3.Paper(), + s4.Paper(), + s5.Paper(), + s6.Paper(), + s7.Paper(), + s8.Paper(), + s9.Paper(), + ], + ); + } +} diff --git a/packages/idraw/lib/p08/s01.dart b/packages/idraw/lib/p08/s01.dart new file mode 100644 index 0000000..3e4bfdf --- /dev/null +++ b/packages/idraw/lib/p08/s01.dart @@ -0,0 +1,113 @@ +import 'dart:math'; +import 'package:flutter/material.dart'; +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + Coordinate coordinate = Coordinate(); + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + canvas.translate(-100, 0); + + drawShaderLinear(canvas); + } + + void drawShaderLinear(Canvas canvas) { + var colors = [ + Color(0xFFF60C0C), + Color(0xFFF3B913), + Color(0xFFE7F716), + Color(0xFF3DF30B), + Color(0xFF0DF6EF), + Color(0xFF0829FB), + Color(0xFFB709F4), + ]; + + var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0]; + Paint paint = Paint(); + + paint + ..style = PaintingStyle.stroke + ..color = Colors.blue + ..strokeJoin = StrokeJoin.miter + ..strokeWidth = 50; + + paint.shader = ui.Gradient.linear( + Offset(0, 0), Offset(100, 0), colors, pos, TileMode.clamp); + canvas.drawLine( + Offset(0, 0), + Offset(200, 0), + paint, + ); + + canvas.translate(240, 0); + paint.shader = ui.Gradient.linear( + Offset(0, 0), Offset(100, 0), colors, pos, TileMode.repeated); + canvas.drawLine( + Offset(0, 0), + Offset(200, 0), + paint, + ); + + canvas.translate(-240*2.0, 0); + paint.shader = ui.Gradient.linear( + Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror); + canvas.drawLine( + Offset(0, 0), + Offset(200, 0), + paint, + ); + + canvas.translate(0, 100); + paint.shader = ui.Gradient.linear( + Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror,Matrix4.rotationZ(pi/6).storage); + canvas.drawLine( + Offset(0, 0), + Offset(200, 0), + paint, + ); + + canvas.translate(240, 0); + paint.shader = ui.Gradient.linear( + Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror,Matrix4.translationValues(20, 0, 0).storage); + canvas.drawLine( + Offset(0, 0), + Offset(200, 0), + paint, + ); + + canvas.translate(240, 0); + paint.shader = ui.Gradient.linear( + Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror,Matrix4.skewX(-pi/6).storage); + canvas.drawLine( + Offset(0, 0), + Offset(200, 0), + paint, + ); + + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s02.dart b/packages/idraw/lib/p08/s02.dart new file mode 100644 index 0000000..26636bb --- /dev/null +++ b/packages/idraw/lib/p08/s02.dart @@ -0,0 +1,111 @@ + +import 'package:flutter/material.dart'; + +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + Coordinate coordinate = Coordinate(); + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + drawShaderRadial(canvas); + } + + void drawShaderRadial(Canvas canvas) { + var colors = [ + Color(0xFFF60C0C), + Color(0xFFF3B913), + Color(0xFFE7F716), + Color(0xFF3DF30B), + Color(0xFF0DF6EF), + Color(0xFF0829FB), + Color(0xFFB709F4), + ]; + + var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0]; + Paint paint = Paint(); + paint + ..style = PaintingStyle.fill + ..color = Colors.blue; + + paint.shader = ui.Gradient.radial( + Offset(0, 0), 25, colors, pos, TileMode.clamp); + canvas.drawCircle( + Offset(0, 0), + 50, + paint, + ); + + canvas.translate(160, 0); + paint.shader = ui.Gradient.radial( + Offset(0, 0), 25, colors, pos, TileMode.repeated); + canvas.drawCircle( + Offset(0, 0), + 50, + paint, + ); + + canvas.translate(-160*2.0, 0); + paint.shader = ui.Gradient.radial( + Offset(0, 0), 25, colors, pos, TileMode.mirror); + canvas.drawCircle( + Offset(0, 0), + 50, + paint, + ); + + canvas.translate(0, 120); + paint.shader = ui.Gradient.radial(Offset(0, 0), 25, colors, + pos, TileMode.mirror, null, Offset(10, 10), 1); + canvas.drawCircle( + Offset.zero, + 50, + paint, + ); + + canvas.translate(160, 0); + paint.shader = ui.Gradient.radial(Offset(0, 0), 25, colors, + pos, TileMode.mirror, null, Offset(-10, -10), 3); + canvas.drawCircle( + Offset.zero, + 50, + paint, + ); + + + canvas.translate(160, 0); + paint.shader = ui.Gradient.radial(Offset(0, 0), 25, colors, + pos, TileMode.mirror, null, Offset(-10, -10), 0); + canvas.drawCircle( + Offset.zero, + 50, + paint, + ); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s03.dart b/packages/idraw/lib/p08/s03.dart new file mode 100644 index 0000000..c1b738d --- /dev/null +++ b/packages/idraw/lib/p08/s03.dart @@ -0,0 +1,92 @@ +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + Coordinate coordinate = Coordinate(); + + @override + void paint(Canvas canvas, Size size) { + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + drawShaderSweep(canvas); + } + + void drawShaderSweep(Canvas canvas) { + var colors = [ + Color(0xFFF60C0C), + Color(0xFFF3B913), + Color(0xFFE7F716), + Color(0xFF3DF30B), + Color(0xFF0DF6EF), + Color(0xFF0829FB), + Color(0xFFB709F4), + ]; + + var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0]; + Paint paint = Paint(); + paint + ..style = PaintingStyle.fill + ..color = Colors.blue; + + paint.shader = + ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.clamp, pi / 2, pi); + canvas.drawCircle( + Offset.zero, + 50, + paint, + ); + + canvas.translate(160, 0); + paint.shader = + ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.repeated, pi / 2, pi); + canvas.drawCircle( + Offset.zero, + 50, + paint, + ); + + canvas.translate(-160*2.0, 0); + paint.shader = + ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.mirror, pi / 2, pi); + canvas.drawCircle( + Offset.zero, + 50, + paint, + ); + + canvas.translate(-160*2.0, 0); + paint.shader = + ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.mirror, pi / 2, pi); + canvas.drawCircle( + Offset.zero, + 50, + paint, + ); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s04.dart b/packages/idraw/lib/p08/s04.dart new file mode 100644 index 0000000..324b677 --- /dev/null +++ b/packages/idraw/lib/p08/s04.dart @@ -0,0 +1,98 @@ +import 'dart:async'; +import 'dart:typed_data'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'dart:ui' as ui; + +import 'package:flutter/services.dart'; + +import '../components/coordinate_pro.dart'; + + + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + ui.Image? _img; + bool get hasImage => _img != null; + + @override + void initState() { + super.initState(); + _loadImage(); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: ImageShaderPainter(_img), + ), + ); + } + + void _loadImage() async { + _img = await loadImageFromAssets('assets/images/wy_200x300.jpg'); + setState(() {}); + } + + //读取 assets 中的图片 + Future? loadImageFromAssets(String path) async { + ByteData data = await rootBundle.load(path); + return decodeImageFromList(data.buffer.asUint8List()); + } +} + +class ImageShaderPainter extends CustomPainter { + ui.Image? img; + + ImageShaderPainter(this.img); + Coordinate coordinate = Coordinate(); + @override + void paint(Canvas canvas, Size size) { + if(img == null) return; + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + + Paint paint = Paint()..shader = ImageShader( + img!, + TileMode.repeated, + TileMode.repeated, + Float64List.fromList([ + 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1, + ])); + + canvas.drawCircle(Offset(100, 100), 50, paint); + + canvas.translate(120, 0); + + canvas.drawCircle( + Offset(100, 100), + 50, + paint + ..strokeWidth = 10 + ..style = PaintingStyle.stroke); + + canvas.translate(-120*2.0, 0); + + canvas.drawLine( + Offset(100 , 50), + Offset(100 , 50 + 100.0), + paint + ..strokeWidth = 30 + ..style = PaintingStyle.stroke); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s05.dart b/packages/idraw/lib/p08/s05.dart new file mode 100644 index 0000000..cc4f575 --- /dev/null +++ b/packages/idraw/lib/p08/s05.dart @@ -0,0 +1,98 @@ +import 'dart:async'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + 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); + return decodeImageFromList(data.buffer.asUint8List()); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(_img), + )); + } +} + +class PaperPainter extends CustomPainter { + ui.Image? img; + Coordinate coordinate = Coordinate(); + + PaperPainter(this.img); + + @override + void paint(Canvas canvas, Size size) { + if (img == null) return; + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + canvas.translate(-120 * 2.0 - imgW / 4, -imgH / 4); + drawColorFilter(canvas); + } + + double get imgW => img!.width.toDouble(); + + double get imgH => img!.height.toDouble(); + + void drawColorFilter(Canvas canvas) { + var paint = Paint(); + paint.colorFilter = ColorFilter.linearToSrgbGamma(); + _drawImage(canvas, paint); + + paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.modulate); + _drawImage(canvas, paint); + + paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.difference); + _drawImage(canvas, paint); + + paint.colorFilter = ColorFilter.mode(Colors.blue, BlendMode.plus); + _drawImage(canvas, paint); + + paint.colorFilter = ColorFilter.mode(Colors.blue, BlendMode.lighten); + _drawImage(canvas, paint); + } + + void _drawImage(Canvas canvas, Paint paint) { + canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH), + Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint); + canvas.translate(120, 0); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s06.dart b/packages/idraw/lib/p08/s06.dart new file mode 100644 index 0000000..570fb86 --- /dev/null +++ b/packages/idraw/lib/p08/s06.dart @@ -0,0 +1,139 @@ +import 'dart:async'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + 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); + return decodeImageFromList(data.buffer.asUint8List()); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(_img), + )); + } +} + +class PaperPainter extends CustomPainter { + ui.Image? img; + Coordinate coordinate = Coordinate(); + + PaperPainter(this.img); + + @override + void paint(Canvas canvas, Size size) { + if (img == null) return; + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + canvas.translate(-120*2 - imgW / 4, -imgH / 4); + drawColorFilter(canvas); + } + + double get imgW => img!.width.toDouble(); + + double get imgH => img!.height.toDouble(); + + void drawColorFilter(Canvas canvas) { + var paint = Paint(); + + _drawImage(canvas, paint); + + const ColorFilter carveCarve = ColorFilter.matrix([ + -1, 0, 0, 0, 255, + 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, + 0, 0, 0, 1, 0, + ]); + paint.colorFilter = carveCarve; + // _drawImage(canvas, paint); + + const ColorFilter negative = ColorFilter.matrix([ + -1, 0, 0, 0, 255, + 0, -1, 0, 0, 255, + 0, 0, -1,0, 255, + 0, 0, 0, 1, 0 + ]); + paint.colorFilter = negative; + // _drawImage(canvas, paint); + + const ColorFilter sepia = ColorFilter.matrix([ + 0.393, 0.769, 0.189, 0, 0, + 0.349, 0.686, 0.168, 0, 0, + 0.272, 0.534, 0.131, 0 , 0, + 0, 0, 0, 1, 0, + ]); + _drawImage(canvas, paint..colorFilter=sepia); + + const ColorFilter greyscale = ColorFilter.matrix([ + 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); + + const n2 = -126.0; + const ColorFilter darken = ColorFilter.matrix([ + 1,0,0,0,n2, + 0,1,0,0,n2, + 0,0,1,0,n2, + 0,0,0,1,0 + ]); + _drawImage(canvas, paint..colorFilter=darken); + + } + + void _drawImage(Canvas canvas, Paint paint) { + canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH), + Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint); + canvas.translate(120, 0); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s07.dart b/packages/idraw/lib/p08/s07.dart new file mode 100644 index 0000000..bd577d8 --- /dev/null +++ b/packages/idraw/lib/p08/s07.dart @@ -0,0 +1,102 @@ +import 'dart:async'; + +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + 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); + return decodeImageFromList(data.buffer.asUint8List()); + } + + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(_img), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + ui.Image? img; + + PaperPainter(this.img); + Coordinate coordinate = Coordinate(); + + @override + void paint(Canvas canvas, Size size) { + if (img == null) return; + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + canvas.translate(-120*2.5 - imgW / 4, -imgH / 4); + drawMaskFilter(canvas); + } + + double get imgW => img!.width.toDouble(); + + double get imgH => img!.height.toDouble(); + + void drawMaskFilter(Canvas canvas) { + var paint = Paint(); + _drawImage(canvas, paint); + + paint.maskFilter = MaskFilter.blur(BlurStyle.inner, 20); + _drawImage(canvas, paint); + + paint.maskFilter = MaskFilter.blur(BlurStyle.outer, 3); + _drawImage(canvas, paint); + + paint.maskFilter = MaskFilter.blur(BlurStyle.solid, 3); + _drawImage(canvas, paint); + + paint.maskFilter = MaskFilter.blur(BlurStyle.normal, 3); + _drawImage(canvas, paint); + + paint.maskFilter = MaskFilter.blur(BlurStyle.normal, 5); + _drawImage(canvas, paint); + } + + void _drawImage(Canvas canvas, Paint paint) { + canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH), + Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint); + canvas.translate(120, 0); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s08.dart b/packages/idraw/lib/p08/s08.dart new file mode 100644 index 0000000..d34e004 --- /dev/null +++ b/packages/idraw/lib/p08/s08.dart @@ -0,0 +1,100 @@ +import 'dart:async'; +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + 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); + return decodeImageFromList(data.buffer.asUint8List()); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(_img), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + ui.Image? img; + + PaperPainter(this.img); + + Coordinate coordinate = Coordinate(); + + @override + void paint(Canvas canvas, Size size) { + if (img == null) return; + coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + canvas.translate(-120 * 2.0 - imgW / 4, -imgH / 4); + drawImageFilter(canvas); + } + + double get imgW => img!.width.toDouble(); + + double get imgH => img!.height.toDouble(); + + void drawImageFilter(Canvas canvas) { + var paint = Paint(); + _drawImage(canvas, paint); + + paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.4, sigmaY: 0.4); + _drawImage(canvas, paint); + + paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.6, sigmaY: 0.6); + _drawImage(canvas, paint); + + paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.8, sigmaY: 0.8); + _drawImage(canvas, paint); + + paint.imageFilter = ui.ImageFilter.matrix(Matrix4.skew(pi / 8, 0).storage); + _drawImage(canvas, paint); + } + + void _drawImage(Canvas canvas, Paint paint) { + canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH), + Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint); + canvas.translate(120, 0); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p08/s09.dart b/packages/idraw/lib/p08/s09.dart new file mode 100644 index 0000000..0a41a58 --- /dev/null +++ b/packages/idraw/lib/p08/s09.dart @@ -0,0 +1,99 @@ +import 'dart:async'; +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import 'dart:ui' as ui; + +import '../components/coordinate_pro.dart'; + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + const Paper({super.key}); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State { + 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); + return decodeImageFromList(data.buffer.asUint8List()); + } + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: CustomPaint( + painter: PaperPainter(_img), + ), + ); + } +} + +class PaperPainter extends CustomPainter { + ui.Image? img; + + PaperPainter(this.img); + + Coordinate coordinate = Coordinate(); + + @override + void paint(Canvas canvas, Size size) { + if (img == null) return; + // coordinate.paint(canvas, size); + canvas.translate(size.width / 2, size.height / 2); + canvas.translate(-120 * 1.5 - imgW / 4, -imgH / 4); + drawFilterQuality(canvas); + } + + double get imgW => img!.width.toDouble(); + + double get imgH => img!.height.toDouble(); + + void drawFilterQuality(Canvas canvas) { + var paint = Paint(); + paint.imageFilter = ui.ImageFilter.blur(sigmaX: 0.6, sigmaY: 0.6); + paint.maskFilter = MaskFilter.blur(BlurStyle.inner, 20); + paint.colorFilter = ColorFilter.mode(Colors.yellow, BlendMode.modulate); + paint.filterQuality = FilterQuality.none; + _drawImage(canvas, paint); + paint.filterQuality = FilterQuality.low; + _drawImage(canvas, paint); + paint.filterQuality = FilterQuality.medium; + _drawImage(canvas, paint); + paint.filterQuality = FilterQuality.high; + _drawImage(canvas, paint); + } + + void _drawImage(Canvas canvas, Paint paint) { + canvas.drawImageRect(img!, Rect.fromLTRB(0, 0, imgW, imgH), + Rect.fromLTRB(0, 0, imgW / 2, imgH / 2), paint); + canvas.translate(120, 0); + } + + @override + bool shouldRepaint(CustomPainter oldDelegate) => true; +} diff --git a/packages/idraw/lib/p09/p09.dart b/packages/idraw/lib/p09/p09.dart new file mode 100644 index 0000000..4b0886a --- /dev/null +++ b/packages/idraw/lib/p09/p09.dart @@ -0,0 +1 @@ +export 'p09_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p09/p09_page.dart b/packages/idraw/lib/p09/p09_page.dart new file mode 100644 index 0000000..2e55309 --- /dev/null +++ b/packages/idraw/lib/p09/p09_page.dart @@ -0,0 +1,21 @@ +import 'package:flutter/material.dart'; + +import 'package:idraw/components/demo_shower.dart'; +import 's01.dart' as s1; +import 's02.dart' as s2; +import 's03.dart' as s3; + +class P09Page extends StatelessWidget { + const P09Page({super.key}); + + @override + Widget build(BuildContext context) { + return const DemoShower( + demos: [ + s1.Paper(), + s2.Paper(), + s3.Paper(), + ], + ); + } +} diff --git a/packages/idraw/lib/p09/s01.dart b/packages/idraw/lib/p09/s01.dart new file mode 100644 index 0000000..9044b51 --- /dev/null +++ b/packages/idraw/lib/p09/s01.dart @@ -0,0 +1,60 @@ + +import 'package:flutter/material.dart'; + + + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Row( + children: [ + Expanded( + child: CustomPaint( + // painter: BgPainter(), // 背景 + foregroundPainter: BgPainter(Colors.blue.withOpacity(0.9)), // 前景 + child: + Text( + "张风捷特烈", + style: TextStyle(color: Colors.black, fontSize: 20), + ), + ), + ), + Expanded( + child: CustomPaint( + painter: BgPainter(Colors.red), // 背景 + // foregroundPainter: BgPainter(), // 前景 + child: + Text( + "张风捷特烈", + style: TextStyle(color: Colors.white, fontSize: 20), + ), + ), + ), + ], + ); + } +} + +class BgPainter extends CustomPainter { + final Color color; + + BgPainter(this.color); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero&size); + canvas.drawPaint(Paint()..color = color); + } + + @override + bool shouldRepaint(covariant CustomPainter oldDelegate) { + return false; + } +} diff --git a/packages/idraw/lib/p09/s02.dart b/packages/idraw/lib/p09/s02.dart new file mode 100644 index 0000000..11561ee --- /dev/null +++ b/packages/idraw/lib/p09/s02.dart @@ -0,0 +1,65 @@ +import 'dart:ui'; +import 'package:flutter/material.dart'; + +import '../components/coordinate_pro.dart'; +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Center(child: _buildChild()); + } + + Widget _buildChild() { + final Widget just = CustomPaint( + painter: BgPainter(), // 背景 + ); + + final Widget withSize = CustomPaint( + size: Size(100,100), + painter: BgPainter(), // 背景 + ); + + + final Widget withLayoutBuilder = LayoutBuilder( + builder: _builderByLayout, + ); + + + final Widget withChild = CustomPaint( + painter: BgPainter(), + child: Container( + width: 100, + height: 100, + ), // 背景 + ); + + return withChild; + } + + Widget _builderByLayout(BuildContext context, BoxConstraints constraints) { + return CustomPaint( + size: Size(constraints.maxWidth, constraints.maxHeight), + painter: BgPainter(), // 背景 + ); + } +} + +class BgPainter extends CustomPainter { + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero&size); + + canvas.drawRect( + Rect.fromPoints(Offset.zero, Offset(size.width, size.height)), + Paint()..color = Colors.red); + } + + @override + bool shouldRepaint(covariant CustomPainter oldDelegate) => false; +} + diff --git a/packages/idraw/lib/p09/s03.dart b/packages/idraw/lib/p09/s03.dart new file mode 100644 index 0000000..244576d --- /dev/null +++ b/packages/idraw/lib/p09/s03.dart @@ -0,0 +1,52 @@ +import 'dart:async'; +import 'dart:math'; +import 'dart:ui' as ui; +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; + +import '../components/coordinate_pro.dart'; + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatelessWidget{ + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return CustomPaint( + size: Size(100,100), + painter: PicMan(), // 背景 + ); + } + +} + +class PicMan extends CustomPainter { + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + canvas.translate(size.width/2, size.height/2); + _drawArcDetail(canvas); + } + + void _drawArcDetail(Canvas canvas) { + var rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 100); + Paint _paint = Paint(); + + + var a = pi / 8; + canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color=Colors.yellowAccent); + canvas.translate(40, 0); + + canvas.translate(40, 0); + canvas.drawCircle(Offset(0, 0), 6, _paint); + canvas.translate(25, 0); + canvas.drawCircle(Offset(0, 0), 6, _paint); + + } + + @override + bool shouldRepaint(covariant CustomPainter oldDelegate) => false; +} \ No newline at end of file diff --git a/packages/idraw/lib/p10/p10.dart b/packages/idraw/lib/p10/p10.dart new file mode 100644 index 0000000..4a07e1a --- /dev/null +++ b/packages/idraw/lib/p10/p10.dart @@ -0,0 +1 @@ +export 'p10_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p10/p10_page.dart b/packages/idraw/lib/p10/p10_page.dart new file mode 100644 index 0000000..683a030 --- /dev/null +++ b/packages/idraw/lib/p10/p10_page.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; + +import 'package:idraw/components/demo_shower.dart'; +import 's01.dart' as s1; +import 's02.dart' as s2; +import 's03.dart' as s3; +import 's04.dart' as s4; +import 's05.dart' as s5; + +class P10Page extends StatelessWidget { + const P10Page({super.key}); + + @override + Widget build(BuildContext context) { + return const DemoShower( + demos: [ + s1.Paper(), + s2.Paper(), + s3.Paper(), + s4.Paper(), + s5.Paper(), + ], + ); + } +} diff --git a/packages/idraw/lib/p10/s01.dart b/packages/idraw/lib/p10/s01.dart new file mode 100644 index 0000000..14354fe --- /dev/null +++ b/packages/idraw/lib/p10/s01.dart @@ -0,0 +1,71 @@ + +import 'dart:math'; + +import 'package:flutter/material.dart'; + +import '../components/coordinate_pro.dart'; + + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 + +class Paper extends StatefulWidget { + final Color color; + final double angle; + const Paper({Key? key, this.color = Colors.lightBlue, this.angle = 30 }) : super(key: key); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State{ + + @override + Widget build(BuildContext context) { + return Center( + child: CustomPaint( + size: Size(100, 100), + painter: PicManPainter(color: widget.color, angle : widget.angle), // 背景 + ), + ); + } +} + +class PicManPainter extends CustomPainter { + final Color color; // 颜色 + final double angle; // 角度(与x轴交角 角度制) + + Paint _paint = Paint(); + + PicManPainter({this.color = Colors.yellowAccent, this.angle = 30}); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + final double radius = size.width / 2; + canvas.translate(radius, size.height / 2); + + _drawHead(canvas, size); + _drawEye(canvas, radius); + } + + //绘制头 + void _drawHead(Canvas canvas, Size size) { + var rect = Rect.fromCenter( + center: Offset(0, 0), height: size.width, width: size.height); + var a = angle / 180 * pi; + canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color); + } + + //绘制眼睛 + void _drawEye(Canvas canvas, double radius) { + canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12, + _paint..color = Colors.white); + } + + @override + bool shouldRepaint(covariant PicManPainter oldDelegate) => + oldDelegate.color != color || oldDelegate.angle != angle; +} diff --git a/packages/idraw/lib/p10/s02.dart b/packages/idraw/lib/p10/s02.dart new file mode 100644 index 0000000..4e386a8 --- /dev/null +++ b/packages/idraw/lib/p10/s02.dart @@ -0,0 +1,87 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/11/2 +/// contact me by email 1981462002@qq.com +/// 说明: +/// + +class Paper extends StatefulWidget { + final Color color; + + const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State with SingleTickerProviderStateMixin { + late AnimationController _controller; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + lowerBound: 10, + upperBound: 40, + duration: const Duration(seconds: 1), + vsync: this, + )..repeat(reverse: true); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Center( + child: CustomPaint( + size: Size(100, 100), + painter: PicManPainter(color: widget.color, angle: _controller), // 背景 + ), + ); + } +} + +class PicManPainter extends CustomPainter { + + final Animation angle; // 角度(与x轴交角 角度制) + final Color color; // 颜色 + Paint _paint = Paint(); + + PicManPainter({this.color = Colors.yellowAccent, required this.angle}) + : super(repaint: angle); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + final double radius = size.width / 2; + canvas.translate(radius, size.height / 2); + _drawHead(canvas, size); + _drawEye(canvas, radius); + } + + //绘制头 + void _drawHead(Canvas canvas, Size size) { + var rect = Rect.fromCenter( + center: Offset(0, 0), height: size.width, width: size.height); + var a = angle.value / 180 * pi; + canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color); + } + + //绘制眼睛 + void _drawEye(Canvas canvas, double radius) { + canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12, + _paint..color = Colors.white); + } + + @override + bool shouldRepaint(covariant PicManPainter oldDelegate) { + print('-----shouldRepaint---------'); + return true; + } +} diff --git a/packages/idraw/lib/p10/s03.dart b/packages/idraw/lib/p10/s03.dart new file mode 100644 index 0000000..a9df87a --- /dev/null +++ b/packages/idraw/lib/p10/s03.dart @@ -0,0 +1,94 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/11/2 +/// contact me by email 1981462002@qq.com +/// 说明: +/// + +class Paper extends StatefulWidget { + final Color color; + + const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State with SingleTickerProviderStateMixin { + late AnimationController _controller; + late Animation _colorCtrl; + late Animation _angleCtrl; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: const Duration(seconds: 1), + vsync: this, + ); + + _angleCtrl = _controller.drive(Tween(begin: 10, end: 40)); + + _colorCtrl = + ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller); + + _controller.repeat(reverse: true); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Center( + child: CustomPaint( + size: Size(100, 100), + painter: PicManPainter( + color: _colorCtrl, angle: _angleCtrl, repaint: _controller), + ), + ); + } +} + +class PicManPainter extends CustomPainter { + final Animation repaint; + final Animation angle; + final Animation color; + + Paint _paint = Paint(); + + PicManPainter({ required this.repaint,required this.color,required this.angle}) + : super(repaint: repaint); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + final double radius = size.width / 2; + canvas.translate(radius, size.height / 2); + _drawHead(canvas, size); + _drawEye(canvas, radius); + } + + //绘制头 + void _drawHead(Canvas canvas, Size size) { + var rect = Rect.fromCenter( + center: Offset(0, 0), height: size.width, width: size.height); + var a = angle.value / 180 * pi; + canvas.drawArc( + rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color.value??Colors.black); + } + + //绘制眼睛 + void _drawEye(Canvas canvas, double radius) { + canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12, + _paint..color = Colors.white); + } + + @override + bool shouldRepaint(covariant PicManPainter oldDelegate)=> oldDelegate.repaint != repaint; +} diff --git a/packages/idraw/lib/p10/s04.dart b/packages/idraw/lib/p10/s04.dart new file mode 100644 index 0000000..b3693e7 --- /dev/null +++ b/packages/idraw/lib/p10/s04.dart @@ -0,0 +1,82 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/11/2 +/// contact me by email 1981462002@qq.com +/// 说明: +/// + +class Paper extends StatefulWidget { + final Color color; + + const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State with SingleTickerProviderStateMixin { + late AnimationController _controller; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: const Duration(seconds: 1), + vsync: this, + ); + + _controller.repeat(reverse: true); + } + + @override + Widget build(BuildContext context) { + return Center( + child: CustomPaint( + size: Size(100, 100), + painter: PicManPainter(_controller), // 背景 + ), + ); + } +} + +class PicManPainter extends CustomPainter { + final Animation repaint; // 角度(与x轴交角 角度制) + + final ColorTween colorTween = ColorTween(begin: Colors.blue, end: Colors.red); + final Tween angleTween = Tween(begin: 10.0, end: 40.0); + + Paint _paint = Paint(); + + PicManPainter(this.repaint) + : super(repaint: repaint); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + final double radius = size.width / 2; + canvas.translate(radius, size.height / 2); + _drawHead(canvas, size); + _drawEye(canvas, radius); + } + + //绘制头 + void _drawHead(Canvas canvas, Size size) { + var rect = Rect.fromCenter( + center: Offset(0, 0), height: size.width, width: size.height); + double a = angleTween.evaluate(repaint) / 180 * pi; + canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, + _paint..color = colorTween.evaluate(repaint)??Colors.black); + } + + //绘制眼睛 + void _drawEye(Canvas canvas, double radius) { + canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12, + _paint..color = Colors.white); + } + + @override + bool shouldRepaint(covariant PicManPainter oldDelegate) => + oldDelegate.repaint != repaint; +} diff --git a/packages/idraw/lib/p10/s05.dart b/packages/idraw/lib/p10/s05.dart new file mode 100644 index 0000000..fbb99f9 --- /dev/null +++ b/packages/idraw/lib/p10/s05.dart @@ -0,0 +1,100 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/11/2 +/// contact me by email 1981462002@qq.com +/// 说明: +/// + +class Paper extends StatefulWidget { + final Color color; + + const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State with SingleTickerProviderStateMixin { + late AnimationController _controller; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: const Duration(seconds: 1), + vsync: this, + ); + + _controller.repeat(reverse: true); + } + + @override + Widget build(BuildContext context) { + return Center( + child: CustomPaint( + size: Size(100, 100), painter: PicManPainter(_controller), // 背景 + ), + ); + } +} + +class PicManPainter extends CustomPainter { + final Animation repaint; + + // 创建 Tween + final ColorDoubleTween tween = ColorDoubleTween( + begin: ColorDouble(color: Colors.blue, value: 10), + end: ColorDouble(color: Colors.red, value: 10)); + + Paint _paint = Paint(); + + PicManPainter(this.repaint) : super(repaint: repaint); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + final double radius = size.width / 2; + canvas.translate(radius, size.height / 2); + _drawHead(canvas, size); + _drawEye(canvas, radius); + } + + //绘制头 + void _drawHead(Canvas canvas, Size size) { + var rect = Rect.fromCenter( + center: Offset(0, 0), height: size.width, width: size.height); + var a = tween.evaluate(repaint).value / 180 * pi; + canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, + _paint..color = tween.evaluate(repaint).color ?? Colors.black); + } + + //绘制眼睛 + void _drawEye(Canvas canvas, double radius) { + canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12, + _paint..color = Colors.white); + } + + @override + bool shouldRepaint(covariant PicManPainter oldDelegate) => + oldDelegate.repaint != repaint; +} + +class ColorDouble { + final Color? color; + final double value; + + ColorDouble({this.color = Colors.blue, this.value = 0}); +} + +class ColorDoubleTween extends Tween { + ColorDoubleTween({required ColorDouble begin, required ColorDouble end}) + : super(begin: begin, end: end); + + @override + ColorDouble lerp(double t) => ColorDouble( + color: Color.lerp(begin?.color, end?.color, t), + value: (begin!.value + (end!.value - begin!.value) * t), + ); +} diff --git a/packages/idraw/lib/p11/p11.dart b/packages/idraw/lib/p11/p11.dart new file mode 100644 index 0000000..4f616e1 --- /dev/null +++ b/packages/idraw/lib/p11/p11.dart @@ -0,0 +1 @@ +export 'p11_page.dart'; \ No newline at end of file diff --git a/packages/idraw/lib/p11/p11_page.dart b/packages/idraw/lib/p11/p11_page.dart new file mode 100644 index 0000000..ab703a2 --- /dev/null +++ b/packages/idraw/lib/p11/p11_page.dart @@ -0,0 +1,23 @@ +import 'package:flutter/material.dart'; + +import 'package:idraw/components/demo_shower.dart'; +import 's01.dart' as s1; +import 's02.dart' as s2; +import 's03.dart' as s3; +import 's04.dart' as s4; + +class P11Page extends StatelessWidget { + const P11Page({super.key}); + + @override + Widget build(BuildContext context) { + return const DemoShower( + demos: [ + s1.Paper(), + s2.Paper(), + s3.Paper(), + s4.Paper(), + ], + ); + } +} diff --git a/packages/idraw/lib/p11/s01.dart b/packages/idraw/lib/p11/s01.dart new file mode 100644 index 0000000..c81496a --- /dev/null +++ b/packages/idraw/lib/p11/s01.dart @@ -0,0 +1,121 @@ + +import 'dart:math'; + +import 'package:flutter/material.dart'; + +import '../components/coordinate_pro.dart'; + + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + return Center( + child: CurveBox(curve: const Cubic(1, -0.06, 0.1, 1.2),), + ); + } +} + + +class CurveBox extends StatefulWidget { + final Color color; + final Curve curve; + + CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear}) + : super(key: key); + + @override + _CurveBoxState createState() => _CurveBoxState(); +} + +class _CurveBoxState extends State + with SingleTickerProviderStateMixin { + late AnimationController _controller; + late Animation _angleAnimation; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: const Duration(seconds: 3), + vsync: this, + ); + _angleAnimation = CurveTween(curve: widget.curve).animate(_controller); + _controller.repeat(); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return CustomPaint( + size: Size(100, 100), + painter: CurveBoxPainter(_controller, _angleAnimation), // 背景 + ); + } +} + +class CurveBoxPainter extends CustomPainter { + final Animation repaint; // + Animation angleAnimation; + + Paint _paint = Paint(); + + CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {} + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); + canvas.translate(size.width / 2, size.height / 2); + _drawRing(canvas, size); + _drawRedCircle(canvas, size); + _drawGreenCircle(canvas, size); + } + + //绘制环 + void _drawRing(Canvas canvas, Size size) { + final double strokeWidth = 5; + _paint + ..color = Colors.blue + ..style = PaintingStyle.stroke + ..strokeWidth = strokeWidth; + canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint); + } + + // 绘制红球 + void _drawRedCircle(Canvas canvas, Size size) { + canvas.save(); + canvas.rotate(angleAnimation.value * 2 * pi); + _paint + ..color = Colors.red + ..style = PaintingStyle.fill; + canvas.drawCircle( + Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint); + canvas.restore(); + } + + // 绘制绿球 + void _drawGreenCircle(Canvas canvas, Size size) { + canvas.save(); + canvas.translate(0,angleAnimation.value * (size.height-10)); + _paint + ..color = Colors.green + ..style = PaintingStyle.fill; + canvas.drawCircle( + Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint); + canvas.restore(); + } + + @override + bool shouldRepaint(covariant CurveBoxPainter oldDelegate) => + oldDelegate.repaint != repaint; +} diff --git a/packages/idraw/lib/p11/s02.dart b/packages/idraw/lib/p11/s02.dart new file mode 100644 index 0000000..5ce7adf --- /dev/null +++ b/packages/idraw/lib/p11/s02.dart @@ -0,0 +1,175 @@ + +import 'dart:math'; + +import 'package:flutter/material.dart'; + +import '../components/coordinate_pro.dart'; + + + +/// create by 张风捷特烈 on 2020-03-19 +/// contact me by email 1981462002@qq.com +/// 说明: 纸 +class Paper extends StatelessWidget { + const Paper({super.key}); + + @override + Widget build(BuildContext context) { + final curvesMap = { + "linear": Curves.linear, + "decelerate": Curves.decelerate, + "fastLinearToSlowEaseIn": Curves.fastLinearToSlowEaseIn, + "ease": Curves.ease, + "easeIn": Curves.easeIn, + "easeInToLinear": Curves.easeInToLinear, + "easeInSine": Curves.easeInSine, + "easeInQuad": Curves.easeInCubic, + "easeInCubic": Curves.easeInCubic, + "easeInQuart": Curves.easeInQuart, + "easeInQuint": Curves.easeInQuint, + "easeInExpo": Curves.easeInExpo, + "easeInCirc": Curves.easeInCirc, + "easeInBack": Curves.easeInBack, + "easeOut": Curves.easeOut, + "linearToEaseOut": Curves.linearToEaseOut, + "easeOutSine": Curves.easeOutSine, + "easeOutQuad": Curves.easeOutQuad, + "easeOutCubic": Curves.easeOutCubic, + "easeOutQuart": Curves.easeOutQuart, + "easeOutQuint": Curves.easeOutQuint, + + // "easeOutExpo": Curves.easeOutExpo, + // "easeOutCirc": Curves.easeOutCirc, + // "easeOutBack": Curves.easeOutBack, + // "easeInOut": Curves.easeInOut, + // "easeInOutSine": Curves.easeInOutSine, + // "easeInOutQuad": Curves.easeInOutQuad, + // "easeInOutCubic": Curves.easeInOutCubic, + // "easeInOutQuart": Curves.easeInOutQuart, + // "easeInOutQuint": Curves.easeInOutQuint, + // "easeInOutExpo": Curves.easeInOutExpo, + // "easeInOutCirc": Curves.easeInOutCirc, + // "easeInOutBack": Curves.easeInOutBack, + // "fastOutSlowIn": Curves.fastOutSlowIn, + // "slowMiddle": Curves.slowMiddle, + // "bounceIn": Curves.bounceIn, + // "bounceOut": Curves.bounceOut, + // "bounceInOut": Curves.bounceInOut, + // "elasticIn": Curves.elasticIn, + // "elasticInOut": Curves.elasticInOut, + // "elasticOut": Curves.elasticOut, + }; + return Center( + child: + Wrap( + runSpacing: 20, + children: curvesMap.keys.map((e) => Column( + mainAxisSize: MainAxisSize.min, + children: [ + CurveBox(curve: curvesMap[e]!,), + SizedBox(height: 3,), + Text(e,style: TextStyle(fontSize: 10),) + ], + )).toList(), + ), + ); + } +} + +class CurveBox extends StatefulWidget { + final Color color; + final Curve curve; + + CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear}) + : super(key: key); + + @override + _CurveBoxState createState() => _CurveBoxState(); +} + +class _CurveBoxState extends State + with SingleTickerProviderStateMixin { + late AnimationController _controller; + late Animation _angleAnimation; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: const Duration(seconds: 3), + vsync: this, + ); + _angleAnimation = CurveTween(curve: widget.curve).animate(_controller); + _controller.repeat(); + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return CustomPaint( + size: Size(100, 100), + painter: CurveBoxPainter(_controller, _angleAnimation), // 背景 + ); + } +} + +class CurveBoxPainter extends CustomPainter { + final Animation repaint; // + Animation angleAnimation; + + Paint _paint = Paint(); + + CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {} + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); + canvas.translate(size.width / 2, size.height / 2); + _drawRing(canvas, size); + _drawRedCircle(canvas, size); + _drawGreenCircle(canvas, size); + } + + //绘制环 + void _drawRing(Canvas canvas, Size size) { + final double strokeWidth = 5; + _paint + ..color = Colors.blue + ..style = PaintingStyle.stroke + ..strokeWidth = strokeWidth; + canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint); + } + + // 绘制红球 + void _drawRedCircle(Canvas canvas, Size size) { + canvas.save(); + canvas.rotate(angleAnimation.value * 2 * pi); + _paint + ..color = Colors.red + ..style = PaintingStyle.fill; + canvas.drawCircle( + Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint); + canvas.restore(); + } + + // 绘制绿球 + void _drawGreenCircle(Canvas canvas, Size size) { + canvas.save(); + canvas.translate(0,angleAnimation.value * (size.height-10)); + _paint + ..color = Colors.green + ..style = PaintingStyle.fill; + canvas.drawCircle( + Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint); + canvas.restore(); + } + + @override + bool shouldRepaint(covariant CurveBoxPainter oldDelegate) => + oldDelegate.repaint != repaint; +} diff --git a/packages/idraw/lib/p11/s03.dart b/packages/idraw/lib/p11/s03.dart new file mode 100644 index 0000000..31c8125 --- /dev/null +++ b/packages/idraw/lib/p11/s03.dart @@ -0,0 +1,87 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/11/2 +/// contact me by email 1981462002@qq.com +/// 说明: +/// + +class Paper extends StatefulWidget { + final Color color; + + const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State with SingleTickerProviderStateMixin { + late AnimationController _controller; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + lowerBound: 10, + upperBound: 40, + duration: const Duration(seconds: 1), + vsync: this, + ); + + // _controller.forward(); + // _controller.reverse(from: 40); + // _controller.repeat(); + // _controller.repeat(reverse: true); + _controller.fling(); + } + + @override + Widget build(BuildContext context) { + return Center( + child: CustomPaint( + size: Size(100, 100), + painter: PicManPainter(color: widget.color, angle: _controller), // 背景 + ), + ); + } +} + +class PicManPainter extends CustomPainter { + + final Animation angle; // 角度(与x轴交角 角度制) + final Color color; // 颜色 + Paint _paint = Paint(); + + PicManPainter({this.color = Colors.yellowAccent,required this.angle}) + : super(repaint: angle); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + final double radius = size.width / 2; + canvas.translate(radius, size.height / 2); + _drawHead(canvas, size); + _drawEye(canvas, radius); + } + + //绘制头 + void _drawHead(Canvas canvas, Size size) { + var rect = Rect.fromCenter( + center: Offset(0, 0), height: size.width, width: size.height); + var a = angle.value / 180 * pi; + canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color); + } + + //绘制眼睛 + void _drawEye(Canvas canvas, double radius) { + canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12, + _paint..color = Colors.white); + } + + @override + bool shouldRepaint(covariant PicManPainter oldDelegate) { + print('-----shouldRepaint---------'); + return true; + } +} diff --git a/packages/idraw/lib/p11/s04.dart b/packages/idraw/lib/p11/s04.dart new file mode 100644 index 0000000..5081600 --- /dev/null +++ b/packages/idraw/lib/p11/s04.dart @@ -0,0 +1,105 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/11/2 +/// contact me by email 1981462002@qq.com +/// 说明: +/// + +class Paper extends StatefulWidget { + final Color color; + + const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key); + + @override + _PaperState createState() => _PaperState(); +} + +class _PaperState extends State with SingleTickerProviderStateMixin { + late AnimationController _controller; + final ValueNotifier _color = ValueNotifier(Colors.blue); + + @override + void initState() { + super.initState(); + _controller = AnimationController( + lowerBound: 10, + upperBound: 40, + duration: const Duration(seconds: 1), + vsync: this, + ); + _controller.addStatusListener(_statusListen); + _controller.forward(); + // _controller.repeat(reverse: true); + } + + @override + Widget build(BuildContext context) { + return Center( + child: CustomPaint( + size: Size(100, 100), + painter: PicManPainter( + color: _color, + angle: _controller, + repaint: Listenable.merge([_controller, _color])), // 背景 + ), + ); + } + + void _statusListen(AnimationStatus status) { + switch (status) { + case AnimationStatus.dismissed: + _color.value = Colors.black; + break; + case AnimationStatus.forward: + _color.value = Colors.blue; + break; + case AnimationStatus.reverse: + _color.value = Colors.red; + break; + case AnimationStatus.completed: + _color.value = Colors.green; + break; + } + } +} + +class PicManPainter extends CustomPainter { + final Animation angle; + final Listenable repaint; + final ValueNotifier color; + + PicManPainter({required this.color,required this.angle, required this.repaint}) + : super(repaint: repaint); + + Paint _paint = Paint(); + + @override + void paint(Canvas canvas, Size size) { + canvas.clipRect(Offset.zero & size); //剪切画布 + final double radius = size.width / 2; + canvas.translate(radius, size.height / 2); + _drawHead(canvas, size); + _drawEye(canvas, radius); + } + + //绘制头 + void _drawHead(Canvas canvas, Size size) { + var rect = Rect.fromCenter( + center: Offset(0, 0), height: size.width, width: size.height); + var a = angle.value / 180 * pi; + canvas.drawArc( + rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color.value); + } + + //绘制眼睛 + void _drawEye(Canvas canvas, double radius) { + canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12, + _paint..color = Colors.white); + } + + @override + bool shouldRepaint(covariant PicManPainter oldDelegate) => + oldDelegate.repaint != repaint; +} diff --git a/pubspec.lock b/pubspec.lock index 90c6cb4..d1c15f3 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -17,6 +17,14 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "0.0.9" + archive: + dependency: transitive + description: + name: archive + sha256: "7b875fd4a20b165a3084bd2d210439b22ebc653f21cea4842729c0c30c82596b" + url: "https://pub.flutter-io.cn" + source: hosted + version: "3.4.9" async: dependency: transitive description: @@ -57,6 +65,22 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "1.17.2" + convert: + dependency: transitive + description: + name: convert + sha256: "0f08b14755d163f6e2134cb58222dd25ea2a2ee8a195e53983d57c075324d592" + url: "https://pub.flutter-io.cn" + source: hosted + version: "3.1.1" + crypto: + dependency: transitive + description: + name: crypto + sha256: ff625774173754681d66daaf4a448684fb04b78f902da9cb3d308c19cc5e8bab + url: "https://pub.flutter-io.cn" + source: hosted + version: "3.0.3" cupertino_icons: dependency: "direct main" description: @@ -127,6 +151,22 @@ packages: relative: true source: path version: "0.0.1" + image: + dependency: transitive + description: + name: image + sha256: "028f61960d56f26414eb616b48b04eb37d700cbe477b7fb09bf1d7ce57fd9271" + url: "https://pub.flutter-io.cn" + source: hosted + version: "4.1.3" + js: + dependency: transitive + description: + name: js + sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3 + url: "https://pub.flutter-io.cn" + source: hosted + version: "0.6.7" lints: dependency: transitive description: @@ -191,6 +231,14 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "0.4.0" + petitparser: + dependency: transitive + description: + name: petitparser + sha256: cb3798bef7fc021ac45b308f4b51208a152792445cce0448c9a4ba5879dd8750 + url: "https://pub.flutter-io.cn" + source: hosted + version: "5.4.0" plugin_platform_interface: dependency: transitive description: @@ -199,6 +247,14 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "2.1.6" + pointycastle: + dependency: transitive + description: + name: pointycastle + sha256: "7c1e5f0d23c9016c5bbd8b1473d0d3fb3fc851b876046039509e18e0c7485f2c" + url: "https://pub.flutter-io.cn" + source: hosted + version: "3.7.3" provider: dependency: "direct main" description: @@ -283,6 +339,14 @@ packages: relative: false source: path version: "0.0.1" + typed_data: + dependency: transitive + description: + name: typed_data + sha256: facc8d6582f16042dd49f2463ff1bd6e2c9ef9f3d5da3d9b087e244a7b564b3c + url: "https://pub.flutter-io.cn" + source: hosted + version: "1.3.2" url_launcher: dependency: "direct main" description: @@ -379,6 +443,14 @@ packages: url: "https://pub.flutter-io.cn" source: hosted version: "0.3.7" + xml: + dependency: transitive + description: + name: xml + sha256: "5bc72e1e45e941d825fd7468b9b4cc3b9327942649aeb6fc5cdbf135f0a86e84" + url: "https://pub.flutter-io.cn" + source: hosted + version: "6.3.0" sdks: dart: ">=3.1.1 <4.0.0" flutter: ">=3.13.0"