This commit is contained in:
toly
2023-12-12 09:40:24 +08:00
parent 25e51d789f
commit ab2778a22b
51 changed files with 3453 additions and 129 deletions

View File

@@ -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();
}
}

View File

@@ -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();
},
),
],
);

View File

@@ -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,
),
],
), ),
),
);
}
}

View File

@@ -70,7 +70,6 @@ List<BookInfo> kBooks = [
cover: 'assets/images/anima.webp',
price: '3.5',
),
BookInfo(
name: 'Flutter渲染机制·聚沙成塔',
path: 'dream',
@@ -102,7 +101,6 @@ List<BookInfo> projectBooks = [
),
];
class ViewBooks extends StatelessWidget {
const ViewBooks({super.key});
@@ -117,70 +115,43 @@ class ViewBooks extends StatelessWidget {
);
return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: TitleGroup(
title: 'Flutter 七剑合璧',
lineColor: const Color(0xff6EAFF9),
),
),
_buildSliverSliverGrid(kBooks,gridDelegate),
SliverToBoxAdapter(
child: TitleGroup(
title: 'Flutter 实战探索',
lineColor: const Color(0xffFD983A),
),
),
_buildSliverSliverGrid(projectBooks,gridDelegate),
SliverToBoxAdapter(
child: TitleGroup(title: 'Flutter 七剑合璧',),
child: TitleGroup(
title: 'Flutter 免费小册',
lineColor: const Color(0xff7864E1),
),
),
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<BookInfo> 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),
);
}
}

View File

@@ -15,51 +15,53 @@ class _DemoShowerState extends State<DemoShower> {
@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,
),
],
)),
],
)),
],
],
),
);
}
}

View File

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

View File

@@ -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(),
],
);
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,83 @@
import 'dart:ui';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/5/1
/// contact me by email 1981462002@qq.com
/// 说明:
class Paper extends StatefulWidget {
const Paper({super.key});
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
late AnimationController _ctrl;
double progress = 0.0;
@override
void initState() {
super.initState();
_ctrl = AnimationController(
duration: Duration(seconds: 3), vsync: this)
..forward();
}
@override
void dispose() {
_ctrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
// 使用CustomPaint
painter: PaperPainter(progress: _ctrl),
),
);
}
}
class PaperPainter extends CustomPainter {
final Animation<double> progress;
PaperPainter({required this.progress}) : super(repaint: progress);
@override
void paint(Canvas canvas, Size size) {
canvas.translate(size.width / 2, size.height / 2);
Paint paint = Paint()
..color = Colors.purple
..strokeWidth = 1
..style = PaintingStyle.stroke;
Path path = Path();
path
..relativeMoveTo(0, 0)
..relativeLineTo(-30, 120)
..relativeLineTo(30, -30)
..relativeLineTo(30, 30)
..close();
path.addOval(Rect.fromCenter(center: Offset.zero, width: 50, height: 50));
PathMetrics pms = path.computeMetrics();
for (PathMetric pm in pms) {
Tangent? tangent = pm.getTangentForOffset(pm.length * progress.value);
if(tangent ==null) continue;
canvas.drawCircle(
tangent.position, 5, Paint()..color = Colors.deepOrange);
}
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(PaperPainter oldDelegate) =>
oldDelegate.progress != progress;
}

View File

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

View File

@@ -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(),
],
);
}
}

View File

@@ -0,0 +1,61 @@
import 'package:flutter/material.dart';
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatelessWidget {
const Paper({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
// 使用CustomPaint
painter: PaperPainter(),
),
);
}
}
class PaperPainter extends CustomPainter {
static const double step = 20; // 方格变长
final Coordinate coordinate = Coordinate(step: step);
// 颜色列表 256 个元素
final Color colors = Color(0xffBBE9F7).withRed(0);
// final Color colors = Color(0xff00E9F9);
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
canvas.save();
canvas.translate(size.width / 2, size.height / 2);
List<String> values = colors.value.toRadixString(2).split('').toList();
// 遍历列表 绘制矩形色块
canvas.translate(-step * 4.0, -step * 2.0);
values.asMap().forEach((i, v) {
int line = (i % 8); // 行
int row = i ~/ 8; // 列
var topLeft = Offset(step * line, step * row);
var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step));
canvas.drawRect(
rect, paint..color = v == '0' ? Colors.red : Colors.black);
});
canvas.restore();
coordinate.paint(canvas, size); //绘制坐标系
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}

