Flutter：将图形叠加在 firebase vision 检测到的条形码上

Question

我正在尝试在 Flutter 中实现一个条形码扫描器应用程序，其中相机可以作为小部件嵌入而不是全屏显示。

所以我选择了 flutter_qr_mobile_vision 包，因为我们可以使用本机相机功能并限制相机预览大小。

但上面的包只给出了MLKit检测到的条码字符串，并没有给出边界框、条码类型等条码细节，所以我把上面包的源代码做了一些修改这样我就得到了可用于在检测到的条形码上叠加图形的边界框。

可以找到我要执行的操作的代码here

现在我在使用这些更改时遇到了两个问题（Android 目前仅实施）

当我尝试在条形码顶部叠加边界框时，结果在多个设备上不一致。

例如：

在一加上全屏工作正常

Redmi 5 上的相同代码输出

我将所有设备的相机分辨率默认设置为 (1280 x 720)，并在叠加之前缩放输出

我试图了解是什么导致了不同设备上的这种情况

现在如果我尝试调整相机预览的小部件高度，结果在 oneplus 上也不一致

我觉得这与缩放部分有关，但我不确定。

以下代码用于相机预览和叠加图形

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:qr_mobile_vision/qr_camera.dart';
import 'package:qr_mobile_vision/qr_barcode.dart';
import 'package:vision_demo/barcode_detctor_painter.dart';
import 'package:vision_demo/overlay.dart';

void main() {
  debugPaintSizeEnabled = false;
  runApp(new HomePage());
}

class HomePage extends StatefulWidget {
  @override
  HomeState createState() => new HomeState();
}

class HomeState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: new MyApp());
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool camState = false;
  List<Barcode> barcode = List<Barcode>();

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Demo app'),
      ),
      body: new Center(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            camState
                ? new SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height - 300 - AppBar().preferredSize.height,
                    child: Stack(
                      children: [
                        new QrCamera(
                          onError: (context, error) => Text(
                            error.toString(),
                            style: TextStyle(color: Colors.red),
                          ),
                          qrCodeCallback: (code) {
                            setState(() {
                              barcode = code;
                            });
                          },
                          child: new Container(
                            decoration: new BoxDecoration(
                              color: Colors.transparent,
                            ),
                          ),
                        ),
                        Container(
                            constraints: const BoxConstraints.expand(),
                            decoration: ShapeDecoration(
                              shape: QrScannerOverlayShape(cutOutSize: MediaQuery.of(context).size.width - 160, borderColor: Colors.white),
                            )),
                        LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
                          return _buildResults(constraints);
                        })
                      ],
                    ),
                  )
                : Expanded(child: new Center(child: new Text("Camera inactive"))),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
          child: new Text(
            "press me",
            textAlign: TextAlign.center,
          ),
          onPressed: () {
            setState(() {
              camState = !camState;
            });
          }),
    );
  }

  Widget _buildResults(BoxConstraints constraints) {
    const Text noResultsText = Text('No results!');

    if (barcode == null) {
      return noResultsText;
    }

    CustomPainter painter;

    final Size imageSize = Size(720.0, 1280.0);

    if (barcode is! List<Barcode>) return noResultsText;
    painter = BarcodeDetectorPainter(imageSize, barcode);

    return CustomPaint(
      size: Size(double.maxFinite, double.maxFinite),
      painter: painter,
    );
  }
}

下面是我用来调整覆盖图形大小的代码。

import 'package:flutter/material.dart';
import 'package:qr_mobile_vision/qr_barcode.dart';

class BarcodeDetectorPainter extends CustomPainter {
  BarcodeDetectorPainter(this.absoluteImageSize, this.barcodeLocations); // absoluteImageSize will always be (1280 x 720) 

  final List<Barcode> barcodeLocations;
  final Size absoluteImageSize;

  @override
  void paint(Canvas canvas, Size size) {
    final double scaleX = size.width / absoluteImageSize.width;
    final double scaleY = size.height / absoluteImageSize.height;

    Rect scaleRect(Barcode barcode) {
      return Rect.fromLTRB(
        barcode.boundingBox.left * scaleX,
        barcode.boundingBox.top * scaleY,
        barcode.boundingBox.right * scaleX,
        barcode.boundingBox.bottom * scaleY,
      );
    }

    final Paint paint = Paint()
      ..style = PaintingStyle.fill
      ..strokeWidth = 2.0;

    for (Barcode barcode in barcodeLocations) {
      paint.color = Colors.green;

      canvas.drawRect(scaleRect(barcode), paint);
    }
  }

  @override
  bool shouldRepaint(BarcodeDetectorPainter oldDelegate) {
    return oldDelegate.absoluteImageSize != absoluteImageSize || oldDelegate.barcodeLocations != barcodeLocations;
  }
}

解决这 2 个问题很重要，因为在此之后我想限制扫描区域，以便我只能捕获与我添加的切口尺寸对齐的条码。

感谢任何形式的帮助。

Answer 1

我能够解决这个问题，问题是在多个设备上有一个恒定的分辨率，一些设备可能没有我设置的分辨率，所以以编程方式设置基于屏幕尺寸的最佳最小分辨率已经解决我的问题。

Flutter：将图形叠加在 firebase vision 检测到的条形码上

Flutter : Overlaying the graphics on the barcode which is detected by firebase vision

android

barcode-scanner

flutter

firebase-mlkit