BrnBrokenLine: xDial support selected style (#319)

* add new feature XRuler support selected style

* attribute BrnPointsLine.isShowXDial was Deprecated

* optimize compare double

* optimze notes

example/lib/sample/components/charts/line/brn_broken_line_example.dart

@@ -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,
@@ -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,
       )
     ];

lib/src/components/charts/broken_line/brn_broken_line.dart

@@ -69,6 +69,9 @@ class BrnBrokenLine extends StatefulWidget {
   /// 提示 widget 是否自动消失。默认为 true
   final bool isTipWindowAutoDismiss;
 
+  /// 是否绘制 x 刻度
+  final bool isShowXDial;
+
   BrnBrokenLine({
     Key? key,
     required this.size,
@@ -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) {
@@ -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,

lib/src/components/charts/broken_line/brn_line_data.dart

@@ -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 {
@@ -101,6 +104,7 @@ class BrnPointsLine {
   double? pointInnerRadius;
 
   /// 是否显示x轴的文字，用来处理多个线条绘制的时候，同一x轴坐标不需要绘制多次，则只需要将多条线中一个标记绘制即可
+  @Deprecated('该字段废弃，X刻度是否绘制由 [BrnBrokenLine.isShowXDial]')
   bool isShowXDial;
 
   /// 标记是否为曲线

lib/src/components/charts/broken_line/brn_line_painter.dart

@@ -49,6 +49,8 @@ class BrnLinePainter extends BrnBasePainter {
 
   bool isShowXText, isShowYText;
 
+  final bool isShowXDial;
+
   final bool showPointDashLine;
 
   /// 默认的边距
@@ -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,
   }) {
@@ -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);
@@ -148,7 +152,6 @@ class BrnLinePainter extends BrnBasePainter {
     //初始化参数
     _initValue();
     _initBorder(size);
-    _drawXy(canvas, xyPaint); //坐标轴
   }
 
   void _initValue() {
@@ -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 {
+        // 此处兼容之前 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);
       }
     }

pubspec.yaml

@@ -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