View File

@@ -0,0 +1,55 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatelessWidget {
const Paper({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
// 使用CustomPaint
painter: PaperPainter(),
),
);
}
}
class PaperPainter extends CustomPainter {
static const double step = 15; // 方格变长
final Coordinate coordinate = Coordinate(step: step);
// 颜色列表 256 个元素
final List<Color> colors =
List<Color>.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0));
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
canvas.save();
canvas.translate(size.width / 2, size.height / 2);
// 遍历列表 绘制矩形色块
canvas.translate(-step * 8.0, -step * 8.0);
colors.asMap().forEach((i, color) {
int line = (i % 16); // 行
int row = i ~/ 16; // 列
var topLeft = Offset(step * line, step * row);
var rect = Rect.fromPoints(topLeft, topLeft.translate(step, step));
canvas.drawRect(rect, paint..color = color);
});
canvas.restore();
coordinate.paint(canvas, size); //绘制坐标系
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}

View File

@@ -0,0 +1,112 @@
import 'dart:async';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatefulWidget {
const Paper({super.key});
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> {
ui.Image? _image;
@override
void initState() {
super.initState();
_loadImage();
}
void _loadImage() async {
_image =
await loadImageFromAssets('assets/images/icon_head.png');
setState(() {});
}
//读取 assets 中的图片
Future<ui.Image>? loadImageFromAssets(String path) async {
ByteData data = await rootBundle.load(path);
return decodeImageFromList(data.buffer.asUint8List());
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white, child: CustomPaint(painter: PaperPainter(_image)));
}
}
class PaperPainter extends CustomPainter {
final ui.Image? image;
PaperPainter(this.image);
static const double step = 20; // 方格变长
final Coordinate coordinate = Coordinate(step: step);
// 颜色列表 256 个元素
final List<Color> colors =
List<Color>.generate(256, (i) => Color.fromARGB(255 - i, 255, 0, 0));
@override
void paint(Canvas canvas, Size size) {
if(image ==null) return;
Paint srcPaint = Paint();
canvas.translate(size.width / 2, size.height / 2);
canvas.translate(-step * 17, -step * 7);
Paint dstPaint = Paint();
BlendMode.values.asMap().forEach((i, value) {
int line = i ~/ 10;
int row = i % 10;
canvas.save();
canvas.translate(3.7 * step * row, 5.5 * step * line);
canvas.drawImageRect(image!, Rect.fromPoints(Offset.zero, Offset(image!.width*1.0,image!.height*1.0)),
Rect.fromCenter(center:Offset.zero, width: 25*2.0,height: 25*2.0), dstPaint);
srcPaint
..color = Color(0xffff0000)
..blendMode = value;
canvas.drawRect(
Rect.fromPoints(Offset.zero, Offset(20 * 2.0, 20 * 2.0)), srcPaint);
_simpleDrawText(canvas,value.toString().split(".")[1],offset: Offset(-10, 50));
canvas.restore();
});
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
void _simpleDrawText(Canvas canvas, String str,
{Offset offset = Offset.zero, Color color = Colors.black}) {
var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
textAlign: TextAlign.left,
fontSize: 11,
textDirection: TextDirection.ltr,
maxLines: 1,
))
..pushStyle(
ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic),
)
..addText(str);
canvas.drawParagraph(
builder.build()
..layout(ui.ParagraphConstraints(width: 11.0 * str.length)),
offset);
}
}

View File

