完成Canvas绘制器雏形

lib/pages/canvas_player/view.dart

@@ -1,13 +1,65 @@
+import 'package:fis_measure/index.dart';
+import 'package:fis_measure/interfaces/process/player/play_controller.dart';
+import 'package:fis_vid/data_host/data_host.dart';
 import 'package:flutter/material.dart';
+import 'package:vid_player_demo/widgets/image_cache.dart';
+
+import 'widgets/canvas_player.dart';
 
 class CanvasPlayerView extends StatefulWidget {
   const CanvasPlayerView({Key? key}) : super(key: key);
 
   @override
-  State<StatefulWidget> createState() => _CanvasPlayerViewState();
+  _CanvasPlayerViewState createState() => _CanvasPlayerViewState();
 }
 
 class _CanvasPlayerViewState extends State<CanvasPlayerView> {
+  IPlayerController? _playerController;
+  IPlayerController get playerController => _playerController!;
+  VidDataHost? _vidDataHost;
+  VidDataHost get dataHost => _vidDataHost!;
+  bool _ifInit = false;
+  List<String> mockData = [
+    "http://cdn-bj.fis.plus/093BE20682B14BFB95D811F221A2B2FD.vid"
+  ];
+
+  void loadVidDataHost(String url) {
+    print("${DateTime.now()} Load vid data host");
+    _vidDataHost = VidDataHost(url);
+    _playerController = VidPlayerController(dataHost: dataHost);
+  }
+
+  void clickPlay() {
+    print("${DateTime.now()} Click play");
+    if (_ifInit) {
+      playerController.play();
+    } else {
+      dataHost.load().then((value) {
+        if (value == null) {
+          // TOOO: add log
+        } else {
+          playerController.setLoadState(value != null);
+          Future.delayed(const Duration(milliseconds: 100), () {
+            playerController.play();
+          });
+          print("${DateTime.now()} Load vid data host success");
+        }
+        _ifInit = true;
+      });
+    }
+  }
+
+  void clickPause() {
+    print("${DateTime.now()} Click pause");
+    playerController.pause();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    loadVidDataHost(mockData[0]);
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -16,11 +68,27 @@ class _CanvasPlayerViewState extends State<CanvasPlayerView> {
       ),
       body: Center(
         child: Column(
-          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: [
+            const ShowImageCache(),
+            ElevatedButton(
+                onPressed: () {
+                  clickPlay();
+                },
+                child: const Text('Play')),
+            ElevatedButton(
+                onPressed: () {
+                  clickPause();
+                },
+                child: const Text('Pause')),
             SizedBox(
-              height: 160,
-              child: Container(),
+              width: 500,
+              height: 500,
+              child: RepaintBoundary(
+                child: VidCanvasPlayer(
+                  _playerController as VidPlayerController,
+                ),
+              ),
             ),
           ],
         ),
@@ -30,6 +98,9 @@ class _CanvasPlayerViewState extends State<CanvasPlayerView> {
 
   @override
   void dispose() {
+    print("CanvasPlayerView dispose");
+    playerController.dispose();
+    dataHost.release();
     super.dispose();
   }
 }

lib/pages/canvas_player/widgets/canvas_player.dart

@@ -1,9 +1,10 @@
 import 'dart:typed_data';
-import 'package:fis_measure/view/frame_view/native/frame_view.dart';
 import 'package:fis_measure/view/player/controller.dart';
 import 'package:fis_measure/view/player/enums.dart';
 import 'package:fis_measure/view/player/events.dart';
 import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+import 'vid_painter.dart';
 
 ///基于Canvas组件的播放器
 class VidCanvasPlayer extends StatefulWidget {
@@ -25,7 +26,7 @@ class VidCanvasPlayer extends StatefulWidget {
 
 class _VidCanvasPlayerState extends State<VidCanvasPlayer> {
   Uint8List? frameBytes;
-
+  ui.Image? image;
   @override
   void initState() {
     widget.controller.eventHandler.addListener(onControllerEvent);
@@ -58,9 +59,12 @@ class _VidCanvasPlayerState extends State<VidCanvasPlayer> {
   }
 
   void onFrameChanged(VidPlayerFrameIndexChangeEvent e) {
-    setState(() {
-      frameBytes = e.bytes;
-    });
+    loadFrame(e.bytes);
+  }
+
+  void loadFrame(Uint8List bytes) async {
+    image = await decodeImageFromList(bytes.buffer.asUint8List());
+    setState(() {});
   }
 
   void updateFrame() {
@@ -81,15 +85,13 @@ class _VidCanvasPlayerState extends State<VidCanvasPlayer> {
         child = Container(child: const Text("Load fail"));
         break;
       case VidPlayStatus.play:
-      case VidPlayStatus.pause:
-        // return buildFrameView(context);
-        // child = Container(
-        //   child: Text(
-        //     widget.controller.currentFrameIndex.toString(),
-        //   ),
-        // );
         child = buildFrameView(context);
         break;
+      case VidPlayStatus.pause:
+        child = Text(
+          widget.controller.currentFrameIndex.toString(),
+        );
+        break;
       case VidPlayStatus.stop:
       case VidPlayStatus.dispose:
         child = Container(child: const Text("Closed"));
@@ -107,13 +109,10 @@ class _VidCanvasPlayerState extends State<VidCanvasPlayer> {
 
   Widget buildFrameView(BuildContext context) {
     if (frameBytes != null) {
-      final size = MediaQuery.of(context).size;
-      return VidFrameView(
-        frameBytes!,
-        // width: widget.width,
-        // height: widget.height,
-        width: size.width,
-        height: size.height,
+      // final size = MediaQuery.of(context).size;
+      return CustomPaint(
+        painter: VidPainter(image: image),
+        isComplex: false, //是否为复杂图像（true会缓存）
       );
     } else {
       return Container();

lib/pages/canvas_player/widgets/vid_painter.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+
+class VidPainter extends CustomPainter {
+  VidPainter({required this.image});
+  ui.Image? image;
+
+  @override
+  void paint(Canvas canvas, Size size) async {
+    Paint greenBrush = Paint()..color = Colors.greenAccent;
+    canvas.save();
+    canvas.drawImage(image!, Offset(0, 0), greenBrush);
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+}