优化时钟绘制

2021-07-06 21:22:11 +08:00
parent 6234c8114d
commit ca81162e51
5 changed files with 233 additions and 167 deletions
--- a/lib/painter_system/anim/draw_path.dart
+++ b/lib/painter_system/anim/draw_path.dart
@@ -1,9 +1,9 @@
 import 'dart:math';
 import 'dart:ui';
+import 'dart:ui' as ui;

 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'dart:ui' as ui;

 /// create by 张风捷特烈 on 2020/5/1
 /// contact me by email 1981462002@qq.com
@@ -69,7 +69,7 @@ class PaperPainter extends CustomPainter {
  }

  double f(double thta) {
-    double p = 150*sin(5*thta).abs();
+    double p = 120 * sin(5 * thta).abs();
    return p;
  }

--- a/lib/painter_system/base/clock_widget.dart
+++ b/lib/painter_system/base/clock_widget.dart
@@ -7,9 +7,13 @@ import 'package:flutter/scheduler.dart';

 /// create by 张风捷特烈 on 2021/2/7
 /// contact me by email 1981462002@qq.com
-/// 说明: 
+/// 说明:

 class ClockWidget extends StatefulWidget {
+  final double radius;
+
+  const ClockWidget({Key key, this.radius = 100}) : super(key: key);
+
  @override
  _ClockWidgetState createState() => _ClockWidgetState();
 }
@@ -25,96 +29,98 @@ class _ClockWidgetState extends State<ClockWidget>
    _ticker = createTicker(_tick)..start();
  }

-  void _tick(Duration duration) {
-
-    if(time.value.second!=DateTime.now().second){
-      time.value = DateTime.now();
-    }
-
-  }
-
  @override
  void dispose() {
    _ticker.dispose();
+    time.dispose();
    super.dispose();
  }

+  void _tick(Duration duration) {
+    if (time.value.second != DateTime.now().second) {
+      time.value = DateTime.now();
+    }
+  }
+
  @override
  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(15.0),
-      child: CustomPaint(
-        painter: ClockPainter(listenable: time),
-      ),
+    return  Stack(
+      alignment: Alignment.center,
+        children: [
+          CustomPaint(
+            size: Size(widget.radius * 2, widget.radius * 2),
+            painter: ClockBgPainter(radius: widget.radius),
+          ),
+          RepaintBoundary(
+            child: CustomPaint(
+              size: Size(widget.radius * 2, widget.radius * 2),
+              painter: ClockPainter(listenable: time, radius: widget.radius),
+            ),
+          )
+        ],
    );
  }
 }

