dash line

DEVLOG.md

@@ -3908,6 +3908,10 @@ antv scale 的 nice number计算已经早就改为用d3的了，后续需要更
 
 charts_flutter中的虚线是自己实现的，只能画垂直或水平。fl_chart等中也是用的path_drawing
 
+什么地方提供dash api，就是当这里不能直接设置path时，可直接设置path时自己调用Paths.dashLine
+
+不管是什么类型的 source path，都叫 dash line 吧，这好像比较符合 flutter的哲学，就是一段一段分隔的线
+
 hash选用31做底数，因为它1是个不大不小的底数，2.31 * i == (i << 5) - i
 
 ## TODO

example/lib/pages/echarts.dart

@@ -230,13 +230,15 @@ class EchartsPage extends StatelessWidget {
                       value: 11.14,
                       style: StrokeStyle(
                         color: const Color(0xff5470c6).withAlpha(100),
+                        dash: [2],
                       ),
                     ),
                     LineAnnotation(
                       dim: 2,
                       value: 1.57,
                       style: StrokeStyle(
                         color: const Color(0xff91cc75).withAlpha(100),
+                        dash: [2],
                       ),
                     ),
                     MarkAnnotation(

example/lib/pages/line_area.dart

@@ -31,6 +31,13 @@ class LineAreaPage extends StatelessWidget {
                 ),
                 padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
               ),
