fix pinned rotate bug

Author: fbchen

example/pinned_position.dart

@@ -1,11 +1,38 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_constraintlayout/src/constraint_layout.dart';
 
 import 'custom_app_bar.dart';
 
-class PinnedPositionExample extends StatelessWidget {
+class PinnedPositionExample extends StatefulWidget {
   const PinnedPositionExample({Key? key}) : super(key: key);
 
+  @override
+  State createState() => PinnedPositionExampleState();
+}
+
+class PinnedPositionExampleState extends State<PinnedPositionExample> {
+  late Timer timer;
+  int angle = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
+      setState(() {
+        angle++;
+        angle %= 360;
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    timer.cancel();
+  }
+
   @override
   Widget build(BuildContext context) {
     ConstraintId anchor = ConstraintId('anchor');
@@ -26,14 +53,63 @@ class PinnedPositionExample extends StatelessWidget {
           Container(
             color: Colors.cyan,
           ).applyConstraint(
-            size: 40,
+            size: 100,
             pinnedInfo: PinnedInfo(
               anchor,
-              PinnedPos(0, PinnedType.absolute, 0.5, PinnedType.percent),
+              PinnedPos(0.2, PinnedType.percent, 0.2, PinnedType.percent),
+              PinnedPos(1, PinnedType.percent, 1, PinnedType.percent),
+              rotateDegree: angle,
+            ),
+          ),
+          Container(
+            color: Colors.orange,
+          ).applyConstraint(
+            size: 60,
+            pinnedInfo: PinnedInfo(
+              anchor,
+              PinnedPos(1, PinnedType.percent, 1, PinnedType.percent),
+              PinnedPos(0, PinnedType.percent, 0, PinnedType.percent),
+              rotateDegree: 360 - angle,
+            ),
+          ),
+          Container(
+            color: Colors.black,
+          ).applyConstraint(
+            size: 60,
+            pinnedInfo: PinnedInfo(
+              anchor,
+              PinnedPos(0.5, PinnedType.percent, 0.5, PinnedType.percent),
               PinnedPos(0.5, PinnedType.percent, 0.5, PinnedType.percent),
-              rotateDegree: 45,
+              rotateDegree: angle,
+            ),
+          ),
+          Container(
+            decoration: const BoxDecoration(
+              color: Colors.red,
+              borderRadius: BorderRadius.all(Radius.circular(10)),
+            ),
+          ).applyConstraint(
+            size: 10,
+            centerBottomRightTo: anchor,
+          ),
+          Container(
+            decoration: const BoxDecoration(
+              color: Colors.red,
+              borderRadius: BorderRadius.all(Radius.circular(10)),
             ),
-          )
+          ).applyConstraint(
+            size: 10,
+            centerTopLeftTo: anchor,
+          ),
+          Container(
+            decoration: const BoxDecoration(
+              color: Colors.red,
+              borderRadius: BorderRadius.all(Radius.circular(10)),
+            ),
+          ).applyConstraint(
+            size: 10,
+            centerTo: anchor,
+          ),
         ],
       ),
     );

lib/src/constraint_layout.dart

@@ -3780,21 +3780,17 @@ class _ConstraintRenderBox extends RenderBox
 
       if (element.pinnedInfo != null) {
         context.canvas.save();
+        Offset anchorOffset =
+            element.pinnedInfo!.selfPos.resolve(element.getSize());
         context.canvas.translate(
-            element.offset.dx +
-                offset.dx +
-                paintShift.dx +
-                element.getMeasuredWidth() / 2,
-            element.offset.dy +
-                offset.dy +
-                paintShift.dy +
-                element.getMeasuredHeight() / 2);
+            element.offset.dx + offset.dx + paintShift.dx + anchorOffset.dx,
+            element.offset.dy + offset.dy + paintShift.dy + anchorOffset.dy);
         context.canvas
             .rotate(pi + pi * (element.pinnedInfo!.rotateDegree / 180));
         context.paintChild(
             element.renderBox!,
-            Offset(-element.getMeasuredWidth() / 2,
-                -element.getMeasuredHeight() / 2));
+            Offset(-element.getMeasuredWidth() + anchorOffset.dx,
+                -element.getMeasuredHeight() + anchorOffset.dy));
         context.canvas.restore();
       } else {
         context.paintChild(