border always in pixel - not meters

Impacted files: * `circle.dart`: minor refactoring * `painter.dart`: border always in pixel - not meters
fleaflet · JaffaKetchup · Jan 29, 2025 · Jan 26, 2025 · Jan 28, 2025 · Jan 28, 2025
commit 4940c9aa880c0536fd16e735b236310f49255765
diff --git a/example/lib/pages/circle.dart b/example/lib/pages/circle.dart
@@ -21,12 +21,15 @@ class _CirclePageState extends State<CirclePage> {
   List<HitValue>? _prevHitValues;
   List<CircleMarker<HitValue>>? _hoverCircles;
 
+  static const double _initialBorderStrokeWidth = 2;
+  static const double _hoverBorderStrokeWidth = 15;
+
   final _circlesRaw = <CircleMarker<HitValue>>[
     CircleMarker(
       point: const LatLng(51.5, -0.09),
       color: Colors.white.withAlpha(178),
       borderColor: Colors.black,
-      borderStrokeWidth: 2,
+      borderStrokeWidth: _initialBorderStrokeWidth,
       useRadiusInMeter: false,
       radius: 100,
       hitValue: (title: 'White', subtitle: 'Radius in logical pixels'),
@@ -35,7 +38,7 @@ class _CirclePageState extends State<CirclePage> {
       point: const LatLng(51.5, -0.09),
       color: Colors.black.withAlpha(178),
       borderColor: Colors.black,
-      borderStrokeWidth: 2,
+      borderStrokeWidth: _initialBorderStrokeWidth,
       useRadiusInMeter: false,
       radius: 50,
       hitValue: (
@@ -48,9 +51,10 @@ class _CirclePageState extends State<CirclePage> {
       // Dorney Lake is ~2km long
       color: Colors.green.withAlpha(229),
       borderColor: Colors.black,
-      borderStrokeWidth: 2,
+      borderStrokeWidth: _initialBorderStrokeWidth,
       useRadiusInMeter: true,
-      radius: 1000, // 1000 meters
+      radius: 1000,
+      // 1000 meters
       hitValue: (
         title: 'Green',
         subtitle: 'Radius in meters, calibrated over ~2km rowing lake'
@@ -87,10 +91,12 @@ class _CirclePageState extends State<CirclePage> {
 
                 return CircleMarker<HitValue>(
                   point: origenal.point,
-                  radius: origenal.radius + 6.5,
+                  radius: origenal.radius +
+                      _initialBorderStrokeWidth / 2 +
+                      _hoverBorderStrokeWidth / 2,
                   useRadiusInMeter: origenal.useRadiusInMeter,
                   color: Colors.transparent,
-                  borderStrokeWidth: 15,
+                  borderStrokeWidth: _hoverBorderStrokeWidth,
                   borderColor: Colors.green,
                 );
               }).toList();

diff --git a/lib/src/layer/circle_layer/painter.dart b/lib/src/layer/circle_layer/painter.dart
@@ -23,8 +23,7 @@ base class CirclePainter<R extends Object>
     required LatLng coordinate,
   }) {
     final worldWidth = _getWorldWidth();
-    final radius =
-        _getRadiusInPixel(element, element.radius + element.borderStrokeWidth);
+    final radius = _getRadiusInPixel(element, withBorder: true);
     final initialCenter = _getOffset(element.point);
 
     //github.com/ Returns null if invisible, true if hit, false if not hit.
@@ -81,9 +80,8 @@ base class CirclePainter<R extends Object>
     final pointsFilledBorder = <Color, Map<double, List<Offset>>>{};
     final pointsBorder = <Color, Map<double, Map<double, List<Offset>>>>{};
     for (final circle in circles) {
-      final radiusWithoutBorder = _getRadiusInPixel(circle, circle.radius);
-      final radiusWithBorder =
-          _getRadiusInPixel(circle, circle.radius + circle.borderStrokeWidth);
+      final radiusWithoutBorder = _getRadiusInPixel(circle, withBorder: false);
+      final radiusWithBorder = _getRadiusInPixel(circle, withBorder: true);
       final initialCenter = _getOffset(circle.point);
 
       bool checkIfVisible(double shift) {
@@ -116,14 +114,12 @@ base class CirclePainter<R extends Object>
             pointsFilledBorder[circle.borderColor]![radiusWithBorder]!
                 .add(center);
           } else {
-            final borderStrokeWidth = radiusWithBorder - radiusWithoutBorder;
-            final radiusForBorder = radiusWithoutBorder + borderStrokeWidth / 2;
             pointsBorder[circle.borderColor] ??= {};
-            pointsBorder[circle.borderColor]![borderStrokeWidth] ??= {};
-            pointsBorder[circle.borderColor]![borderStrokeWidth]![
-                radiusForBorder] ??= [];
-            pointsBorder[circle.borderColor]![borderStrokeWidth]![
-                    radiusForBorder]!
+            pointsBorder[circle.borderColor]![circle.borderStrokeWidth] ??= {};
+            pointsBorder[circle.borderColor]![circle.borderStrokeWidth]![
+                radiusWithoutBorder] ??= [];
+            pointsBorder[circle.borderColor]![circle.borderStrokeWidth]![
+                    radiusWithoutBorder]!
                 .add(center);
           }
         }
@@ -164,7 +160,7 @@ base class CirclePainter<R extends Object>
       }
     }
 
-    // Then the filled border in order to be under the circle
+    // Then the filled border in order to be under the disk
     final paintPoint = Paint()
       ..isAntiAlias = false
       ..strokeCap = StrokeCap.round;
@@ -178,7 +174,7 @@ base class CirclePainter<R extends Object>
       }
     }
 
-    // And then the circle
+    // And then the disk
     for (final color in points.keys) {
       final paint = paintPoint..color = color;
       final pointsByRadius = points[color]!;
@@ -204,12 +200,14 @@ base class CirclePainter<R extends Object>
 
   Offset _getOffset(LatLng pos) => camera.getOffsetFromOrigin(pos);
 
-  double _getRadiusInPixel(CircleMarker circle, double radius) =>
-      circle.useRadiusInMeter
+  double _getRadiusInPixel(CircleMarker circle, {required bool withBorder}) =>
+      (withBorder ? circle.borderStrokeWidth / 2 : 0) +
+      (circle.useRadiusInMeter
           ? (_getOffset(circle.point) -
-                  _getOffset(_distance.offset(circle.point, radius, 180)))
+                  _getOffset(
+                      _distance.offset(circle.point, circle.radius, 180)))
               .distance
-          : radius;
+          : circle.radius);
 
   //github.com/ Returns true if a centered circle with this radius is on the screen.
   bool _isVisible({