Skip to content

Commit 36ff99e

Browse files
committed
💄 Improve the UI of the exposure point widget when manually focus
1 parent 107d153 commit 36ff99e

File tree

1 file changed

+32
-82
lines changed

1 file changed

+32
-82
lines changed

lib/src/widget/exposure_point_widget.dart

Lines changed: 32 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
/// [Author] Alex (https://github.com/AlexV525)
33
/// [Date] 2021-01-09 18:43
44
///
5-
import 'dart:math' as math;
6-
75
import 'package:flutter/material.dart';
86

97
import 'builder/tween_animation_builder_2.dart';
@@ -56,95 +54,47 @@ class ExposurePointPainter extends CustomPainter {
5654
final double strokeWidth;
5755
final Color color;
5856

57+
Radius get _circularRadius => Radius.circular(radius);
58+
5959
@override
6060
void paint(Canvas canvas, Size size) {
6161
final Size _dividedSize = size / 3;
62+
final double _lineLength = _dividedSize.width - radius;
6263
final Paint _paint = Paint()
6364
..style = PaintingStyle.stroke
6465
..color = color
6566
..strokeWidth = strokeWidth;
6667

68+
final Path path = Path()
69+
// 先移动到左上组弧的顺时针起始位
70+
..moveTo(0, _dividedSize.height)
71+
// 左上组弧
72+
..relativeLineTo(0, -_lineLength)
73+
..relativeArcToPoint(Offset(radius, -radius), radius: _circularRadius)
74+
..relativeLineTo(_lineLength, 0)
75+
// 移动至右上组弧起始位
76+
..relativeMoveTo(_dividedSize.width, 0)
77+
// 右上组弧
78+
..relativeLineTo(_lineLength, 0)
79+
..relativeArcToPoint(Offset(radius, radius), radius: _circularRadius)
80+
..relativeLineTo(0, _lineLength)
81+
// 移动至右下组弧起始位
82+
..relativeMoveTo(0, _dividedSize.height)
83+
// 右下组弧
84+
..relativeLineTo(0, _lineLength)
85+
..relativeArcToPoint(Offset(-radius, radius), radius: _circularRadius)
86+
..relativeLineTo(-_lineLength, 0)
87+
// 移动至左下组弧起始位
88+
..relativeMoveTo(-_dividedSize.width, 0)
89+
// 左下组弧
90+
..relativeLineTo(-_lineLength, 0)
91+
..relativeArcToPoint(Offset(-radius, -radius), radius: _circularRadius)
92+
..relativeLineTo(0, -_lineLength)
93+
// 移动至左上组弧起始位
94+
..relativeMoveTo(0, -_dividedSize.height)
95+
..close();
6796
canvas
68-
// 左上角组弧
69-
..drawLine(Offset(radius, 0), Offset(_dividedSize.width, 0), _paint)
70-
..drawArc(
71-
Rect.fromCenter(
72-
center: Offset(radius, radius),
73-
width: radius * 2,
74-
height: radius * 2,
75-
),
76-
-math.pi,
77-
math.pi / 2,
78-
false,
79-
_paint,
80-
)
81-
..drawLine(Offset(0, _dividedSize.height), Offset(0, radius), _paint)
82-
// 右上角组弧
83-
..drawLine(
84-
Offset(_dividedSize.width * 2, 0),
85-
Offset(size.width - radius, 0),
86-
_paint,
87-
)
88-
..drawArc(
89-
Rect.fromCenter(
90-
center: Offset(size.width - radius, radius),
91-
width: radius * 2,
92-
height: radius * 2,
93-
),
94-
-math.pi / 2,
95-
math.pi / 2,
96-
false,
97-
_paint,
98-
)
99-
..drawLine(
100-
Offset(size.width, radius),
101-
Offset(size.width, _dividedSize.height),
102-
_paint,
103-
)
104-
// 右下角组弧
105-
..drawLine(
106-
Offset(size.width, _dividedSize.height * 2),
107-
Offset(size.width, size.height - radius),
108-
_paint,
109-
)
110-
..drawArc(
111-
Rect.fromCenter(
112-
center: Offset(size.width - radius, size.height - radius),
113-
width: radius * 2,
114-
height: radius * 2,
115-
),
116-
0,
117-
math.pi / 2,
118-
false,
119-
_paint,
120-
)
121-
..drawLine(
122-
Offset(size.height - radius, size.height),
123-
Offset(size.height - _dividedSize.width, size.height),
124-
_paint,
125-
)
126-
// 左下角组弧
127-
..drawLine(
128-
Offset(_dividedSize.width, size.height),
129-
Offset(radius, size.height),
130-
_paint,
131-
)
132-
..drawArc(
133-
Rect.fromCenter(
134-
center: Offset(radius, size.height - radius),
135-
width: radius * 2,
136-
height: radius * 2,
137-
),
138-
math.pi / 2,
139-
math.pi / 2,
140-
false,
141-
_paint,
142-
)
143-
..drawLine(
144-
Offset(0, size.height - radius),
145-
Offset(0, size.height - _dividedSize.height),
146-
_paint,
147-
)
97+
..drawPath(path, _paint)
14898
// 中心圆
14999
..drawCircle(
150100
Offset(size.width / 2, size.height / 2),

0 commit comments

Comments
 (0)