@@ -0,0 +1,123 @@
import 'dart:async';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatefulWidget {
const Paper({super.key});
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> {
ui.Image? _srcImage;
ui.Image? _dstImage;
@override
void initState() {
super.initState();
_loadImage();
}
void _loadImage() async {
_srcImage = await loadImageFromAssets('assets/images/src.png');
_dstImage = await loadImageFromAssets('assets/images/dst.png');
setState(() {});
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(painter: PaperPainter(_srcImage, _dstImage)));
}
//读取 assets 中的图片
Future<ui.Image>? loadImageFromAssets(String path) async {
ByteData data = await rootBundle.load(path);
return decodeImageFromList(data.buffer.asUint8List());
}
}
class PaperPainter extends CustomPainter {
final ui.Image? srcImage;
final ui.Image? dstImage;
PaperPainter(this.srcImage, this.dstImage);
static const double step = 20; // 方格变长
final Coordinate coordinate = Coordinate(step: step);
@override
void paint(Canvas canvas, Size size) {
if (dstImage == null || srcImage == null) return;
Paint srcPaint = Paint();
Paint dstPaint = Paint();
int index = 4;
BlendMode srcModel = BlendMode.dstOver;
BlendMode dstModel = BlendMode.srcOver;
srcPaint
..blendMode = srcModel;
dstPaint
..blendMode = dstModel;
_simpleDrawText(canvas, BlendMode.values[index].toString().split(".")[1],
fontSize: 16,
offset: Offset(50, 50));
canvas.translate(size.width / 2, size.height / 2);
canvas.drawImageRect(
dstImage!,
Rect.fromPoints(
Offset.zero, Offset(dstImage!.width * 1.0, dstImage!.height * 1.0)),
Rect.fromCenter(
center: Offset.zero, width: 400, height: 400),
dstPaint);
canvas.drawImageRect(
srcImage!,
Rect.fromPoints(
Offset.zero, Offset(srcImage!.width * 1.0, srcImage!.height * 1.0)),
Rect.fromCenter(
center: Offset.zero, width: 400, height: 400),
srcPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
void _simpleDrawText(Canvas canvas, String str,
{double fontSize = 11,Offset offset = Offset.zero, Color color = Colors.black}) {
var builder = ui.ParagraphBuilder(ui.ParagraphStyle(
textAlign: TextAlign.left,
fontSize: fontSize,
textDirection: TextDirection.ltr,
maxLines: 1,
))
..pushStyle(
ui.TextStyle(color: color, textBaseline: ui.TextBaseline.alphabetic),
)
..addText(str);
canvas.drawParagraph(
builder.build()
..layout(ui.ParagraphConstraints(width: fontSize * str.length)),
offset);
}
}

View File

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

View File

@@ -0,0 +1,110 @@
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as image;
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatefulWidget {
const Paper({super.key});
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> {
image.Image? _image;
List<Ball> balls = [];
double d = 20; //复刻的像素边长
@override
void initState() {
super.initState();
_initBalls();
}
void _initBalls() async {
_image = await loadImageFromAssets('assets/images/icon_head.png');
if (_image == null) return;
for (int i = 0; i < _image!.width; i++) {
for (int j = 0; j < _image!.height; j++) {
Ball ball = Ball();
ball.x = i * d + d / 2;
ball.y = j * d + d / 2;
ball.r = d / 2;
image.Pixel pixel = _image!.getPixel(i, j);
var color = Color.fromARGB(pixel.a.toInt(),pixel.r.toInt(),pixel.g.toInt(),pixel.b.toInt());
ball.color = color;
balls.add(ball);
}
}
setState(() {});
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: PaperPainter(balls),
));
}
//读取 assets 中的图片
Future<image.Image?> loadImageFromAssets(String path) async {
ByteData data = await rootBundle.load(path);
List<int> bytes = data.buffer.asUint8List();
return image.decodeImage(Uint8List.fromList(bytes));
}
}
class PaperPainter extends CustomPainter {
late Paint _paint;
final double strokeWidth = 0.5;
final Color color = Colors.blue;
final List<Ball> balls;
final Coordinate coordinate = Coordinate();
PaperPainter(this.balls) {
_paint = Paint()
..style = PaintingStyle.fill
..strokeWidth = strokeWidth
..color = color;
}
@override
void paint(Canvas canvas, Size size) {
coordinate.paint(canvas, size);
canvas.translate(-710, -1000);
_drawImage(canvas);
}
void _drawImage(Canvas canvas) {
balls.forEach((Ball ball) {
canvas.drawCircle(
Offset(ball.x, ball.y), ball.r, _paint..color = ball.color);
});
}
@override
bool shouldRepaint(PaperPainter oldDelegate) => true;
}
class Ball {
double x; //点位X
double y; //点位Y
Color color; //颜色
double r; // 半径
Ball({this.x=0, this.y=0, this.color=Colors.black, this.r=5});
}

View File

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

View File

@@ -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(),
],
);
}
}

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,98 @@
import 'dart:async';
import 'dart:typed_data';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart';
import '../components/coordinate_pro.dart';
class Paper extends StatefulWidget {
const Paper({super.key});
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> {
ui.Image? _img;
bool get hasImage => _img != null;
@override
void initState() {
super.initState();
_loadImage();
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: ImageShaderPainter(_img),
),
);
}
void _loadImage() async {
_img = await loadImageFromAssets('assets/images/wy_200x300.jpg');
setState(() {});
}
//读取 assets 中的图片
Future<ui.Image>? loadImageFromAssets(String path) async {
ByteData data = await rootBundle.load(path);
return decodeImageFromList(data.buffer.asUint8List());
}
}
class ImageShaderPainter extends CustomPainter {
ui.Image? img;
ImageShaderPainter(this.img);
Coordinate coordinate = Coordinate();
@override
void paint(Canvas canvas, Size size) {
if(img == null) return;
coordinate.paint(canvas, size);
canvas.translate(size.width / 2, size.height / 2);
Paint paint = Paint()..shader = ImageShader(
img!,
TileMode.repeated,
TileMode.repeated,
Float64List.fromList([
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
]));
canvas.drawCircle(Offset(100, 100), 50, paint);
canvas.translate(120, 0);
canvas.drawCircle(
Offset(100, 100),
50,
paint
..strokeWidth = 10
..style = PaintingStyle.stroke);
canvas.translate(-120*2.0, 0);
canvas.drawLine(
Offset(100 , 50),
Offset(100 , 50 + 100.0),
paint
..strokeWidth = 30
..style = PaintingStyle.stroke);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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(),
],
);
}
}

