метод clipPath класса Canvas не обрезает заданный участок

Метод clipPath класса Canvas не обрезает заданный участок. Синим цветом нарисован квадрат. Метод clipPath должен обрезать его, что бы получился треугольник. Это не происходит. Подскажите. Далее, полный код и скришот.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'Name App',
   theme: ThemeData(
    primarySwatch: Colors.blue,
   ),
   home: Scaffold(
    appBar: AppBar(
     title: Text('Name Page'),
    ),
    body: MyHomePage(),
   ),
  );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

 @override
 void initState() {
  super.initState();

 }

 @override
 void dispose() {
  super.dispose();

 }

 void _f1() {
  setState(() {

  });
 }

 @override
 Widget build(BuildContext context) {
  return Stack(
   children: [
    Align(
     alignment: Alignment.center,
     child: CustomPaint(
      //верхний слой
      foregroundPainter: A(),
      //средний слой
      child: Container(
       width: 300.0,
       height: 300.0,
       decoration: BoxDecoration(
        border: Border.all(
         width: 1.0,
         color: Colors.pink
        ),
       ),
      ),
     ),
    ),
   ],
  );
 }

}

class A extends CustomPainter {

 @override
 void paint(Canvas canvas, Size size) {

  //синий цвет, заполнение
  final paint = Paint()
   ..style = PaintingStyle.fill
   ..color = Colors.blue;

  //квадрат
  canvas.drawRRect(
   RRect.fromRectAndRadius(
    Rect.fromLTWH(0, 0, 250, 250),
    Radius.circular(0)
   ),
   paint,
  );

  //область треугольника, которая должна обрезаться
  canvas.clipPath(
   Path()
    ..lineTo(0.0, 0.0)
    ..lineTo(0, size.height - 50)
    ..lineTo(size.width - 50, size.height - 50)
    ..close()
  );

 }

 @override
 bool shouldRepaint(covariant CustomPainter oldDelegate) {
  return false;
 }

}

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Spatz

Работа с контуром обрезки в Canvas очень похожа на работу с трафаретом: вы сначала накладываете его а потом рисуете там, где трафарет не закрывает холст. Контуров может быть несколько и результатом будет их пересечение.

Вместе с матрицей преобразования текущий контур обрезки формирует так называемый контекст и его можно сохранять и восстанавливать методами save и restore.

→ Ссылка