forked from lxm_flutter/FlutterUnit
266 lines
7.8 KiB
Dart
266 lines
7.8 KiB
Dart
import 'dart:math';
|
|
import 'dart:typed_data';
|
|
import 'dart:ui' as ui;
|
|
import 'dart:ui';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
|
|
|
|
|
|
class DunDunPathPage extends StatefulWidget {
|
|
const DunDunPathPage({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
_DunDunPathPageState createState() => _DunDunPathPageState();
|
|
}
|
|
|
|
class _DunDunPathPageState extends State<DunDunPathPage>with SingleTickerProviderStateMixin {
|
|
ui.Image? logo2Image;
|
|
|
|
late AnimationController _controller;
|
|
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
loadImage();
|
|
_controller = AnimationController(
|
|
duration: const Duration(seconds: 3),
|
|
vsync: this,
|
|
)..forward();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void loadImage() async {
|
|
ByteData data2 = await rootBundle.load('assets/images/logo1.webp');
|
|
logo2Image = await decodeImageFromList(data2.buffer.asUint8List());
|
|
if (mounted) setState(() {});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: Center(
|
|
child: GestureDetector(
|
|
onTap: (){
|
|
_controller.reset();
|
|
_controller.forward();
|
|
},
|
|
child: CustomPaint(
|
|
painter: DunDunPainter(logo2Image,_controller),
|
|
size: const Size(200, 200),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class DunDunPainter extends CustomPainter {
|
|
|
|
final ui.Image? logo2Image;
|
|
final Animation<double> repaint;
|
|
|
|
DunDunPainter(this.logo2Image,this.repaint):super(repaint: repaint);
|
|
|
|
final Paint helpPaint = Paint()
|
|
..style = PaintingStyle.stroke
|
|
..color = Colors.blue;
|
|
final Paint pathPaint = Paint()..style = PaintingStyle.stroke;
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
if (logo2Image!=null) {
|
|
Rect src2 = Rect.fromLTWH(
|
|
0, 0, logo2Image!.width.toDouble(), logo2Image!.height.toDouble());
|
|
Rect dst2 = Rect.fromLTWH(85, 132, 899/27, 1066/27);
|
|
canvas.drawImageRect(logo2Image!, src2, dst2, Paint());
|
|
}
|
|
|
|
Path dundunPath = Path();
|
|
canvas.translate(30, 80);
|
|
helpPaint.color = Colors.red;
|
|
|
|
Path bodyPath = buildBodyPath();
|
|
Path leftHandPath = buildLeftHandPath();
|
|
Path rightHandPath = buildRightHandPath();
|
|
|
|
canvas.save();
|
|
Path eyePath = Path();
|
|
Matrix4 m = Matrix4.translationValues(46,-12, 0).multiplied(
|
|
Matrix4.rotationZ(45 / 180 * pi)
|
|
);
|
|
eyePath
|
|
.addOval(Rect.fromCenter(center: Offset(0, 0), width: 32, height: 49));
|
|
eyePath = eyePath.transform(m.storage);
|
|
canvas.restore();
|
|
|
|
Path leftEyePath = Path();
|
|
leftEyePath.addOval(Rect.fromCenter(center: Offset(50, -13), width: 18, height: 18));
|
|
|
|
Path leftEyePath2 = Path();
|
|
leftEyePath2.addOval(Rect.fromCenter(center: Offset(50, -13), width: 7, height: 7));
|
|
|
|
Path leftEyePath3 = Path();
|
|
leftEyePath3.addOval(Rect.fromCenter(center: Offset(51, -19), width: 4, height: 4));
|
|
|
|
|
|
Path rightEyePath = Path();
|
|
rightEyePath.addOval(Rect.fromCenter(center: Offset(98, -14), width: 17, height: 17));
|
|
|
|
Path rightEyePath2 = Path();
|
|
rightEyePath2.addOval(Rect.fromCenter(center: Offset(98, -14), width: 7, height: 7));
|
|
|
|
Path rightEyePath3 = Path();
|
|
rightEyePath3.addOval(Rect.fromCenter(center: Offset(98, -19), width: 4, height: 4));
|
|
|
|
Path nosePath = Path();
|
|
nosePath.moveTo(79, -0,);
|
|
nosePath.relativeLineTo(14, -14,);
|
|
nosePath.relativeLineTo(-28, 0,);
|
|
nosePath.close();
|
|
Path clipCirclePath =Path();
|
|
clipCirclePath.addOval(Rect.fromCenter(center: Offset(79, -10,), width: 14, height: 14));
|
|
nosePath = Path.combine(PathOperation.intersect, nosePath, clipCirclePath);
|
|
Path smaliPath = Path();
|
|
smaliPath.moveTo(65, -0,);
|
|
|
|
smaliPath.quadraticBezierTo(78, 15, 90, 0);
|
|
smaliPath.quadraticBezierTo(78, 6, 65, 0,);
|
|
|
|
Path colorfulPath = Path();
|
|
colorfulPath.addOval(Rect.fromCenter(center: Offset(72, -5,), width: 120, height: 110));
|
|
colorfulPath.addOval(Rect.fromCenter(center: Offset(72, -5,), width: 110, height: 100));
|
|
colorfulPath.addOval(Rect.fromCenter(center: Offset(72, -5,), width: 115, height: 110));
|
|
colorfulPath.addOval(Rect.fromCenter(center: Offset(72, -5,), width: 120, height: 105));
|
|
colorfulPath.addOval(Rect.fromCenter(center: Offset(72, -5,), width: 115, height: 105));
|
|
|
|
canvas.save();
|
|
Path eyePath2 = Path();
|
|
Matrix4 m2 = Matrix4.translationValues(105,-12,0).multiplied(
|
|
Matrix4.rotationZ(-40 / 180 * pi)
|
|
);
|
|
eyePath2
|
|
.addOval(Rect.fromCenter(center: Offset(0, 0), width: 29, height: 48));
|
|
eyePath2 = eyePath2.transform(m2.storage);
|
|
canvas.restore();
|
|
Path leftFootPath = buildFootPath();
|
|
Path erPath = buildErPath();
|
|
|
|
//爱心
|
|
List<Offset> arr = [];
|
|
int len = 50;
|
|
double a =1;
|
|
for (int i = 0; i < len; i++) {
|
|
double step = (i / len) * (pi * 2); //递增的θ
|
|
Offset offset = Offset(
|
|
a * (11 * pow(sin(step), 3)).toDouble() ,
|
|
-a *
|
|
(9 * cos(step) -
|
|
5 * cos(2 * step) -
|
|
2 * cos(3 * step) -
|
|
cos(4 * step)),
|
|
);
|
|
arr.add(offset);
|
|
}
|
|
Path starPath = Path();
|
|
for (int i = 0; i < len; i++) {
|
|
starPath.lineTo(arr[i].dx, arr[i].dy);
|
|
}
|
|
starPath = starPath.shift(Offset(152,-20));
|
|
|
|
dundunPath.addPath(bodyPath, Offset.zero);
|
|
dundunPath.addPath(leftHandPath, Offset.zero);
|
|
dundunPath.addPath(rightHandPath, Offset.zero);
|
|
dundunPath.addPath(leftFootPath, Offset.zero);
|
|
dundunPath.addPath(erPath, Offset.zero);
|
|
dundunPath.addPath(eyePath, Offset.zero);
|
|
dundunPath.addPath(eyePath2, Offset.zero);
|
|
dundunPath.addPath(leftEyePath, Offset.zero);
|
|
dundunPath.addPath(leftEyePath2, Offset.zero);
|
|
dundunPath.addPath(leftEyePath3, Offset.zero);
|
|
dundunPath.addPath(rightEyePath, Offset.zero);
|
|
dundunPath.addPath(rightEyePath2, Offset.zero);
|
|
dundunPath.addPath(rightEyePath3, Offset.zero);
|
|
dundunPath.addPath(nosePath, Offset.zero);
|
|
dundunPath.addPath(starPath, Offset.zero);
|
|
dundunPath.addPath(colorfulPath, Offset.zero);
|
|
dundunPath.addPath(smaliPath, Offset.zero);
|
|
|
|
pathPaint
|
|
..strokeWidth = 1
|
|
..color = Colors.cyanAccent;
|
|
PathMetrics pms = dundunPath.computeMetrics();
|
|
pms.forEach((pm) {
|
|
canvas.drawPath(pm.extractPath(0, pm.length * repaint.value), pathPaint);
|
|
});
|
|
}
|
|
|
|
Path buildBodyPath() {
|
|
Path path = Path();
|
|
path.quadraticBezierTo(10, -75, 75, -75);
|
|
path.quadraticBezierTo(135, -70, 138, 0);
|
|
path.quadraticBezierTo(130, 90, 65, 98);
|
|
path.quadraticBezierTo(-5, 85, 0, 0);
|
|
return path;
|
|
}
|
|
|
|
Path buildLeftHandPath() {
|
|
Path path = Path();
|
|
path.quadraticBezierTo(
|
|
-17,
|
|
14,
|
|
-28,
|
|
40,
|
|
);
|
|
path.quadraticBezierTo(-32, 58, -15, 62);
|
|
path.quadraticBezierTo(10, 60, 0, 0);
|
|
return path;
|
|
}
|
|
|
|
Path buildRightHandPath() {
|
|
Path path = Path();
|
|
path.moveTo(135, -20);
|
|
path.quadraticBezierTo(140, -48, 165, -35);
|
|
path.quadraticBezierTo(180, -17, 135, 22);
|
|
path.quadraticBezierTo(125, 17, 135, -20);
|
|
return path;
|
|
}
|
|
|
|
Path buildFootPath() {
|
|
Path path = Path();
|
|
path.moveTo(18, 78);
|
|
path.quadraticBezierTo(18, 100, 22, 115);
|
|
path.quadraticBezierTo(60, 125, 55, 98);
|
|
path.quadraticBezierTo(35, 80, 18, 78);
|
|
|
|
Path right = path
|
|
.transform(Matrix4.diagonal3Values(-1, 1, 1).storage)
|
|
.shift(const Offset(128, 0));
|
|
|
|
return Path.combine(PathOperation.union, path, right);
|
|
}
|
|
|
|
Path buildErPath() {
|
|
Path path = Path();
|
|
path.moveTo(13, -40);
|
|
path.quadraticBezierTo(8, -95, 40, -68);
|
|
path.quadraticBezierTo(40, -55, 13, -40);
|
|
|
|
Path right = path
|
|
.transform(Matrix4.diagonal3Values(-1, 1, 1).storage)
|
|
.shift(const Offset(138, -5));
|
|
|
|
return Path.combine(PathOperation.union, path, right);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
|
|
}
|