+              Container(
+                child: const Text(
+                  '- Dash line.',
+                ),
+                padding: const EdgeInsets.fromLTRB(10, 5, 10, 0),
+                alignment: Alignment.centerLeft,
+              ),
               Container(
                 child: const Text(
                   '- With time scale in domain dimension.',
@@ -62,7 +69,7 @@ class LineAreaPage extends StatelessWidget {
                       accessor: (TimeSeriesSales datum) => datum.sales,
                     ),
                   },
-                  elements: [LineElement()],
+                  elements: [LineElement(shape: ShapeAttr(value: BasicLineShape(dash: [5, 2])))],
                   axes: [
                     Defaults.horizontalAxis,
                     Defaults.verticalAxis,

lib/graphic.dart

@@ -203,3 +203,4 @@ export 'src/common/defaults.dart' show Defaults;
 export 'src/dataflow/tuple.dart' show Tuple, Aes;
 
 export 'src/util/path.dart' show Paths;
+export 'package:path_drawing/path_drawing.dart' show DashOffset;

lib/src/aes/aes.dart

@@ -1,7 +1,4 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
-import 'package:graphic/graphic.dart';
 import 'package:graphic/src/aes/position.dart';
 import 'package:graphic/src/common/label.dart';
 import 'package:graphic/src/dataflow/operator.dart';

lib/src/common/label.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/aes/label.dart';
 import 'package:graphic/src/graffiti/figure.dart';

lib/src/common/styles.dart

@@ -1,11 +1,15 @@
 import 'dart:ui';
 
+import 'package:collection/collection.dart';
+import 'package:graphic/src/util/path.dart';
+
 /// The style of a stroke.
 class StrokeStyle {
   /// Creates a stroke style
   StrokeStyle({
     this.color = const Color(0xff000000),
     this.width = 1,
+    this.dash,
   });
 
   /// The stroke color.
@@ -14,8 +18,16 @@ class StrokeStyle {
   /// The stroke width.
   double width;
 
+  /// The circular array of dash offsets and lengths.
+  ///
+  /// For example, the array `[5, 10]` would result in dashes 5 pixels long
+  /// followed by blank spaces 10 pixels long.  The array `[5, 10, 5]` would
+  /// result in a 5 pixel dash, a 10 pixel gap, a 5 pixel dash, a 5 pixel gap,
+  /// a 10 pixel dash, etc.
+  List<double>? dash;
+
   bool operator ==(Object other) =>
-      other is StrokeStyle && color == other.color && width == other.width;
+      other is StrokeStyle && color == other.color && width == other.width && DeepCollectionEquality().equals(dash, other.dash);
 
   /// Gets [Paint] object from this stroke style.
   ///
@@ -25,4 +37,9 @@ class StrokeStyle {
     ..style = PaintingStyle.stroke
     ..color = color
     ..strokeWidth = width;
+
+  /// Gets the dash line from a source path.
+  Path dashPath(Path path) => dash == null
+    ? path
+    : Paths.dashLine(source: path, dashArray: dash!);
 }

lib/src/coord/coord.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/common/converter.dart';
 import 'package:graphic/src/dataflow/operator.dart';

lib/src/dataflow/tuple.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/common/label.dart';
 import 'package:graphic/src/coord/coord.dart';

lib/src/graffiti/figure.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 
 /// The base class of figures.

lib/src/graffiti/graffiti.dart

@@ -1,6 +1,3 @@
-import 'dart:ui';
-
-import 'package:flutter/painting.dart';
 import 'package:flutter/widgets.dart';
 
 import 'scene.dart';

lib/src/guide/annotation/line.dart

@@ -83,29 +83,29 @@ class LineAnnotRenderOp extends AnnotRenderOp<LineAnnotScene> {
     if (coord is PolarCoordConv && coord.getCanvasDim(dim) == 2) {
       scene.figures = [
         PathFigure(
-          Path()
+          style.dashPath(Path()
             ..addArc(
               Rect.fromCircle(
                 center: coord.center,
                 radius: coord.convertRadius(position),
               ),
               coord.angles.first,
               coord.angles.last - coord.angles.first,
-            ),
+            )),
           style.toPaint(),
         )
       ];
     } else {
       scene.figures = [
         PathFigure(
-          Paths.line(
+          style.dashPath(Paths.line(
             from: coord.convert(
               dim == 1 ? Offset(position, 0) : Offset(0, position),
             ),
             to: coord.convert(
               dim == 1 ? Offset(position, 1) : Offset(1, position),
             ),
-          ),
+          )),
           style.toPaint(),
         )
       ];

lib/src/guide/annotation/tag.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/common/label.dart';
 import 'package:graphic/src/graffiti/figure.dart';

lib/src/guide/axis/circular.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/common/label.dart';
 import 'package:graphic/src/common/styles.dart';
@@ -26,12 +24,12 @@ List<Figure>? renderCircularAxis(
 
   if (line != null) {
     rst.add(PathFigure(
-      Path()
+      line.dashPath(Path()
         ..addArc(
           Rect.fromCircle(center: coord.center, radius: r),
           coord.startAngle,
           coord.endAngle - coord.startAngle,
-        ),
+        )),
       line.toPaint()..style = PaintingStyle.stroke,
     ));
   }
@@ -80,10 +78,10 @@ List<Figure>? renderCircularGrid(
       final angle = coord.convertAngle(tick.position);
       if (angle >= coord.startAngle && angle <= coord.endAngle) {
         rst.add(PathFigure(
-          Paths.line(
+          tick.grid!.dashPath(Paths.line(
             from: coord.polarToOffset(angle, coord.startRadius),
             to: coord.polarToOffset(angle, coord.endRadius),
-          ),
+          )),
           tick.grid!.toPaint(),
         ));
       }

lib/src/guide/axis/horizontal.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/common/label.dart';
 import 'package:graphic/src/common/styles.dart';
@@ -25,10 +23,10 @@ List<Figure>? renderHorizontalAxis(
 
   if (line != null) {
     rst.add(PathFigure(
-      Paths.line(
+      line.dashPath(Paths.line(
         from: Offset(region.left, y),
         to: Offset(region.right, y),
-      ),
+      )),
       line.toPaint(),
     ));
   }
@@ -40,10 +38,10 @@ List<Figure>? renderHorizontalAxis(
     if (x >= region.left && x <= region.right) {
       if (tick.tickLine != null) {
         rst.add(PathFigure(
-          Paths.line(
+          tick.tickLine!.style.dashPath(Paths.line(
             from: Offset(x, y),
             to: Offset(x, y + tick.tickLine!.length * flipSign),
-          ),
+          )),
           tick.tickLine!.style.toPaint(),
         ));
       }
@@ -75,10 +73,10 @@ List<Figure>? renderHorizontalGrid(
       final x = coordLeft + tick.position * (coordRight - coordLeft);
       if (x >= region.left && x <= region.right) {
         rst.add(PathFigure(
-          Paths.line(
+          tick.grid!.dashPath(Paths.line(
             from: Offset(x, region.bottom),
             to: Offset(x, region.top),
-          ),
+          )),
           tick.grid!.toPaint(),
         ));
       }

lib/src/guide/axis/radial.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/common/label.dart';
 import 'package:graphic/src/common/styles.dart';
@@ -61,10 +59,10 @@ List<Figure>? renderRadialAxis(
 
   if (line != null) {
     rst.add(PathFigure(
-      Paths.line(
+      line.dashPath(Paths.line(
         from: coord.polarToOffset(angle, coord.startRadius),
         to: coord.polarToOffset(angle, coord.endRadius),
-      ),
+      )),
       line.toPaint(),
     ));
   }
@@ -102,12 +100,12 @@ List<Figure>? renderRadialGrid(
       final r = coord.convertRadius(tick.position);
       if (r >= coord.startRadius && r <= coord.endRadius) {
         rst.add(PathFigure(
-          Path()
+          tick.grid!.dashPath(Path()
             ..addArc(
               Rect.fromCircle(center: coord.center, radius: r),
               coord.startAngle,
               coord.endAngle - coord.startAngle,
-            ),
+            )),
           tick.grid!.toPaint()..style = PaintingStyle.stroke,
         ));
       }

lib/src/guide/axis/vertical.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/painting.dart';
 import 'package:graphic/src/common/label.dart';
 import 'package:graphic/src/common/styles.dart';
@@ -25,10 +23,10 @@ List<Figure>? renderVerticalAxis(
 
   if (line != null) {
     rst.add(PathFigure(
-      Paths.line(
+      line.dashPath(Paths.line(
         from: Offset(x, region.bottom),
         to: Offset(x, region.top),
-      ),
+      )),
       line.toPaint(),
     ));
   }
@@ -40,10 +38,10 @@ List<Figure>? renderVerticalAxis(
     if (y >= region.top && y <= region.bottom) {
       if (tick.tickLine != null) {
         rst.add(PathFigure(
-          Paths.line(
+          tick.tickLine!.style.dashPath(Paths.line(
             from: Offset(x, y),
             to: Offset(x - tick.tickLine!.length * flipSign, y),
-          ),
+          )),
           tick.tickLine!.style.toPaint(),
         ));
       }
@@ -75,10 +73,10 @@ List<Figure>? renderVerticalGrid(
       final y = coordBottom - tick.position * (coordBottom - coordTop);
       if (y >= region.top && y <= region.bottom) {
         rst.add(PathFigure(
-          Paths.line(
+          tick.grid!.dashPath(Paths.line(
             from: Offset(region.left, y),
             to: Offset(region.right, y),
-          ),
+          )),
           tick.grid!.toPaint(),
         ));
       }

lib/src/guide/interaction/crosshair.dart

@@ -143,19 +143,19 @@ class CrosshairRenderOp extends Render<CrosshairScene> {
       final canvasCross = coord.convert(cross);
       if (canvasStyleX != null) {
         figures.add(PathFigure(
-          Paths.line(
+          canvasStyleX.dashPath(Paths.line(
             from: Offset(canvasCross.dx, region.top),
             to: Offset(canvasCross.dx, region.bottom),
-          ),
+          )),
           canvasStyleX.toPaint(),
         ));
       }
       if (canvasStyleY != null) {
         figures.add(PathFigure(
-          Paths.line(
+          canvasStyleY.dashPath(Paths.line(
             from: Offset(region.left, canvasCross.dy),
             to: Offset(region.right, canvasCross.dy),
-          ),
+          )),
           canvasStyleY.toPaint(),
         ));
       }
@@ -165,23 +165,23 @@ class CrosshairRenderOp extends Render<CrosshairScene> {
         final angle = polarCoord
             .convertAngle(polarCoord.transposed ? cross.dy : cross.dx);
         figures.add(PathFigure(
-          Paths.line(
+          canvasStyleX.dashPath(Paths.line(
             from: polarCoord.polarToOffset(angle, coord.startRadius),
             to: polarCoord.polarToOffset(angle, coord.endRadius),
-          ),
+          )),
           canvasStyleX.toPaint(),
         ));
       }
       if (canvasStyleY != null) {
         final r = polarCoord
             .convertRadius(polarCoord.transposed ? cross.dx : cross.dy);
         figures.add(PathFigure(
-          Path()
+          canvasStyleY.dashPath(Path()
             ..addArc(
               Rect.fromCircle(center: coord.center, radius: r),
               coord.startAngle,
               coord.endAngle - coord.startAngle,
-            ),
+            )),
           canvasStyleY.toPaint()..style = PaintingStyle.stroke,
         ));
       }