Flutter：将图形叠加在 Firebase 视觉检测到的条形码上

问题描述

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

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

但是上面的包只给出了 MLKit 检测到的条码字符串，而不是条码的详细信息，比如边界框、条码类型和其他信息，所以我拿了上面包的源代码并做了一些更改，以便我得到了可用于在检测到的条形码上覆盖图形的边界框。

可以找到我尝试做的代码 here

现在我在使用这些更改时面临两个问题（目前仅在 Android 实现）

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

例如：

在 oneplus 上全屏运行正常

Redmi 5 输出相同代码

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

我正在尝试了解是什么导致了不同设备上的问题

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

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

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

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;
  }
}

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

感谢任何形式的帮助。

解决方法

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

android android barcode-scanner firebase-mlkit