View File

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

View File

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

View File

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

View File

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

View File

@@ -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(),
],
);
}
}

View File

@@ -0,0 +1,71 @@
import 'dart:math';
import 'package:flutter/material.dart';
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatefulWidget {
final Color color;
final double angle;
const Paper({Key? key, this.color = Colors.lightBlue, this.angle = 30 }) : super(key: key);
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper>{
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint(
size: Size(100, 100),
painter: PicManPainter(color: widget.color, angle : widget.angle), // 背景
),
);
}
}
class PicManPainter extends CustomPainter {
final Color color; // 颜色
final double angle; // 角度(与x轴交角 角度制)
Paint _paint = Paint();
PicManPainter({this.color = Colors.yellowAccent, this.angle = 30});
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size); //剪切画布
final double radius = size.width / 2;
canvas.translate(radius, size.height / 2);
_drawHead(canvas, size);
_drawEye(canvas, radius);
}
//绘制头
void _drawHead(Canvas canvas, Size size) {
var rect = Rect.fromCenter(
center: Offset(0, 0), height: size.width, width: size.height);
var a = angle / 180 * pi;
canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color);
}
//绘制眼睛
void _drawEye(Canvas canvas, double radius) {
canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
_paint..color = Colors.white);
}
@override
bool shouldRepaint(covariant PicManPainter oldDelegate) =>
oldDelegate.color != color || oldDelegate.angle != angle;
}

View File