-class ClockPainter extends CustomPainter {
-  Paint _paint = Paint();
+class ClockBgPainter extends CustomPainter {
+  final Paint _paint = Paint()..style = PaintingStyle.stroke;

-  ValueListenable<DateTime> listenable;
+  final double radius;

-  ClockPainter({this.listenable}) : super(repaint: listenable);
+  ClockBgPainter({this.radius = 100});

  @override
  void paint(Canvas canvas, Size size) {
+
    canvas.translate(size.width / 2, size.height / 2);
-    drawOuterCircle(canvas, size);
-    drawDot(canvas);
+    drawOuterCircle(canvas);
+    drawScale(canvas);
    drawText(canvas);
-
-    DateTime time = listenable.value;
-    int sec = time.second;
-    int min = time.minute;
-    int hour = time.hour;
-
-    double perAngle = 360 / 60;
-
-    drawM(canvas, (min + sec / 60) * perAngle - 90);
-    drawH(canvas, (hour + min / 60 + sec / 3600) / 12 * 360 - 90);
-    drawS(canvas, sec / 60 * 360 - 90);
  }

  @override
-  bool shouldRepaint(covariant ClockPainter oldDelegate) {
-    return oldDelegate.listenable != listenable;
+  bool shouldRepaint(covariant ClockBgPainter oldDelegate) {
+    return oldDelegate.radius != radius;
  }

-  void drawOuterCircle(Canvas canvas, Size size) {
-    final offsetAngle = 5;
+  void drawOuterCircle(Canvas canvas) {
    _paint
      ..strokeWidth = 4
-      ..color = Color(0xffD5D5D5)
-      ..style = PaintingStyle.stroke;
-    canvas.save();
+      ..color = const Color(0xffD5D5D5);
    for (int i = 0; i < 4; i++) {
-      canvas.drawArc(
-          Rect.fromPoints(Offset(-size.width / 2, -size.height / 2),
-              Offset(size.width / 2, size.height / 2)),
-          offsetAngle * pi / 180,
-          pi / 2 - 2 * offsetAngle * pi / 180,
-          false,
-          _paint);
+      _paintArc(canvas);
      canvas.rotate(pi / 2);
    }
-    canvas.restore();
  }

-  void drawHelp(Canvas canvas, Size size) {
-    canvas.drawPoints(
-        PointMode.lines,
-        [
-          Offset(-size.width / 2, 0),
-          Offset(size.width / 2, 0),
-          Offset(0, -size.height / 2),
-          Offset(0, size.height / 2),
-        ],
-        Paint());
+  final Paint arcPaint = Paint()
+    ..style = PaintingStyle.fill
+    ..color = const Color(0xff00abf2);
+
+  void _paintArc(Canvas canvas) {
+    arcPaint.maskFilter = MaskFilter.blur(BlurStyle.solid, logic1);
+    final Path circlePath = Path()
+      ..addArc(
+          Rect.fromCenter(
+              center: Offset(0, 0), width: radius * 2, height: radius * 2),
+          10 / 180 * pi,
+          pi / 2 - 20 / 180 * pi);
+
+    Path circlePath2 = Path()
+      ..addArc(
+          Rect.fromCenter(
+              center: Offset(-logic1, 0),
+              width: radius * 2,
+              height: radius * 2),
+          10 / 180 * pi,
+          pi / 2 - 20 / 180 * pi);
+    //联合路径
+    Path result =
+        Path.combine(PathOperation.difference, circlePath, circlePath2);
+    canvas.drawPath(result, arcPaint); //绘制
  }

-  void drawDot(Canvas canvas) {
-    canvas.save();
+  void drawScale(Canvas canvas) {
    _paint
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.fill;
@@ -125,105 +131,58 @@ class ClockPainter extends CustomPainter {
    for (int i = 0; i < count; i++) {
      if (i % 5 == 0) {
        _paint
-          ..strokeWidth = 3
+          ..strokeWidth = longLineWidth
          ..color = Colors.blue;
-        canvas.drawLine(Offset(120, 0), Offset(135, 0), _paint);
-        canvas.drawCircle(Offset(115, 0), 2, _paint..color = Colors.orange);
+        canvas.drawLine(Offset(radius - scaleSpace, 0),
+            Offset(radius - scaleSpace - longScaleLen, 0), _paint);
+        canvas.drawCircle(
+            Offset(radius - scaleSpace - longScaleLen - logic1 * 5, 0),
+            longLineWidth,
+            _paint..color = Colors.orange);
      } else {
        _paint
-          ..strokeWidth = 1.5
+          ..strokeWidth = shortLenWidth
          ..color = Colors.black;
-        canvas.drawLine(Offset(125, 0), Offset(135, 0), _paint);
+        canvas.drawLine(Offset(radius - scaleSpace, 0),
+            Offset(radius - scaleSpace - shortScaleLen, 0), _paint);
      }
-
      canvas.rotate(perAngle);
    }
-    canvas.restore();
  }

-  void drawH(Canvas canvas, double deg) {
-    canvas.save();
-    canvas.rotate(deg / 180 * pi);
-    _paint
-      ..strokeWidth = 3
-      ..color = Color(0xff8FC552)
-      ..strokeCap = StrokeCap.round;
+  double get logic1 => radius * 0.01;

-    canvas.drawLine(Offset.zero, Offset(60, 0), _paint);
-    canvas.restore();
-  }
+  // 刻度与外圈的间隔
+  double get scaleSpace => logic1 * 11;

-  void drawM(Canvas canvas, double deg) {
-    canvas.save();
-    canvas.rotate(deg / 180 * pi);
-    _paint
-      ..strokeWidth = 2
-      ..color = Color(0xff87B953)
-      ..strokeCap = StrokeCap.round;
+  // 短刻度线长
+  double get shortScaleLen => logic1 * 7;

-    canvas.drawLine(
-        Offset.zero,
-        Offset(
-          80,
-          0,
-        ),
-        _paint);
-    canvas.restore();
-  }
+  // 短刻度线长
+  double get shortLenWidth => logic1;

-  void drawS(Canvas canvas, double deg) {
-    _paint
-      ..strokeWidth = 2.5
-      ..color = Color(0xff6B6B6B)
-      ..strokeCap = StrokeCap.square
-      ..style = PaintingStyle.stroke;
-    Path path = Path();
+  // 长刻度线长
+  double get longScaleLen => logic1 * 11;

-    canvas.save();
-    canvas.rotate(deg / 180 * pi);
-
-    canvas.save();
-    canvas.rotate((360 - 270) / 2 / 180 * pi);
-    path.addArc(
-        Rect.fromPoints(Offset(-9, -9), Offset(9, 9)), 0, 270 / 180 * pi);
-    canvas.drawPath(path, _paint);
-    canvas.restore();
-
-    _paint..strokeCap = StrokeCap.round;
-    canvas.drawLine(Offset(-9, 0), Offset(-20, 0), _paint);
-
-    _paint
-      ..strokeWidth = 1
-      ..color = Colors.black;
-    canvas.drawLine(Offset(0, 0), Offset(100, 0), _paint);
-
-    _paint
-      ..strokeWidth = 3
-      ..color = Color(0xff6B6B6B);
-    canvas.drawCircle(Offset.zero, 5, _paint);
-
-    _paint
-      ..color = Color(0xff8FC552)
-      ..style = PaintingStyle.fill;
-    canvas.drawCircle(Offset.zero, 4, _paint);
-    canvas.restore();
-  }
+  // 长刻度线宽
+  double get longLineWidth => logic1 * 2;

  final TextPainter _textPainter = TextPainter(
      textAlign: TextAlign.center, textDirection: TextDirection.ltr);

  void drawText(Canvas canvas) {
-    _drawCircleText(canvas, 'Ⅸ', offsetX: -150-7.5);
-    _drawCircleText(canvas, 'Ⅲ', offsetX: 150+7.5);
-    _drawCircleText(canvas, 'Ⅵ', offsetY: 150+7.5);
-    _drawCircleText(canvas, 'Ⅻ', offsetY: -150-7.5);
-    _drawLogoText(canvas, offsetY: -80);
+    _drawCircleText(canvas, 'Ⅸ', offsetX: -radius);
+    _drawCircleText(canvas, 'Ⅲ', offsetX: radius);
+    _drawCircleText(canvas, 'Ⅵ', offsetY: radius);
+    _drawCircleText(canvas, 'Ⅻ', offsetY: -radius);
+    _drawLogoText(canvas, offsetY: -radius * 0.5);
  }

  _drawCircleText(Canvas canvas, String text,
      {double offsetX = 0, double offsetY = 0}) {
    _textPainter.text = TextSpan(
-        text: text, style: TextStyle(fontSize: 20, color: Colors.blue));
+        text: text,
+        style: TextStyle(fontSize: radius * 0.15, color: Colors.blue));
    _textPainter.layout();
    _textPainter.paint(
        canvas,
@@ -234,8 +193,8 @@ class ClockPainter extends CustomPainter {
  _drawLogoText(Canvas canvas, {double offsetX = 0, double offsetY = 0}) {
    _textPainter.text = TextSpan(
        text: 'Toly',
-        style:
-        TextStyle(fontSize: 30, color: Colors.blue, fontFamily: 'CHOPS'));
+        style: TextStyle(
+            fontSize: radius * 0.2, color: Colors.blue, fontFamily: 'CHOPS'));
    _textPainter.layout();
    _textPainter.paint(
        canvas,
@@ -243,3 +202,138 @@ class ClockPainter extends CustomPainter {
            -_textPainter.height / 2 + offsetY));
  }
 }
+
+class ClockPainter extends CustomPainter {
+  final Paint _paint = Paint()..style = PaintingStyle.stroke;
+
+  final double radius;
+  final ValueListenable<DateTime> listenable;
+
+  ClockPainter({this.listenable, this.radius = 100})
+      : super(repaint: listenable);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+
+    canvas.translate(size.width / 2, size.height / 2);
+    drawArrow(canvas, listenable.value);
+  }
+
+  void drawArrow(Canvas canvas, DateTime time) {
+    int sec = time.second;
+    int min = time.minute;
+    int hour = time.hour;
+
+    double perAngle = 360 / 60;
+
+    double secondRad = (sec * perAngle) / 180 * pi;
+    double minusRad = ((min + sec / 60) * perAngle) / 180 * pi;
+    double hourRad = ((hour + min / 60 + sec / 3600) * perAngle * 5) / 180 * pi;
+
+    canvas.save();
+    canvas.rotate(-pi / 2);
+    canvas.save();
+    canvas.rotate(minusRad);
+    drawMinus(canvas);
+    canvas.restore();
+
+    canvas.save();
+    canvas.rotate(hourRad);
+    drawHour(canvas);
+    canvas.restore();
+
+    canvas.save();
+    canvas.rotate(secondRad);
+    drawSecond(canvas);
+    canvas.restore();
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant ClockPainter oldDelegate) {
+    return oldDelegate.radius != radius || oldDelegate.listenable != listenable;
+  }
+
+  // 分针长
+  double get minusLen => logic1 * 60;
+
+  // 时针长
+  double get hourLen => logic1 * 45;
+
+  // 秒针长
+  double get secondLen => logic1 * 68;
+
+  // 时针线宽
+  double get hourLineWidth => logic1 * 3;
+
+  // 分针线宽
+  double get minusLineWidth => logic1 * 2;
+
+  // 秒针线宽
+  double get logic1 => radius * 0.01;
+
+  double get secondLineWidth => logic1;
+
+  // 长刻度线宽
+  double get longLineWidth => logic1 * 2;
+
+  void drawHour(Canvas canvas) {
+    _paint
+      ..strokeWidth = hourLineWidth
+      ..color = Color(0xff8FC552)
+      ..strokeCap = StrokeCap.round;
+    canvas.drawLine(Offset.zero, Offset(hourLen, 0), _paint);
+  }
+
+  void drawMinus(Canvas canvas) {
+    _paint
+      ..strokeWidth = minusLineWidth
+      ..color = Color(0xff87B953)
+      ..strokeCap = StrokeCap.round;
+
+    canvas.drawLine(
+        Offset.zero,
+        Offset(
+          minusLen,
+          0,
+        ),
+        _paint);
+  }
+
+  void drawSecond(Canvas canvas) {
+    _paint
+      ..strokeWidth = logic1 * 2.5
+      ..color = Color(0xff6B6B6B)
+      ..strokeCap = StrokeCap.square
+      ..style = PaintingStyle.stroke;
+    Path path = Path();
+
+    canvas.save();
+    canvas.rotate((360 - 270) / 2 / 180 * pi);
+    path.addArc(
+        Rect.fromPoints(
+            Offset(-logic1 * 9, -logic1 * 9), Offset(logic1 * 9, logic1 * 9)),
+        0,
+        270 / 180 * pi);
+    canvas.drawPath(path, _paint);
+    canvas.restore();
+
+    _paint..strokeCap = StrokeCap.round;
+    canvas.drawLine(Offset(-logic1 * 9, 0), Offset(-logic1 * 20, 0), _paint);
+
+    _paint
+      ..strokeWidth = logic1
+      ..color = Colors.black;
+    canvas.drawLine(Offset.zero, Offset(secondLen, 0), _paint);
+
+    _paint
+      ..strokeWidth = logic1 * 3
+      ..color = const Color(0xff6B6B6B);
+    canvas.drawCircle(Offset.zero, logic1 * 5, _paint);
+
+    _paint
+      ..color = const Color(0xff8FC552)
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(Offset.zero, logic1 * 4, _paint);
+  }
+}
--- a/lib/painter_system/base/draw_path_fun.dart
+++ b/lib/painter_system/base/draw_path_fun.dart
@@ -61,7 +61,7 @@ class PaperPainter extends CustomPainter {

  double f(double thta) {
    double p =
-        50 * (pow(e, cos(thta)) - 2 * cos(4 * thta) + pow(sin(thta / 12), 5));
+        40 * (pow(e, cos(thta)) - 2 * cos(4 * thta) + pow(sin(thta / 12), 5));
    return p;
  }

--- a/pubspec.lock
+++ b/pubspec.lock
@@ -57,34 +57,6 @@ packages:
      url: "https://pub.flutter-io.cn"
    source: hosted
    version: "1.15.0"
-  connectivity:
-    dependency: "direct main"
-    description:
-      name: connectivity
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "3.0.3"
-  connectivity_for_web:
-    dependency: transitive
-    description:
-      name: connectivity_for_web
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "0.4.0"
-  connectivity_macos:
-    dependency: transitive
-    description:
-      name: connectivity_macos
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "0.2.0"
-  connectivity_platform_interface:
-    dependency: transitive
-    description:
-      name: connectivity_platform_interface
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "2.0.1"
  cupertino_icons:
    dependency: "direct main"
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -25,7 +25,7 @@ dependencies:
  share: ^2.0.1 # 文字分享
  intl: ^0.17.0
  path_provider: ^2.0.1 # 路径
-  connectivity: ^3.0.3 #网络状态
+#  connectivity: ^3.0.3 #网络状态
  flutter_spinkit: ^5.0.0 # loading
  flutter_markdown: ^0.6.1 # markdown
  dio: ^3.0.10 # 网络请求