Add Polygon label rotation (#1332)

* Add ability to set polygon labels to rotate Rotation will keep the polygon labels facing the top of the display similar to rotation of a marker. Rotation is about the center of the text. * Add examples with labels Co-authored-by: Jefferey Petersen <[email protected]>
fleaflet · Aug 17, 2022 · b4ba20d · b4ba20d
1 parent 3eda247
commit b4ba20d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/example/lib/pages/polygon.dart b/example/lib/pages/polygon.dart
@@ -35,6 +35,21 @@ class PolygonPage extends StatelessWidget {
       LatLng(44.399, 1.76),
     ];
 
+    final labelPoints = <LatLng>[
+      LatLng(60.16, -9.38),
+      LatLng(60.16, -4.16),
+      LatLng(61.18, -4.16),
+      LatLng(61.18, -9.38),
+    ];
+
+    final labelRotatedPoints = <LatLng>[
+      LatLng(58.21, -10.28),
+      LatLng(58.21, -7.01),
+      LatLng(59.77, -7.01),
+      LatLng(59.77, -10.28),
+    ];
+
+
     return Scaffold(
       appBar: AppBar(title: const Text('Polygons')),
       drawer: buildDrawer(context, PolygonPage.route),
@@ -88,6 +103,19 @@ class PolygonPage extends StatelessWidget {
                       borderColor: Colors.lightBlue,
                       color: Colors.lightBlue,
                     ),
+                    Polygon(
+                      points: labelPoints,
+                      borderStrokeWidth: 4,
+                      borderColor: Colors.purple,
+                      label: "Label!",
+                    ),
+                    Polygon(
+                      points: labelRotatedPoints,
+                      borderStrokeWidth: 4,
+                      borderColor: Colors.purple,
+                      label: "Rotated!",
+                      rotateLabel: true
+                    ),
                   ]),
                 ],
               ),

diff --git a/lib/src/layer/label.dart b/lib/src/layer/label.dart
@@ -10,7 +10,9 @@ class Label {
     Canvas canvas,
     List<Offset> points,
     String? labelText,
-    TextStyle? labelStyle, {
+    TextStyle? labelStyle,
+    double rotationRad, {
+    bool rotate = false,
     PolygonLabelPlacement labelPlacement = PolygonLabelPlacement.polylabel,
   }) {
     late Offset placementPoint;
@@ -46,10 +48,17 @@ class Label {
       }
 
       if (maxDx - minDx > textPainter.width) {
+        canvas.save();
+        if (rotate) {
+          canvas.translate(placementPoint.dx, placementPoint.dy);
+          canvas.rotate(-rotationRad);
+          canvas.translate(-placementPoint.dx, -placementPoint.dy);
+        }
         textPainter.paint(
           canvas,
           Offset(dx, dy),
         );
+        canvas.restore();
       }
     }
   }

diff --git a/lib/src/layer/polygon_layer.dart b/lib/src/layer/polygon_layer.dart
@@ -28,6 +28,7 @@ class Polygon {
   final String? label;
   final TextStyle labelStyle;
   final PolygonLabelPlacement labelPlacement;
+  final bool rotateLabel;
 
   Polygon({
     required this.points,
@@ -43,6 +44,7 @@ class Polygon {
     this.label,
     this.labelStyle = const TextStyle(),
     this.labelPlacement = PolygonLabelPlacement.centroid,
+    this.rotateLabel = false,
   }) : holeOffsetsList = null == holePointsList || holePointsList.isEmpty
             ? null
             : List.generate(holePointsList.length, (_) => []);
@@ -101,7 +103,7 @@ class PolygonLayer extends StatelessWidget {
 
           polygonsWidget.add(
             CustomPaint(
-              painter: PolygonPainter(polygon),
+              painter: PolygonPainter(polygon, map.rotationRad),
               size: size,
             ),
           );
@@ -127,8 +129,9 @@ class PolygonLayer extends StatelessWidget {
 
 class PolygonPainter extends CustomPainter {
   final Polygon polygonOpt;
+  final double rotationRad;
 
-  PolygonPainter(this.polygonOpt);
+  PolygonPainter(this.polygonOpt, this.rotationRad);
 
   @override
   void paint(Canvas canvas, Size size) {
@@ -250,6 +253,8 @@ class PolygonPainter extends CustomPainter {
           polygonOpt.offsets,
           polygonOpt.label,
           polygonOpt.labelStyle,
+          rotationRad,
+          rotate: polygonOpt.rotateLabel,
           labelPlacement: polygonOpt.labelPlacement,
         );
       }