Question

在相机上方创建方形叠加层

我尝试了https://github.com/flutter/plugins/tree/master/packages/camera

中给出的示例项目

https://github.com/flutter/plugins/blob/master/packages/camera/lib/camera.dart enter image description here

Answer 1

截至目前，您使用的库中没有内置的相机叠加支持。我创建了一个小部件，它位于堆栈中，并带有复制叠加层的 CameraPreview。

@override
  Widget build(BuildContext context) {
    return AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: Stack(fit: StackFit.expand, children: [
            CameraPreview(_controller),
            cameraOverlay(
                padding: 50, aspectRatio: 1, color: Color(0x55000000))
          ]));
}

Widget cameraOverlay({double padding, double aspectRatio, Color color}) {
    return LayoutBuilder(builder: (context, constraints) {
      double parentAspectRatio = constraints.maxWidth / constraints.maxHeight;
      double horizontalPadding;
      double verticalPadding;

      if (parentAspectRatio < aspectRatio) {
        horizontalPadding = padding;
        verticalPadding = (constraints.maxHeight -
                ((constraints.maxWidth - 2 * padding) / aspectRatio)) /
            2;
      } else {
        verticalPadding = padding;
        horizontalPadding = (constraints.maxWidth -
                ((constraints.maxHeight - 2 * padding) * aspectRatio)) /
            2;
      }
      return Stack(fit: StackFit.expand, children: [
        Align(
            alignment: Alignment.centerLeft,
            child: Container(width: horizontalPadding, color: color)),
        Align(
            alignment: Alignment.centerRight,
            child: Container(width: horizontalPadding, color: color)),
        Align(
            alignment: Alignment.topCenter,
            child: Container(
                margin: EdgeInsets.only(
                    left: horizontalPadding, right: horizontalPadding),
                height: verticalPadding,
                color: color)),
        Align(
            alignment: Alignment.bottomCenter,
            child: Container(
                margin: EdgeInsets.only(
                    left: horizontalPadding, right: horizontalPadding),
                height: verticalPadding,
                color: color)),
        Container(
          margin: EdgeInsets.symmetric(
              horizontal: horizontalPadding, vertical: verticalPadding),
          decoration: BoxDecoration(border: Border.all(color: Colors.cyan)),
        )
      ]);
    });
  }

Answer 2

请使用此包camera_camera
https://pub.dev/packages/camera_camera
api参考：https://pub.dev/documentation/camera_camera/latest/
github：https://github.com/gabulsavul/camera_camera
有关代码详细信息，您需要https://github.com/gabulsavul/camera_camera/blob/master/lib/page/camera.dart

如软件包所述，您可以添加Rectangle，Circle或Square Focus
请参见下面的代码段

Camera(
       mode: CameraMode.normal,
      imageMask: CameraFocus.rectangle(
                color: Colors.black.withOpacity(0.5),
                ),
     )

使用抖动的方形相机叠加

2 个答案: