使用颤动的方形相机叠加

Question

在相机上方创建方形覆盖层

我已经尝试过https://github.com/flutter/plugins/tree/master/packages/camera中给出的示例项目

https://github.com/flutter/plugins/blob/master/packages/camera/lib/camera.dart在此处输入图像描述

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({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)),
        )
      ]);
    });
  }

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),
                ),
     )