feat: update tree map

xiaoranran · xiaoranran · commit 2420da5ae022 · 2020-11-16T13:11:14.000+08:00
diff --git a/ios/Flutter/.last_build_id b/ios/Flutter/.last_build_id
@@ -1 +1 @@
-13893bd379d1ba2b9cab10e31da25434
+9fdedd93144233526c9f0f63902a1889
diff --git a/lib/charts/tree_map/draw_tree_rects.dart b/lib/charts/tree_map/draw_tree_rects.dart
@@ -4,10 +4,6 @@ import 'package:flutter/material.dart';
 import '../../colors.dart';
 import './tree_node.dart';
 
-Paint paint = Paint()
-  ..style = PaintingStyle.stroke
-  ..strokeWidth = 2.0;
-
 TextPainter textPainter = TextPainter(
   text: TextSpan(),
   textAlign: TextAlign.center,
@@ -22,7 +18,7 @@ void _drawText(double value, Canvas canvas, Offset offset) {
     text: value.toString(),
     style: TextStyle(
       fontSize: 24.0,
-      color: colors[Random().nextInt(colors.length)],
+      color: Colors.white,
     ),
   );
 
@@ -35,48 +31,11 @@ void _drawText(double value, Canvas canvas, Offset offset) {
     ..paint(canvas, offset);
 }
 
-void _drawLeftNode(
-    TreeNode node, Rect rootRect, TreeNode rootNode, Canvas canvas) {
-  if (node == null) {
-    return;
-  }
-
-  if (node.left == null && node.right == null) {
-    return;
-  }
-
-  double left;
-  double top;
-  double width;
-  double height;
-
-  left = rootRect.left;
-  width = rootRect.width;
-  top = rootRect.top;
-  height = (node.left.value / rootNode.value) * rootRect.height;
-
-  Rect rectLeft = Rect.fromLTWH(left, top, width, height);
-  canvas.drawRect(rectLeft, paint);
-
-  _drawText(
-    node.left.value,
-    canvas,
-    Offset(left + width / 2 - 12.0, top + height / 2 - 12.0),
-  );
-}
-
-void _drawRihgtNode(TreeNode node) {
-  if (node == null) {
-    return;
-  }
-}
-
-int level = 0;
-
 void drawTreeRects(
   TreeNode node,
   Rect rootRectLeft,
   TreeNode rootNodeLeft,
+  int level,
   Canvas canvas,
 ) {
   if (node == null) {
@@ -86,6 +45,17 @@ void drawTreeRects(
     return;
   }
 
+  Paint paint = Paint()
+    ..style = PaintingStyle.fill
+    ..color = colors[Random().nextInt(colors.length)]
+    ..isAntiAlias = true;
+
+  Paint linePaint = Paint()
+    ..style = PaintingStyle.stroke
+    ..color = Colors.white
+    ..strokeWidth = 2.0
+    ..isAntiAlias = true;
+
   Rect rectLeft;
   Rect rectRight;
 
@@ -95,15 +65,16 @@ void drawTreeRects(
     double width;
     double height;
 
+    top = rootRectLeft.top;
     left = rootRectLeft.left;
     width = rootRectLeft.width;
-    top = rootRectLeft.top;
     height = (node.left.value / rootNodeLeft.value) * rootRectLeft.height;
-
     rectLeft = Rect.fromLTWH(left, top, width, height);
-    canvas.drawRect(rectLeft, paint);
 
     if (node.left.left == null && node.left.right == null) {
+      canvas.drawRect(rectLeft, paint);
+      canvas.drawRect(rectLeft, linePaint);
+
       _drawText(
         node.left.value,
         canvas,
@@ -115,11 +86,12 @@ void drawTreeRects(
     top = rootRectLeft.top + height;
     width = rootRectLeft.width;
     height = (node.right.value / rootNodeLeft.value) * rootRectLeft.height;
-
     rectRight = Rect.fromLTWH(left, top, width, height);
-    canvas.drawRect(rectRight, paint);
 
     if (node.right.left == null && node.right.right == null) {
+      canvas.drawRect(rectRight, paint);
+      canvas.drawRect(rectRight, linePaint);
+
       _drawText(
         node.right.value,
         canvas,
@@ -136,9 +108,11 @@ void drawTreeRects(
     left = rootRectLeft.left;
     width = (node.left.value / rootNodeLeft.value) * rootRectLeft.width;
     rectLeft = Rect.fromLTWH(left, top, width, height);
-    canvas.drawRect(rectLeft, paint);
 
     if (node.left.left == null && node.left.right == null) {
+      canvas.drawRect(rectLeft, paint);
+      canvas.drawRect(rectLeft, linePaint);
+
       _drawText(
         node.left.value,
         canvas,
@@ -151,7 +125,17 @@ void drawTreeRects(
     left = rootRectLeft.left + width;
     width = (node.right.value / rootNodeLeft.value) * rootRectLeft.width;
     rectRight = Rect.fromLTWH(left, top, width, height);
-    canvas.drawRect(rectRight, paint);
+
+    if (node.left.left == null && node.left.right == null) {
+      canvas.drawRect(rectRight, paint);
+      canvas.drawRect(rectRight, linePaint);
+
+      _drawText(
+        node.right.value,
+        canvas,
+        Offset(left + width / 2 - 12.0, top + height / 2 - 12.0),
+      );
+    }
   }
 
   level++;
@@ -160,13 +144,15 @@ void drawTreeRects(
     node.left,
     rectLeft,
     node.left,
+    level,
     canvas,
   );
 
   drawTreeRects(
     node.right,
     rectRight,
     node.right,
+    level,
     canvas,
   );
 }
diff --git a/lib/charts/tree_map/tree_map.dart b/lib/charts/tree_map/tree_map.dart
@@ -8,36 +8,41 @@ import './draw_tree_rects.dart';
 // 2. 前序遍历二叉树
 // 3. 遍历过程中绘制每个字树
 
-class TreeMap extends StatefulWidget {
-  @override
-  _TreeMapState createState() => _TreeMapState();
-}
+class TreeMap extends StatelessWidget {
+  final List<double> datas;
+
+  const TreeMap({@required this.datas});
 
-class _TreeMapState extends State<TreeMap> {
   @override
   Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: TreeMapPainter(),
-      child: Container(
-        width: 500,
-        height: 500,
-      ),
+    return LayoutBuilder(
+      builder: (BuildContext context, BoxConstraints constraints) {
+        return CustomPaint(
+          painter: TreeMapPainter(
+            datas: datas,
+          ),
+          size: constraints.biggest,
+        );
+      },
     );
   }
 }
 
 class TreeMapPainter extends CustomPainter {
+  final List<double> datas;
+
+  TreeMapPainter({@required this.datas});
+
   @override
   void paint(Canvas canvas, Size size) {
-    List<double> input = [2, 10, 4, 3, 7, 5, 9, 8, 1, 6];
     Paint paint = Paint()
       ..color = Colors.black12
       ..style = PaintingStyle.fill;
 
     Rect rootRect = Rect.fromLTWH(0, 0, size.width, size.height);
-    TreeNode rootNode = parseArrayToBST(input);
+    TreeNode rootNode = parseArrayToBST(datas);
     canvas.drawRect(rootRect, paint);
-    drawTreeRects(rootNode, rootRect, rootNode, canvas);
+    drawTreeRects(rootNode, rootRect, rootNode, 0, canvas);
   }
 
   @override
diff --git a/lib/pages/tree_map_page.dart b/lib/pages/tree_map_page.dart
@@ -11,159 +11,6 @@ class TreeMapPage extends StatefulWidget {
 class _TreeMapPageState extends State<TreeMapPage> {
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: TreeMap(),
-    );
+    return TreeMap(datas: [2, 10, 4, 3, 7, 5, 9, 8, 1, 6]);
   }
 }
-
-// class Square {
-//   final double x;
-//   final double y;
-//   final double width;
-//   final double height;
-//   final Color color;
-
-//   Square({
-//     this.x,
-//     this.y,
-//     this.width,
-//     this.height,
-//     this.color,
-//   });
-
-//   Map toJson() {
-//     return {
-//       "x": x,
-//       "y": y,
-//       "width": width,
-//       "height": height,
-//       "color": color.toString(),
-//     };
-//   }
-// }
-
-// class TreeMapPainter extends CustomPainter {
-//   void _draw(Canvas canvas, List<Square> squares) {
-//     final Paint paint = Paint()
-//       ..strokeWidth = 2
-//       ..isAntiAlias = true
-//       ..style = PaintingStyle.fill;
-
-//     final Paint paint2 = Paint()
-//       ..strokeWidth = 2
-//       ..isAntiAlias = true
-//       ..color = Colors.black54
-//       ..style = PaintingStyle.stroke;
-
-//     for (int i = 0; i < squares.length; i++) {
-//       final Square square = squares[i];
-//       final Rect rect = Rect.fromLTWH(
-//         square.x,
-//         square.y,
-//         square.width,
-//         square.height,
-//       );
-
-//       paint.color = square.color;
-//       // paint.color = Random().nextBool()
-//       //     ? Colors.white
-//       //     : colors[Random().nextInt(colors.length)].withOpacity(.8);
-
-//       canvas.drawRect(rect, paint);
-//       canvas.drawRect(rect, paint2);
-//     }
-//   }
-
-//   void _splitSquaresWith(Map coordinates, List<Square> squares) {
-//     final double x = coordinates["x"];
-//     final double y = coordinates["y"];
-
-//     for (int i = squares.length - 1; i >= 0; i--) {
-//       final Square square = squares[i];
-
-//       if (x != null && x > square.x && x < square.x + square.width) {
-//         if (Random().nextBool()) {
-//           squares.removeAt(i);
-//           _splitOnX(square, x, squares);
-//         }
-//       }
-
-//       if (y != null && y > square.y && y < square.y + square.height) {
-//         if (Random().nextBool()) {
-//           squares.removeAt(i);
-//           _splitOnY(square, y, squares);
-//         }
-//       }
-//     }
-//   }
-
-//   void _splitOnX(Square square, double splitAt, List<Square> squares) {
-//     final Square squareA = Square(
-//       x: square.x,
-//       y: square.y,
-//       width: square.width - (square.width - splitAt + square.x),
-//       height: square.height,
-//       color: colors[Random().nextInt(colors.length)].withOpacity(.8),
-//     );
-
-//     final Square squareB = Square(
-//       x: splitAt,
-//       y: square.y,
-//       width: square.width - splitAt + square.x,
-//       height: square.height,
-//       color: colors[Random().nextInt(colors.length)].withOpacity(.8),
-//     );
-
-//     squares.add(squareA);
-//     squares.add(squareB);
-//   }
-
-//   void _splitOnY(Square square, double splitAt, List<Square> squares) {
-//     final Square squareA = Square(
-//       x: square.x,
-//       y: square.y,
-//       width: square.width,
-//       height: square.height - (square.height - splitAt + square.y),
-//       color: colors[Random().nextInt(colors.length)].withOpacity(.8),
-//     );
-
-//     final Square squareB = Square(
-//       x: square.x,
-//       y: splitAt,
-//       width: square.width,
-//       height: square.height - splitAt + square.y,
-//       color: colors[Random().nextInt(colors.length)].withOpacity(.8),
-//     );
-
-//     squares.add(squareA);
-//     squares.add(squareB);
-//   }
-
-//   @override
-//   void paint(Canvas canvas, Size size) {
-//     final List<Square> squares = [
-//       Square(
-//         x: 0,
-//         y: 0,
-//         width: size.width,
-//         height: size.height,
-//         color: Colors.white,
-//       ),
-//     ];
-
-//     double step = size.width / 7;
-
-//     for (double i = 0; i < size.width; i += step) {
-//       _splitSquaresWith({"y": i}, squares);
-//       _splitSquaresWith({"x": i}, squares);
-//     }
-//     _draw(canvas, squares);
-//   }
-
-//   @override
-//   bool shouldRepaint(TreeMapPainter oldDelegate) => false;
-
-//   @override
-//   bool shouldRebuildSemantics(TreeMapPainter oldDelegate) => false;
-// }

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-13893bd379d1ba2b9cab10e31da25434`
	`1`	`+9fdedd93144233526c9f0f63902a1889`