@@ -0,0 +1,87 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/11/2
/// contact me by email 1981462002@qq.com
/// 说明:
///
class Paper extends StatefulWidget {
final Color color;
const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
lowerBound: 10,
upperBound: 40,
duration: const Duration(seconds: 1),
vsync: this,
)..repeat(reverse: true);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint(
size: Size(100, 100),
painter: PicManPainter(color: widget.color, angle: _controller), // 背景
),
);
}
}
class PicManPainter extends CustomPainter {
final Animation<double> angle; // 角度(与x轴交角 角度制)
final Color color; // 颜色
Paint _paint = Paint();
PicManPainter({this.color = Colors.yellowAccent, required this.angle})
: super(repaint: angle);
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size); //剪切画布
final double radius = size.width / 2;
canvas.translate(radius, size.height / 2);
_drawHead(canvas, size);
_drawEye(canvas, radius);
}
//绘制头
void _drawHead(Canvas canvas, Size size) {
var rect = Rect.fromCenter(
center: Offset(0, 0), height: size.width, width: size.height);
var a = angle.value / 180 * pi;
canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color);
}
//绘制眼睛
void _drawEye(Canvas canvas, double radius) {
canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
_paint..color = Colors.white);
}
@override
bool shouldRepaint(covariant PicManPainter oldDelegate) {
print('-----shouldRepaint---------');
return true;
}
}

View File

@@ -0,0 +1,94 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/11/2
/// contact me by email 1981462002@qq.com
/// 说明:
///
class Paper extends StatefulWidget {
final Color color;
const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Color?> _colorCtrl;
late Animation<double> _angleCtrl;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
_angleCtrl = _controller.drive(Tween(begin: 10, end: 40));
_colorCtrl =
ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
_controller.repeat(reverse: true);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint(
size: Size(100, 100),
painter: PicManPainter(
color: _colorCtrl, angle: _angleCtrl, repaint: _controller),
),
);
}
}
class PicManPainter extends CustomPainter {
final Animation<double> repaint;
final Animation<double> angle;
final Animation<Color?> color;
Paint _paint = Paint();
PicManPainter({ required this.repaint,required this.color,required this.angle})
: super(repaint: repaint);
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size); //剪切画布
final double radius = size.width / 2;
canvas.translate(radius, size.height / 2);
_drawHead(canvas, size);
_drawEye(canvas, radius);
}
//绘制头
void _drawHead(Canvas canvas, Size size) {
var rect = Rect.fromCenter(
center: Offset(0, 0), height: size.width, width: size.height);
var a = angle.value / 180 * pi;
canvas.drawArc(
rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color.value??Colors.black);
}
//绘制眼睛
void _drawEye(Canvas canvas, double radius) {
canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
_paint..color = Colors.white);
}
@override
bool shouldRepaint(covariant PicManPainter oldDelegate)=> oldDelegate.repaint != repaint;
}

View File

@@ -0,0 +1,82 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/11/2
/// contact me by email 1981462002@qq.com
/// 说明:
///
class Paper extends StatefulWidget {
final Color color;
const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
_controller.repeat(reverse: true);
}
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint(
size: Size(100, 100),
painter: PicManPainter(_controller), // 背景
),
);
}
}
class PicManPainter extends CustomPainter {
final Animation<double> repaint; // 角度(与x轴交角 角度制)
final ColorTween colorTween = ColorTween(begin: Colors.blue, end: Colors.red);
final Tween<double> angleTween = Tween(begin: 10.0, end: 40.0);
Paint _paint = Paint();
PicManPainter(this.repaint)
: super(repaint: repaint);
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size); //剪切画布
final double radius = size.width / 2;
canvas.translate(radius, size.height / 2);
_drawHead(canvas, size);
_drawEye(canvas, radius);
}
//绘制头
void _drawHead(Canvas canvas, Size size) {
var rect = Rect.fromCenter(
center: Offset(0, 0), height: size.width, width: size.height);
double a = angleTween.evaluate(repaint) / 180 * pi;
canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true,
_paint..color = colorTween.evaluate(repaint)??Colors.black);
}
//绘制眼睛
void _drawEye(Canvas canvas, double radius) {
canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
_paint..color = Colors.white);
}
@override
bool shouldRepaint(covariant PicManPainter oldDelegate) =>
oldDelegate.repaint != repaint;
}

View File

