How to mirror path in flutter?

298

You can do that with negative scaling and translation (to correct position), like this for Y axis:

canvas.scale(1, -1);
canvas.translate(0, -height);
canvas.drawPath(allStripesPath, paint);

For X axis:

canvas.scale(-1, 1);
canvas.translate(-width, 0);
canvas.drawPath(allStripesPath, paint);

Docs:

https://api.flutter.dev/flutter/dart-ui/Canvas/scale.html

https://api.flutter.dev/flutter/dart-ui/Canvas/translate.html

Share:
298
Arti Scream
Author by

Arti Scream

Updated on December 18, 2022

Comments

  • Arti Scream
    Arti Scream over 1 year

    So i have a code that paints path at container.

     void paintWithPattern(
          Canvas canvas, double x, double y, double width, double height) {
        final maxDimension = max(width, height);
        final stripeW = maxDimension / featuresCount / 6;
        var step = stripeW * 9;
        final paint = Paint()
          ..style = PaintingStyle.fill
          ..color = bgColor;
        canvas.drawRect(Rect.fromLTWH(x, y, width, height), paint);
        final rectStripesCount =
            featuresCount * 2.5; // to make sure we cover the whole rectangle
        final allStripesPath = Path();
        for (var i = 1; i < rectStripesCount; i += 2) {
          final stripePath = Path();
          stripePath.moveTo(x - stripeW + step, y);
          stripePath.lineTo(x + step, y);
          stripePath.lineTo(x, y + step);
          stripePath.lineTo(x - stripeW, y + step);
          stripePath.close();
          allStripesPath.addPath(stripePath, Offset.zero);
          step += stripeW * 9;
        }
        paint
          ..style = PaintingStyle.fill
          ..color = fgColor;
        canvas.drawPath(allStripesPath, paint);
      }
    

    The result of the code painting on container is below enter image description here

    How can I made it, so it's mirrored by Y axis? like on picture below enter image description here

  • Arti Scream
    Arti Scream over 2 years
    Thanks, that works just perfrectly