Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BrnBrokenLine: xDial support selected style #319

Merged
merged 4 commits into from
Sep 22, 2022
Merged

BrnBrokenLine: xDial support selected style #319

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b0a3071
add new feature XRuler support selected style
zhoujuanjuan Sep 2, 2022
7df3ad3
attribute BrnPointsLine.isShowXDial was Deprecated
zhoujuanjuan Sep 5, 2022
d4e4378
optimize compare double
zhoujuanjuan Sep 21, 2022
b8dae5b
optimze notes
zhoujuanjuan Sep 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion example/lib/sample/components/charts/line/brn_broken_line_example.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,11 @@ class _BrokenLineExampleState extends State<BrokenLineExample> {
showPointDashLine: true,
yHintLineOffset: 30,
isTipWindowAutoDismiss: false,
isShowXDial: true,
lines: [
BrnPointsLine(
isShowPointText: true,
isShowXDial: true,
isShowXDial: false,
lineWidth: 3,
pointRadius: 4,
isShowPoint: true,
Expand Down Expand Up @@ -325,31 +326,37 @@ class _BrokenLineExampleState extends State<BrokenLineExample> {
BrnDialItem(
dialText: '1月',
dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
selectedDialTextStyle: TextStyle(fontSize: 14.0, color: Colors.green),
value: 1,
),
BrnDialItem(
dialText: '2月',
dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
selectedDialTextStyle: TextStyle(fontSize: 14.0, color: Colors.red),
value: 2,
),
BrnDialItem(
dialText: '3月',
dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
selectedDialTextStyle: TextStyle(fontSize: 14.0, color: Colors.black),
value: 3,
),
BrnDialItem(
dialText: '5月',
dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
selectedDialTextStyle: TextStyle(fontSize: 14.0, color: Colors.orange),
value: 5,
),
BrnDialItem(
dialText: '6月',
dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
selectedDialTextStyle: TextStyle(fontSize: 14.0, color: Colors.yellow),
value: 6,
),
BrnDialItem(
dialText: '7月',
dialTextStyle: TextStyle(fontSize: 12.0, color: Color(0xFF999999)),
selectedDialTextStyle: TextStyle(fontSize: 14.0, color: Colors.amberAccent),
value: 7,
)
];
Expand Down
5 changes: 5 additions & 0 deletions lib/src/components/charts/broken_line/brn_broken_line.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ class BrnBrokenLine extends StatefulWidget {
/// 提示 widget 是否自动消失。默认为 true
final bool isTipWindowAutoDismiss;

/// 是否绘制 x 刻度
final bool isShowXDial;

BrnBrokenLine({
Key? key,
required this.size,
Expand All @@ -94,6 +97,7 @@ class BrnBrokenLine extends StatefulWidget {
this.isTipWindowAutoDismiss = true,
this.isShowXDialText = false,
this.isShowYDialText = false,
this.isShowXDial = true
}) : super(key: key) {
// 设置自定义 X 轴时，检查 x 轴的最大、最小刻度范围
if (xDialValues != null) {
Expand Down Expand Up @@ -131,6 +135,7 @@ class BrnBrokenLineState extends State<BrnBrokenLine> {
hintLineSolid: widget.isHintLineSolid,
hintLineColor: widget.hintLineColor,
isShowXText: widget.isShowXDialText,
isShowXDial: widget.isShowXDial,
);
var yPainter = BrnLineYPainter(
widget.lines,
Expand Down
6 changes: 5 additions & 1 deletion lib/src/components/charts/broken_line/brn_line_data.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ class BrnDialItem {
/// 刻度标志样式
TextStyle? dialTextStyle;

/// 刻度选中样式
TextStyle? selectedDialTextStyle;

/// x,y 轴刻度值。用于刻度在坐标的真实定位
double value;

BrnDialItem({this.dialText, this.dialTextStyle, required this.value});
BrnDialItem({this.dialText, this.dialTextStyle, this.selectedDialTextStyle,required this.value});
}

class BrnPointData {
Expand Down Expand Up @@ -101,6 +104,7 @@ class BrnPointsLine {
double? pointInnerRadius;

/// 是否显示x轴的文字，用来处理多个线条绘制的时候，同一x轴坐标不需要绘制多次，则只需要将多条线中一个标记绘制即可
@Deprecated('该字段废弃，X刻度是否绘制由 [BrnBrokenLine.isShowXDial]')
bool isShowXDial;

/// 标记是否为曲线
Expand Down
40 changes: 30 additions & 10 deletions lib/src/components/charts/broken_line/brn_line_painter.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ class BrnLinePainter extends BrnBasePainter {

bool isShowXText, isShowYText;

final bool isShowXDial;

final bool showPointDashLine;

/// 默认的边距
Expand Down Expand Up @@ -96,6 +98,7 @@ class BrnLinePainter extends BrnBasePainter {
required this.isShowHintY,
required this.hintLineSolid,
required this.hintLineColor,
this.isShowXDial = true,
this.isShowXText = false,
this.isShowYText = false,
}) {
Expand Down Expand Up @@ -133,6 +136,7 @@ class BrnLinePainter extends BrnBasePainter {
..style = PaintingStyle.stroke;
_init(canvas, size, xyPaint);
_initPath(canvas, xyPaint);
_drawXy(canvas, xyPaint); //坐标轴
_drawSelectPointWithIndex(canvas, xyPaint);
_drawLine(canvas); //曲线或折线
_drawPointDisplayText(canvas);
Expand All @@ -148,7 +152,6 @@ class BrnLinePainter extends BrnBasePainter {
//初始化参数
_initValue();
_initBorder(size);
_drawXy(canvas, xyPaint); //坐标轴
}

void _initValue() {
Expand Down Expand Up @@ -309,36 +312,53 @@ class BrnLinePainter extends BrnBasePainter {

if (lines.isNotEmpty) {
//绘制x轴的文字部分
for (var item in lines) {
if (item.points.isNotEmpty && item.isShowXDial) {
_drawXRuler(canvas, paint..color = xDialColor!, item.points);
if (isShowXDial) {
_drawXRuler(canvas, paint..color = xDialColor!);
} else {
// 此处逻辑已废弃
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个注释看着有点迷惑人，可以去掉 : )

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那这样写？此处兼容之前 item.isShowXDial属性，建议使用全局isShowXDial

for (var item in lines) {
if (item.isShowXDial) {
_drawXRuler(canvas, paint..color = xDialColor!);
}
}
}
}
}

///x轴刻度 & 辅助线
void _drawXRuler(Canvas canvas, Paint paint, List<BrnPointData> points) {
void _drawXRuler(Canvas canvas, Paint paint) {
double? _selectedPointX = -1.0;
if (lineSelectIndex >= 0 && pointSelectIndex >= 0) {
_selectedPointX = _linePointPositions[lineSelectIndex][pointSelectIndex].x as double? ;
}
if (xDialValues != null && xDialValues!.isNotEmpty) {
// 获取刻度长度
for (var i = 0; i < xDialValues!.length; i++) {
double _xPosition = _startX +
(xDialValues![i].value - xDialMin!) /
(xDialMax! - xDialMin!) *
_fixedWidth;

_selectedPointX = _selectedPointX ?? 0.0;
bool isXRulerSelected = (_selectedPointX - _xPosition).abs() < 1.0;

///绘制x轴文本
var tpX = TextPainter(
textAlign: TextAlign.center,
ellipsis: '.',
text: TextSpan(
text: xDialValues![i].dialText,
style: xDialValues![i].dialTextStyle),
style: isXRulerSelected
? xDialValues![i].selectedDialTextStyle ??
xDialValues![i].dialTextStyle
: xDialValues![i].dialTextStyle),
textDirection: TextDirection.ltr)
..layout();
// 开始绘制刻度
_drawXRuleByPointPosition(
tpX,
canvas,
_startX +
(xDialValues![i].value - xDialMin!) /
(xDialMax! - xDialMin!) *
_fixedWidth,
_xPosition,
paint);
}
}
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ environment:
dependencies:
flutter:
sdk: flutter
xml: ^5.1.2
xml: ^6.1.0
lpinyin: ^2.0.3
path_drawing: ^1.0.0
flutter_easyrefresh: ^2.2.1
Expand Down