CustomPaint Over Camera 预览

Question

我正在尝试在 Flutter 的相机预览中使用显示 CustomPaint 元素。现在，CustomPaint 元素显示在相机预览下。我正在使用 Flutter camera plugin 来显示相机预览。我的代码如下。

class _CameraPreviewState extends State<CameraPreview> {

  [...]

  Widget build(BuildContext context) {
  double height = MediaQuery.of(context).size.height;

  return new YidKitTheme(
    new Center(
      child: _isReady
        ? new Container(
          height: height / 2,
          child: new CustomPaint(
            painter: new GuidelinePainter(),
            child: new AspectRatio(
              aspectRatio: controller.value.aspectRatio,
              child: new CameraPreview(controller)
            ),
          )
        )
        : new CircularProgressIndicator()
      )
    );
  }
}

class GuidelinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..strokeWidth = 3.0
      ..color = Colors.red
      ..style = PaintingStyle.stroke;

    var path = new Path()..lineTo(50.0, 50.0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 1

改变

      child: new CustomPaint(
        painter: new GuidelinePainter(),
        child: new AspectRatio(

到

      child: new CustomPaint(
        foregroundPainter: new GuidelinePainter(),
        child: new AspectRatio(

painter 首先绘制（即背景），然后绘制 child，然后 foregroundPainter 最后绘制在 child

之上

CustomPaint Over Camera 预览

CustomPaint Over Camera Preview

camera

flutter

paint