Flutter CustomPaint自定义控件 时钟

时钟效果
时钟效果

我们将用 CustomPaint 来绘制我们的时钟。CustomPaint 的重要参数 paintersizepainter 是一个继承了CustomPainter 的对象,主要实现了绘画控件的功能。size 指定了控件的大小,如果 CustomPaintchild 不为空,size 的值就是 child 控件的大小,指定 size 的值则无效;如果 child 为空,所指定的 size 的值,就是画布的大小。

ClockPainter 继承了 CustomPainter,实现了其中两个重要方法:paintshouldRepaintpaint 当自定义控件需要重画时被调用。shouldRepaint 则决定当条件变化时是否需要重画。

首先先时钟的边框,代码如下,只需 drawCircle 就可以实现边框的绘制。

时钟边框
时钟边框

canvas 的起始点是画布的左上角坐标点为起点,即 x,y 都为零。drawCircle 画一个指定了半径的圆。圆的形状和样式由 Paint 对象指定。style 决定了是画圆盘(PaintingStyle.fill)还是圆环(PaintingStyle.stroke)。当 style 设定为PaintingStyle.stroke 时,strokeWidth 就是指定了圆环的宽度。

其次,可以画时钟刻度和数字了。

刻度
刻度

时钟的刻度占整个圆弧的 360/60=6 度,运用数学公式每个刻度点的坐标,然后用 drawPoints 画出每一个刻度点。

数字
数字

canvas.save() 保存当前画布,以便画完数字恢复。
canvas.translate(radius, radius) 把画布的起始点移到画布的中心。
再次保存画布后,再把起始点移到正上方位置,这里是把起始点数字 12 的位置。
TextPainter用来画文字。
canvas.rotate(-angle.toDouble() * i); 以当前画布起始点旋转一个角度,这是为了保证每个数字在下面旋转到对应的位置后保持竖直显示。
canvas.restore() 重置画布,即把画布的起始点定位到控件的中心位置。
canvas.rotate(angle.toDouble()) 以控件中心为原点旋转一个角度,即把数字旋转到对应的位置。数字 12 旋转角度为零,数字 1 旋转角度为 30 度。
所有的数字都画完并旋转到对应的位置后即可恢复起始点到控件的左上角。

最后,我们接着画时针,分针,秒针。

完整时钟
完整时钟

一个小时占时钟角度为 30 度,利用三角函数算出时针的两个点,用 drawLine 画出带宽度的时针。
每一分钟每一秒中所占的角度为 6 度,同样利用三角函数算出各自对应的两点,再画直线就可以得到分针,秒针。

完整的代码如下:

使用的代码如下:

参考链接


Flutter CustomPaint自定义控件 时钟

发布者

发表回复

您的电子邮箱地址不会被公开。