@@ -0,0 +1,100 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/11/2
/// contact me by email 1981462002@qq.com
/// 说明:
///
class Paper extends StatefulWidget {
final Color color;
const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
);
_controller.repeat(reverse: true);
}
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint(
size: Size(100, 100), painter: PicManPainter(_controller), // 背景
),
);
}
}
class PicManPainter extends CustomPainter {
final Animation<double> repaint;
// 创建 Tween
final ColorDoubleTween tween = ColorDoubleTween(
begin: ColorDouble(color: Colors.blue, value: 10),
end: ColorDouble(color: Colors.red, value: 10));
Paint _paint = Paint();
PicManPainter(this.repaint) : super(repaint: repaint);
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size); //剪切画布
final double radius = size.width / 2;
canvas.translate(radius, size.height / 2);
_drawHead(canvas, size);
_drawEye(canvas, radius);
}
//绘制头
void _drawHead(Canvas canvas, Size size) {
var rect = Rect.fromCenter(
center: Offset(0, 0), height: size.width, width: size.height);
var a = tween.evaluate(repaint).value / 180 * pi;
canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true,
_paint..color = tween.evaluate(repaint).color ?? Colors.black);
}
//绘制眼睛
void _drawEye(Canvas canvas, double radius) {
canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
_paint..color = Colors.white);
}
@override
bool shouldRepaint(covariant PicManPainter oldDelegate) =>
oldDelegate.repaint != repaint;
}
class ColorDouble {
final Color? color;
final double value;
ColorDouble({this.color = Colors.blue, this.value = 0});
}
class ColorDoubleTween extends Tween<ColorDouble> {
ColorDoubleTween({required ColorDouble begin, required ColorDouble end})
: super(begin: begin, end: end);
@override
ColorDouble lerp(double t) => ColorDouble(
color: Color.lerp(begin?.color, end?.color, t),
value: (begin!.value + (end!.value - begin!.value) * t),
);
}

View File

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

View File

@@ -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(),
],
);
}
}

View File

