有什么办法可以拖曳模拟时钟中的Hand Hour?

时间:2019-05-06 11:52:21

标签: flutter

我正在尝试创建一个模拟时钟,用户可以通过拖动时针和分针来选择时间。 我有这个代码用于工作时间

   import 'dart:math';
   import 'package:flutter/material.dart';

   class HourHandPainter extends CustomPainter{
     final bool showHeartShape;
     final Paint hourHandPaint;
     int hours;
     int minutes;

     HourHandPainter({this.hours, this.minutes, this.showHeartShape = 
       false}):hourHandPaint= new Paint(){
       //hourHandPaint.color= Colors.black87;
       hourHandPaint.color=Colors.blue;
       hourHandPaint.style= PaintingStyle.fill;
     }

     @override
     void paint(Canvas canvas, Size size) {
        final radius = size.width/2;
        // To draw hour hand
        canvas.save();

        canvas.translate(radius, radius);

     //checks if hour is greater than 12 before calculating rotation
canvas.rotate(this.hours>=12?
2*pi*((this.hours-12)/12 + (this.minutes/720)):
2*pi*((this.hours/12)+ (this.minutes/720))
);


Path path= new Path();

if (showHeartShape) {
  //heart shape head for the hour hand
  path.moveTo(0.0, -radius + radius*15.0/137.5);
  path.quadraticBezierTo(radius*(-3.5)/137.5, -radius + radius*25.0/137.5, radius*(-15.0)/137.5, -radius + radius / 4);
  path.quadraticBezierTo(
      radius*(-20.0)/137.5, -radius + radius / 3, radius*(-7.5)/137.5, -radius + radius / 3);
  path.lineTo(0.0, -radius + radius / 4);
  path.lineTo(7.5, -radius + radius / 3);
  path.quadraticBezierTo(
      radius*(20.0)/137.5, -radius + radius / 3, radius*(15.0)/137.5, -radius + radius / 4);
  path.quadraticBezierTo(radius*(3.5)/137.5, -radius + radius*(25.0)/137.5, 0.0, -radius + radius*15.0/137.5);
}

//hour hand stem
path.moveTo(-1.0, -radius+radius/4);
path.lineTo(-5.0, -radius+radius/2);
path.lineTo(-2.0, 0.0);
path.lineTo(2.0, 0.0);
path.lineTo(5.0, -radius+radius/2);
path.lineTo(1.0, -radius+radius/4);
path.close();

canvas.drawPath(path, hourHandPaint);
canvas.drawShadow(path, Colors.black, 2.0, false);


canvas.restore();

}

@override
bool shouldRepaint(HourHandPainter oldDelegate) {
   return true;
  }
}

如何使时针和分针可拖动,我也想知道如何用拖动间隔填充一些颜色。可以说我拖了10:00-12:00的时间,因为我想用一些符号来填充蓝色。

谢谢

0 个答案:

没有答案