Fix mid-path transforms

android/src/toga_android/widgets/canvas.py

@@ -30,17 +30,17 @@
 class State(NamedTuple):
     fill: Paint
     stroke: Paint
+    transform: Matrix
 
     def __deepcopy__(self, memo):
-        return type(self)(Paint(self.fill), Paint(self.stroke))
+        return type(self)(Paint(self.fill), Paint(self.stroke), Matrix())
 
 
 class Context:
     def __init__(self, impl, native):
         self.native = native
         self.impl = impl
         self.path = Path()
-        self.reset_transform()
 
         # Backwards compatibility for Toga <= 0.5.3
         self.in_fill = False
@@ -57,7 +57,8 @@ def __init__(self, impl, native):
         stroke.setStrokeWidth(2.0)
         stroke.setColor(BLACK)
 
-        self.states = [State(fill, stroke)]
+        self.states = [State(fill, stroke, Matrix())]
+        self.reset_transform()
 
     @property
     def state(self):
@@ -71,6 +72,8 @@ def save(self):
 
     def restore(self):
         self.native.restore()
+        # Transform active path to current coordinates
+        self.path.transform(self.state.transform)
         self.states.pop()
 
     # Setting attributes
@@ -170,15 +173,40 @@ def stroke(self):
 
     def rotate(self, radians):
         self.native.rotate(degrees(radians))
+        self.state.transform.postRotate(degrees(radians))
+
+        inverse = Matrix()
+        inverse.setRotate(-degrees(radians))
+        self.path.transform(inverse)
 
     def scale(self, sx, sy):
         self.native.scale(sx, sy)
+        self.state.transform.postScale(sx, sy)
+
+        inverse = Matrix()
+        inverse.setScale(1 / sx, 1 / sy)
+        self.path.transform(inverse)
 
     def translate(self, tx, ty):
         self.native.translate(tx, ty)
+        self.state.transform.postTranslate(tx, ty)
+
+        inverse = Matrix()
+        inverse.setTranslate(-tx, -ty)
+        self.path.transform(inverse)
 
     def reset_transform(self):
         self.native.setMatrix(None)
+
+        # current matrix needs to unwind all previous states
+        # can't just ask for current total transform as `getMatrix` is deprecated
+        for state in reversed(self.states):
+            self.path.transform(state.transform)
+            inverse = Matrix()
+            # if we can't invert, ignore for now
+            if state.transform.invert(inverse):  # pragma: no branch
+                self.state.transform.postConcat(inverse)
+
         self.scale(self.impl.dpi_scale, self.impl.dpi_scale)
 
     # Text

changes/2206.bugfix.md

@@ -0,0 +1 @@
+The Android, Qt and Winforms canvases now match the behavior of the HTML Canvas when a transform is applied while preparing a path.

qt/src/toga_qt/widgets/canvas.py

@@ -28,9 +28,10 @@
 
 
 class State:
-    """Doesn't need to track transform, only fill/stroke-related properties."""
+    """Track transform and fill/stroke-related properties."""
 
     def __init__(self, former_state=None):
+        self.transform = QTransform()
         if former_state:
             self.fill_style = former_state.fill_style
             self.stroke = QPen(former_state.stroke)
@@ -63,6 +64,8 @@ def save(self):
         self.native.save()
 
     def restore(self):
+        # Transform active path to current coordinates
+        self._path = self.state.transform.map(self._path)
         self.states.pop()
         self.native.restore()
 
@@ -183,14 +186,36 @@ def stroke(self):
     def rotate(self, radians):
         self.native.rotate(degrees(radians))
 
+        # track transforms and adjust path
+        self.state.transform.rotateRadians(radians)
+        inverse = QTransform()
+        inverse.rotateRadians(-radians)
+        self._path = inverse.map(self._path)
+
     def scale(self, sx, sy):
         self.native.scale(sx, sy)
 
+        # track transforms and adjust path
+        self.state.transform.scale(sx, sy)
+        inverse = QTransform()
+        inverse.scale(1 / sx, 1 / sy)
+        self._path = inverse.map(self._path)
+
     def translate(self, tx, ty):
         self.native.translate(tx, ty)
 
+        # track transforms and adjust path
+        self.state.transform.translate(tx, ty)
+        inverse = QTransform()
+        inverse.scale(-tx, -ty)
+        self._path = inverse.map(self._path)
+
     def reset_transform(self):
+        transform = self.native.transform()
         self.native.resetTransform()
+        self._path = transform.map(self._path)
+        inverse, _ = transform.inverted()
+        self.state.transform *= inverse
 
     # Text
     def write_text(self, text, x, y, font, baseline, line_height):

testbed/tests/widgets/test_canvas.py

@@ -697,6 +697,30 @@ async def test_transforms(canvas, probe):
     assert_reference(probe, "transforms")
 
 
