Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to mirror path in flutter?

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading