From 9e46ff0c30deb6269e373eea1ca7d7db5115cfd5 Mon Sep 17 00:00:00 2001 From: cxc Date: Wed, 20 Jul 2022 17:33:21 +0800 Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=94=BE=E5=A4=A7=E5=90=8E?= =?UTF-8?q?=E9=94=81=E5=AE=9A=E7=BD=97=E7=9B=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/components/grid_clip_paint.dart | 102 ++++++++++++++--- lib/pages/compass_page.dart | 168 ++++++++++++++++++++++------ 2 files changed, 218 insertions(+), 52 deletions(-) diff --git a/lib/components/grid_clip_paint.dart b/lib/components/grid_clip_paint.dart index 474c588..8935ac8 100644 --- a/lib/components/grid_clip_paint.dart +++ b/lib/components/grid_clip_paint.dart @@ -1,9 +1,76 @@ +import 'dart:async'; import 'dart:ui' as ui; import 'package:flutter/material.dart'; -class GridClipPaint extends StatelessWidget { - const GridClipPaint({Key key}) : super(key: key); +// class GridClipPaint extends StatelessWidget { +// const GridClipPaint( +// this.left, +// this.top, +// this.right, +// this.bottom, { +// Key key, +// }) : super(key: key); +// +// // ui.Image image; +// final double left; +// final double top; +// final double right; +// final double bottom; +// +// @override +// Widget build(BuildContext context) { +// ui.Image image; +// return Container( +// color: Colors.transparent, +// alignment: Alignment.center, +// child: CustomPaint( +// // 使用CustomPaint 背景画板 +// painter: ClipPainter(image), +// ), +// ); +// } +// } + +class GridClipPaint extends StatefulWidget { + const GridClipPaint(this.image, this.left, this.top, this.right, this.bottom, + {Key key}) + : super(key: key); + final ui.Image image; + final double left; + final double top; + final double right; + final double bottom; + + @override + State createState() => _GridClipPaintState(); +} + +class _GridClipPaintState extends State { + ui.Image image; + + @override + void initState() async { + // TODO: implement initState + // final appDataDirectory = await getApplicationDocumentsDirectory(); + // File file = File(join(appDataDirectory.path, 'rotate_image')); + super.initState(); + } + + Future imageLoader() { + ImageStream imageStream = const AssetImage("assets/images/arrow.png") + .resolve(ImageConfiguration(size: Size(700, 700))); + Completer imageCompleter = Completer(); + + void imageListener(ImageInfo info, bool synchronousCall) { + ui.Image image = info.image; + imageCompleter.complete(image); + imageStream.removeListener(ImageStreamListener(imageListener)); + } + + imageStream.addListener(ImageStreamListener(imageListener)); + return imageCompleter.future; + } @override Widget build(BuildContext context) { @@ -12,32 +79,37 @@ class GridClipPaint extends StatelessWidget { alignment: Alignment.center, child: CustomPaint( // 使用CustomPaint 背景画板 - painter: ClipPainter(), + painter: ClipPainter(image), ), ); } } class ClipPainter extends CustomPainter { - ui.Image image; + final ui.Image image; + final double left; + final double top; + final double right; + final double bottom; + + ClipPainter(this.image, + {this.left = 0.3, this.top = 0.3, this.right = 0.6, this.bottom = 0.6}); @override void paint(Canvas canvas, Size size) { - // 创建画笔 - final Paint paint = Paint(); + // TODO: implement paint + Paint paint = Paint(); canvas.drawImageRect( image, - // Image(image: AssetImage("assets/images/arrow.png")), - Rect.fromLTRB(0, 0, 700 / 3, 700 / 3), - Rect.fromLTWH(0, 0, 700 / 3, 700 / 3), + Rect.fromLTRB(image.width * left, image.height * top, + image.width * right, image.height * bottom), + Rect.fromLTWH(0, 0, size.width, size.height), paint); - // ..color = Colors.white - // ..strokeWidth = 2; - // 绘制线 - // canvas.drawLine(const Offset(-400, 0), const Offset(400, 0), paintLine); - // canvas.drawLine(const Offset(0, 500), const Offset(0, -440), paintLine); } @override - bool shouldRepaint(CustomPainter oldDelegate) => false; + bool shouldRepaint(CustomPainter oldDelegate) { + // TODO: implement shouldRepaint + return false; + } } diff --git a/lib/pages/compass_page.dart b/lib/pages/compass_page.dart index c5c9cc2..afe6acf 100644 --- a/lib/pages/compass_page.dart +++ b/lib/pages/compass_page.dart @@ -1,18 +1,23 @@ import 'dart:async'; +import 'dart:io' as io; import 'dart:math'; import 'dart:typed_data'; - +import 'dart:ui' as ui; import 'package:fengshui_compass/components/cross_paint.dart'; import 'package:fengshui_compass/components/my_icon.dart'; import 'package:fengshui_compass/pages/login_page.dart'; import 'package:fengshui_compass/states/region.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:flutter_serial_port_api/flutter_serial_port_api.dart'; import 'package:fluttertoast/fluttertoast.dart'; import 'package:image_picker/image_picker.dart'; +import 'package:path/path.dart' as path; +import 'package:path_provider/path_provider.dart'; import 'package:provider/provider.dart'; import 'package:stream_transform/stream_transform.dart'; +import '../components/grid_clip_paint.dart'; import '../components/region_selector.dart'; import '../states/compass_image.dart'; import '../utils/recv_parse.dart'; @@ -317,6 +322,9 @@ class _CompassState extends State { return result; } + double _scale = 1.0; // 放大倍数 + Offset _origin = Offset(0.0, 0.0); // 放大原点 + @override Widget build(BuildContext context) { return Container( @@ -372,23 +380,30 @@ class _CompassState extends State { width: 700, height: 700, child: Stack( + // fit: StackFit.loose, children: [ - Transform.rotate( - angle: getCorrectionAngle((myaw + - regionProvider.declination)) * - 2 * - pi / - 360, - child: Image( - width: 700, - height: 700, - // alignment: Alignment.lerp(a, b, t), - // image: compassImageProvider.rotateImage, - image: compassImageProvider - .rotateImage ?? - const AssetImage( - "assets/images/compass_rotated.png"), - fit: BoxFit.contain), + ClipRect( + child: Transform.scale( + scale: _scale, + origin: _origin, + child: Transform.rotate( + angle: getCorrectionAngle((myaw + + regionProvider.declination)) * + 2 * + pi / + 360, + child: ClipOval( + child: Image( + width: 700, + height: 700, + image: compassImageProvider + .rotateImage ?? + const AssetImage( + "assets/images/compass_rotated.png"), + fit: BoxFit.contain), + ), + ), + ), ), Align( alignment: FractionalOffset(w_x, w_y), @@ -403,35 +418,106 @@ class _CompassState extends State { children: List.generate( 9, (index) => Container( - decoration: BoxDecoration( - border: Border( - bottom: - const BorderSide(width: 1), - right: - const BorderSide(width: 1), - left: index % 3 == 0 - ? const BorderSide(width: 1) - : BorderSide.none, - top: index <= 2 - ? const BorderSide(width: 1) - : BorderSide.none), - color: const Color.fromRGBO( - 233, 233, 233, 0.3)), + // decoration: BoxDecoration( + // border: Border( + // bottom: + // const BorderSide(width: 1), + // right: + // const BorderSide(width: 1), + // left: index % 3 == 0 + // ? const BorderSide(width: 1) + // : BorderSide.none, + // top: index <= 2 + // ? const BorderSide(width: 1) + // : BorderSide.none), + // color: const Color.fromRGBO( + // 233, 233, 233, 0.3)), height: 700 / 3, width: 700 / 3, child: GestureDetector( - child: Text('grid $index'), + // child: Text('grid $index'), + onDoubleTap: () { + setState(() { + _scale = 1.0; + }); + }, onTap: () { - Fluttertoast.showToast( - msg: 'index: $index', - backgroundColor: Colors.green, - textColor: Colors.white, - fontSize: 20.0); + if (isLock) { + return; + } + setState(() { + switch (index) { + case 0: + _origin = + const Offset(-350, -350); + break; + case 1: + _origin = + const Offset(0, -350); + break; + case 2: + _origin = + const Offset(350, -350); + break; + case 3: + _origin = + const Offset(-350, 0); + break; + case 4: + _origin = const Offset(0, 0); + break; + case 5: + _origin = + const Offset(350, 0); + break; + case 6: + _origin = + const Offset(-350, 350); + break; + case 7: + _origin = + const Offset(0, 350); + break; + case 8: + _origin = + const Offset(350, 350); + break; + } + _scale = 3; + switchCompass(); + // isLock = true; + }); }, ), ), ), + ), + // ClipRRect( + // borderRadius: BorderRadius.circular(225.0), + // child: Image( + // width: 700, + // height: 700, + // // alignment: Alignment.lerp(a, b, t), + // // image: compassImageProvider.rotateImage, + // image: compassImageProvider + // .rotateImage ?? + // const AssetImage( + // "assets/images/compass_rotated.png"), + // fit: BoxFit.contain), + // ) + ClipRect( + child: Image( + width: 700, + height: 700, + color: Colors.red, + // alignment: Alignment.lerp(a, b, t), + // image: compassImageProvider.rotateImage, + image: const AssetImage( + "assets/images/compass_rotated.png"), + fit: BoxFit.contain), + clipper: MyClipper(), ) + // GridClipPaint(0,0,1,2) ], ), ), @@ -605,3 +691,11 @@ class _CompassState extends State { ); } } + +class MyClipper extends CustomClipper { + @override + Rect getClip(Size size) => Rect.fromLTWH(0.0, 0.0, 100.0, 100.0); + + @override + bool shouldReclip(CustomClipper oldClipper) => false; +}