Flutter 如何在攝像頭上繪制可按壓矩形？

Question

我正在使用camera插件來獲取相機供稿。 每 10 秒，我生成 4 個值(x,y,w,h)並在屏幕上繪制一個矩形（只有邊框，內部是透明的）（帶有隨機文本）。 如果用戶單擊此框，它就會消失。

它看起來像這張圖片。 (x,y,w,h)和文本是隨機生成的。

這可以使用camera插件來做到這一點嗎？ 或者是否有另一個 package 已經這樣做了？

Answer 1

相機插件沒有任何可以在預覽上繪制的功能，但是您可以使用 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,
        'y': 0,
        'w': 0,
        'h': 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),
                    ),
                  ),
                ),
              ),
            ),
          ),
      ],
    );
  }
}