+async def test_transforms_mid_path(canvas, probe):
+    "Transforms can be applied mid-path"
+
+    # draw a series of rotated rectangles
+    canvas.context.begin_path()
+    canvas.context.translate(100, 100)
+    for _ in range(12):
+        canvas.context.rect(50, 0, 10, 10)
+        canvas.context.scale(1.05, 1)
+        canvas.context.rotate(math.pi / 6)
+    canvas.context.fill()
+
+    # draw a series of line segments
+    canvas.context.begin_path()
+    canvas.context.move_to(25, 0)
+    for _ in range(12):
+        canvas.context.line_to(25, 0)
+        canvas.context.rotate(math.pi / 6)
+    canvas.context.fill(CORNFLOWERBLUE)
+
+    await probe.redraw("Transforms can be applied")
+    assert_reference(probe, "transforms_mid_path", threshold=0.013)
+
+
 @pytest.mark.xfail(
     condition=os.environ.get("RUNNING_IN_CI") != "true",
     reason="Canvas tests are unstable outside of CI. Manual inspection may be required",

winforms/src/toga_winforms/widgets/canvas.py

@@ -1,4 +1,3 @@
-from copy import deepcopy
 from math import degrees
 
 import System.Windows.Forms as WinForms
@@ -42,22 +41,24 @@ class State:
     we used it. And it would still need to be kept in a list.
     """
 
-    def __init__(self, matrix, brush, pen):
-        self.matrix = matrix
+    def __init__(self, graphics_state, brush, pen):
+        # This is the previous graphics state, so we can restore.
+        self.graphics_state = graphics_state
         self.brush = brush
         self.pen = pen
+        self.transform = Matrix()
 
     @classmethod
     def for_impl(cls, impl):
         return cls(
-            matrix=Matrix(),
+            graphics_state=None,
             brush=SolidBrush(BLACK),
             pen=Pen(BLACK, impl.scale_in(2.0, rounding=None)),
         )
 
-    def __deepcopy__(self, memo):
+    def new_state(self, graphics_state):
         return type(self)(
-            matrix=self.matrix.Clone(),
+            graphics_state=graphics_state,
             brush=self.brush.Clone(),
             pen=self.pen.Clone(),
         )
@@ -106,10 +107,14 @@ def state(self):
         return self.states[-1]
 
     def save(self):
-        self.states.append(deepcopy(self.state))
+        graphics_state = self.native.Save()
+        self.states.append(self.state.new_state(graphics_state))
 
     def restore(self):
-        self.states.pop()
+        state = self.states.pop()
+        self.native.Restore(state.graphics_state)
+        for path in self.paths:
+            path.Transform(state.transform)
 
     # Setting attributes
 
@@ -223,27 +228,48 @@ def fill(self, fill_rule):
                 path.FillMode = FillMode.Alternate
             else:  # Default to NONZERO
                 path.FillMode = FillMode.Winding
-            path.Transform(self.state.matrix)
             self.native.FillPath(self.state.brush, path)
 
     def stroke(self):
         for path in self.paths:
-            path.Transform(self.state.matrix)
             self.native.DrawPath(self.state.pen, path)
 
     # Transformations
 
     def rotate(self, radians):
-        self.state.matrix.Rotate(degrees(radians))
+        self.native.RotateTransform(degrees(radians))
+        self.state.transform.Rotate(degrees(radians))
+
+        inverse = Matrix()
+        inverse.Rotate(-degrees(radians))
+        for path in self.paths:
+            path.Transform(inverse)
 
     def scale(self, sx, sy):
-        self.state.matrix.Scale(sx, sy)
+        self.native.ScaleTransform(sx, sy)
+        self.state.transform.Scale(sx, sy)
+
+        inverse = Matrix()
+        inverse.Scale(1 / sx, 1 / sy)
+        for path in self.paths:
+            path.Transform(inverse)
 
     def translate(self, tx, ty):
-        self.state.matrix.Translate(tx, ty)
+        self.native.TranslateTransform(tx, ty)
+        self.state.transform.Translate(tx, ty)
+
+        inverse = Matrix()
+        inverse.Translate(-tx, -ty)
+        for path in self.paths:
+            path.Transform(inverse)
 
     def reset_transform(self):
-        self.state.matrix.Reset()
+        matrix = self.native.Transform
+        matrix.Invert()
+        self.native.ResetTransform()
+        for path in self.paths:
+            path.Transform(matrix)
+
         self.scale(self.impl.dpi_scale, self.impl.dpi_scale)
 
     # Text
@@ -287,10 +313,7 @@ def _text_path(self, text, x, y, font, baseline, line_height):
             )
 
     def draw_image(self, image, x, y, width, height):
-        self.native.ResetTransform()
-        self.native.Transform = self.state.matrix
         self.native.DrawImage(image._impl.native, x, y, width, height)
-        self.native.ResetTransform()
 
 
 class Canvas(Box):