如何绘制BackgroundImage的三角形前景

Question

我想绘制到目前为止我尝试过的背景图像的三角形前景

                    CustomPaint(
                      //foregroundPainter: PaintTriangle(backgroundColor: backgroundColor),
                      //foregroundPainter didn't work either!
                      painter: PaintTriangle(backgroundColor: backgroundColor),
                      child: Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            fit: BoxFit.fill,
                            image: NetworkImage(cardBackgroundImageUrl),
                          ),
                        ),
                      ),
                    )

这是我已经可以绘制三角形的PaintTriangle，我所需要的只是如何在背景前面绘制此三角形。我曾尝试将画笔赋予foregroundPainter，但它也不起作用，也尝试了[ C0]小部件也不起作用

Stack

Answer 1

您可以在下面复制粘贴运行完整代码用

import 'package:flutter/cupertino.dart';


class PaintTriangle extends CustomPainter {
  final Color backgroundColor;

  PaintTriangle({
    @required this.backgroundColor,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final y = size.height;
    final x = size.width;

    final paint = Paint()
      ..color = backgroundColor;
    final path = Path();

    path
      ..moveTo(0, y)
      ..lineTo((x / 2), (y / 1.5))..lineTo(x, y);


    canvas.drawPath(path, paint);
  }

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

}

做代码段

Stack

工作演示

Stack(
          children: <Widget>[
            Center(
              child: Image.network(
                'https://picsum.photos/250?image=9',
              ),
            ),
            Center(
              child: CustomPaint( //                       <-- CustomPaint widget
                size: Size(300, 300),
                painter: PaintTriangle(backgroundColor: Colors.blue),
              ),
            ),

完整代码