Flutter 如何在相机馈送上绘制可按下的矩形？

问题描述

我正在使用 camera 插件来获取相机供稿。每 10 秒，我生成 4 个值 (x,y,w,h) 并在屏幕上绘制一个矩形（只有边框，内部是透明的）（带有随机文本）。如果用户点击这个框，它就会消失。

它看起来像这张图片。 (x,h) 和文本是随机生成的。

使用 camera 插件可以做到这一点吗？或者是否有其他软件包已经做到了这一点？

解决方法

相机插件没有任何功能可以在预览上绘制，但您可以使用 Stack 小部件和容器来制作类似的东西。

这是一个快速而肮脏的例子，但希望能给你一个想法：

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  CameraController controller;

  // Holds the position information of the rectangle
  Map<String,double> _position = {
    'x': 0,'y': 0,'w': 0,'h': 0,};

  // Whether or not the rectangle is displayed
  bool _isRectangleVisible = false;

  Future<void> getCameras() async {
    final cameras = await availableCameras();
    controller = CameraController(cameras[0],ResolutionPreset.medium);
    controller.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    });
  }

  // Some logic to get the rectangle values
  void updateRectanglePosition() {
    setState(() {
      // assign new position
      _position = {
        'x': 0,};
      _isRectangleVisible = true;
    });
  }

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

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return Stack(
      children: [
        AspectRatio(
          aspectRatio: controller.value.aspectRatio,child: controller == null ? Container() : CameraPreview(controller),),if (_isRectangleVisible)
          Positioned(
            left: _position['x'],top: _position['y'],child: InkWell(
              onTap: () {
                // When the user taps on the rectangle,it will disappear
                setState(() {
                  _isRectangleVisible = false;
                });
              },child: Container(
                width: _position['w'],height: _position['h'],decoration: BoxDecoration(
                  border: Border.all(
                    width: 2,color: Colors.blue,child: Align(
                  alignment: Alignment.topLeft,child: Container(
                    color: Colors.blue,child: Text(
                      'hourse -71%',style: TextStyle(color: Colors.white),],);
  }
}