方形相机覆盖层使用Flutter

Question

方形相机覆盖层使用Flutter

6

在相机上方创建一个正方形叠加层。

我尝试使用提供在https://github.com/flutter/plugins/tree/master/packages/camera的示例项目。 https://github.com/flutter/plugins/blob/master/packages/camera/lib/camera.dart 在此输入图像描述。

- Vino

2个回答

4

请使用 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

如包描述所述，您可以添加矩形、圆形或正方形对焦框，请参见以下代码片段。

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

- chunhunghan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bikram · Accepted Answer

目前，您使用的库还没有内置的相机叠加支持。我创建了一个小部件，它位于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({required double padding, required double aspectRatio, required 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)),
        )
      ]);
    });
  }