@@ -0,0 +1,121 @@
import 'dart:math';
import 'package:flutter/material.dart';
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatelessWidget {
const Paper({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: CurveBox(curve: const Cubic(1, -0.06, 0.1, 1.2),),
);
}
}
class CurveBox extends StatefulWidget {
final Color color;
final Curve curve;
CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear})
: super(key: key);
@override
_CurveBoxState createState() => _CurveBoxState();
}
class _CurveBoxState extends State<CurveBox>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _angleAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
);
_angleAnimation = CurveTween(curve: widget.curve).animate(_controller);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CustomPaint(
size: Size(100, 100),
painter: CurveBoxPainter(_controller, _angleAnimation), // 背景
);
}
}
class CurveBoxPainter extends CustomPainter {
final Animation<double> repaint; //
Animation<double> angleAnimation;
Paint _paint = Paint();
CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {}
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size);
canvas.translate(size.width / 2, size.height / 2);
_drawRing(canvas, size);
_drawRedCircle(canvas, size);
_drawGreenCircle(canvas, size);
}
//绘制环
void _drawRing(Canvas canvas, Size size) {
final double strokeWidth = 5;
_paint
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth;
canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint);
}
// 绘制红球
void _drawRedCircle(Canvas canvas, Size size) {
canvas.save();
canvas.rotate(angleAnimation.value * 2 * pi);
_paint
..color = Colors.red
..style = PaintingStyle.fill;
canvas.drawCircle(
Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
canvas.restore();
}
// 绘制绿球
void _drawGreenCircle(Canvas canvas, Size size) {
canvas.save();
canvas.translate(0,angleAnimation.value * (size.height-10));
_paint
..color = Colors.green
..style = PaintingStyle.fill;
canvas.drawCircle(
Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
canvas.restore();
}
@override
bool shouldRepaint(covariant CurveBoxPainter oldDelegate) =>
oldDelegate.repaint != repaint;
}

View File

@@ -0,0 +1,175 @@
import 'dart:math';
import 'package:flutter/material.dart';
import '../components/coordinate_pro.dart';
/// create by 张风捷特烈 on 2020-03-19
/// contact me by email 1981462002@qq.com
/// 说明: 纸
class Paper extends StatelessWidget {
const Paper({super.key});
@override
Widget build(BuildContext context) {
final curvesMap = {
"linear": Curves.linear,
"decelerate": Curves.decelerate,
"fastLinearToSlowEaseIn": Curves.fastLinearToSlowEaseIn,
"ease": Curves.ease,
"easeIn": Curves.easeIn,
"easeInToLinear": Curves.easeInToLinear,
"easeInSine": Curves.easeInSine,
"easeInQuad": Curves.easeInCubic,
"easeInCubic": Curves.easeInCubic,
"easeInQuart": Curves.easeInQuart,
"easeInQuint": Curves.easeInQuint,
"easeInExpo": Curves.easeInExpo,
"easeInCirc": Curves.easeInCirc,
"easeInBack": Curves.easeInBack,
"easeOut": Curves.easeOut,
"linearToEaseOut": Curves.linearToEaseOut,
"easeOutSine": Curves.easeOutSine,
"easeOutQuad": Curves.easeOutQuad,
"easeOutCubic": Curves.easeOutCubic,
"easeOutQuart": Curves.easeOutQuart,
"easeOutQuint": Curves.easeOutQuint,
// "easeOutExpo": Curves.easeOutExpo,
// "easeOutCirc": Curves.easeOutCirc,
// "easeOutBack": Curves.easeOutBack,
// "easeInOut": Curves.easeInOut,
// "easeInOutSine": Curves.easeInOutSine,
// "easeInOutQuad": Curves.easeInOutQuad,
// "easeInOutCubic": Curves.easeInOutCubic,
// "easeInOutQuart": Curves.easeInOutQuart,
// "easeInOutQuint": Curves.easeInOutQuint,
// "easeInOutExpo": Curves.easeInOutExpo,
// "easeInOutCirc": Curves.easeInOutCirc,
// "easeInOutBack": Curves.easeInOutBack,
// "fastOutSlowIn": Curves.fastOutSlowIn,
// "slowMiddle": Curves.slowMiddle,
// "bounceIn": Curves.bounceIn,
// "bounceOut": Curves.bounceOut,
// "bounceInOut": Curves.bounceInOut,
// "elasticIn": Curves.elasticIn,
// "elasticInOut": Curves.elasticInOut,
// "elasticOut": Curves.elasticOut,
};
return Center(
child:
Wrap(
runSpacing: 20,
children: curvesMap.keys.map((e) => Column(
mainAxisSize: MainAxisSize.min,
children: [
CurveBox(curve: curvesMap[e]!,),
SizedBox(height: 3,),
Text(e,style: TextStyle(fontSize: 10),)
],
)).toList(),
),
);
}
}
class CurveBox extends StatefulWidget {
final Color color;
final Curve curve;
CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear})
: super(key: key);
@override
_CurveBoxState createState() => _CurveBoxState();
}
class _CurveBoxState extends State<CurveBox>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _angleAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
);
_angleAnimation = CurveTween(curve: widget.curve).animate(_controller);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CustomPaint(
size: Size(100, 100),
painter: CurveBoxPainter(_controller, _angleAnimation), // 背景
);
}
}
class CurveBoxPainter extends CustomPainter {
final Animation<double> repaint; //
Animation<double> angleAnimation;
Paint _paint = Paint();
CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {}
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size);
canvas.translate(size.width / 2, size.height / 2);
_drawRing(canvas, size);
_drawRedCircle(canvas, size);
_drawGreenCircle(canvas, size);
}
//绘制环
void _drawRing(Canvas canvas, Size size) {
final double strokeWidth = 5;
_paint
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth;
canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint);
}
// 绘制红球
void _drawRedCircle(Canvas canvas, Size size) {
canvas.save();
canvas.rotate(angleAnimation.value * 2 * pi);
_paint
..color = Colors.red
..style = PaintingStyle.fill;
canvas.drawCircle(
Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
canvas.restore();
}
// 绘制绿球
void _drawGreenCircle(Canvas canvas, Size size) {
canvas.save();
canvas.translate(0,angleAnimation.value * (size.height-10));
_paint
..color = Colors.green
..style = PaintingStyle.fill;
canvas.drawCircle(
Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
canvas.restore();
}
@override
bool shouldRepaint(covariant CurveBoxPainter oldDelegate) =>
oldDelegate.repaint != repaint;
}

View File

@@ -0,0 +1,87 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/11/2
/// contact me by email 1981462002@qq.com
/// 说明:
///
class Paper extends StatefulWidget {
final Color color;
const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
lowerBound: 10,
upperBound: 40,
duration: const Duration(seconds: 1),
vsync: this,
);
// _controller.forward();
// _controller.reverse(from: 40);
// _controller.repeat();
// _controller.repeat(reverse: true);
_controller.fling();
}
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint(
size: Size(100, 100),
painter: PicManPainter(color: widget.color, angle: _controller), // 背景
),
);
}
}
class PicManPainter extends CustomPainter {
final Animation<double> angle; // 角度(与x轴交角 角度制)
final Color color; // 颜色
Paint _paint = Paint();
PicManPainter({this.color = Colors.yellowAccent,required this.angle})
: super(repaint: angle);
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size); //剪切画布
final double radius = size.width / 2;
canvas.translate(radius, size.height / 2);
_drawHead(canvas, size);
_drawEye(canvas, radius);
}
//绘制头
void _drawHead(Canvas canvas, Size size) {
var rect = Rect.fromCenter(
center: Offset(0, 0), height: size.width, width: size.height);
var a = angle.value / 180 * pi;
canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color);
}
//绘制眼睛
void _drawEye(Canvas canvas, double radius) {
canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
_paint..color = Colors.white);
}
@override
bool shouldRepaint(covariant PicManPainter oldDelegate) {
print('-----shouldRepaint---------');
return true;
}
}

View File

@@ -0,0 +1,105 @@
import 'dart:math';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/11/2
/// contact me by email 1981462002@qq.com
/// 说明:
///
class Paper extends StatefulWidget {
final Color color;
const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
@override
_PaperState createState() => _PaperState();
}
class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
late AnimationController _controller;
final ValueNotifier<Color> _color = ValueNotifier<Color>(Colors.blue);
@override
void initState() {
super.initState();
_controller = AnimationController(
lowerBound: 10,
upperBound: 40,
duration: const Duration(seconds: 1),
vsync: this,
);
_controller.addStatusListener(_statusListen);
_controller.forward();
// _controller.repeat(reverse: true);
}
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint(
size: Size(100, 100),
painter: PicManPainter(
color: _color,
angle: _controller,
repaint: Listenable.merge([_controller, _color])), // 背景
),
);
}
void _statusListen(AnimationStatus status) {
switch (status) {
case AnimationStatus.dismissed:
_color.value = Colors.black;
break;
case AnimationStatus.forward:
_color.value = Colors.blue;
break;
case AnimationStatus.reverse:
_color.value = Colors.red;
break;
case AnimationStatus.completed:
_color.value = Colors.green;
break;
}
}
}
class PicManPainter extends CustomPainter {
final Animation<double> angle;
final Listenable repaint;
final ValueNotifier<Color> color;
PicManPainter({required this.color,required this.angle, required this.repaint})
: super(repaint: repaint);
Paint _paint = Paint();
@override
void paint(Canvas canvas, Size size) {
canvas.clipRect(Offset.zero & size); //剪切画布
final double radius = size.width / 2;
canvas.translate(radius, size.height / 2);
_drawHead(canvas, size);
_drawEye(canvas, radius);
}
//绘制头
void _drawHead(Canvas canvas, Size size) {
var rect = Rect.fromCenter(
center: Offset(0, 0), height: size.width, width: size.height);
var a = angle.value / 180 * pi;
canvas.drawArc(
rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color.value);
}
//绘制眼睛
void _drawEye(Canvas canvas, double radius) {
canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
_paint..color = Colors.white);
}
@override
bool shouldRepaint(covariant PicManPainter oldDelegate) =>
oldDelegate.repaint != repaint;
}

View File

@@ -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"