完善图像滤镜的逻辑

lib/pages/canvas_player/view.dart

@@ -22,12 +22,39 @@ class CanvasPlayerView extends StatefulWidget {
 }
 
 class _CanvasPlayerViewState extends State<CanvasPlayerView> {
-  IPlayerController? _playerController;
-  IPlayerController get playerController => _playerController!;
+  VidPlayerController? _playerController;
+  VidPlayerController get playerController => _playerController!;
   VidDataHost? _vidDataHost;
   VidDataHost get dataHost => _vidDataHost!;
   bool _ifInit = false;
 
+  final colorFiltersMatrix = {
+    "原色": <double>[
+      1, 0, 0, 0, 0, // red
+      0, 1, 0, 0, 0, // green
+      0, 0, 1, 0, 0, // blue
+      0, 0, 0, 1, 0, // alpha
+    ],
+    "红色通道": <double>[
+      1, 0, 0, 0, 0, // red
+      0, 0, 0, 0, 0, // green
+      0, 0, 0, 0, 0, // blue
+      0, 0, 0, 1, 0, // alpha
+    ],
+    "绿色通道": <double>[
+      0, 0, 0, 0, 0, // red
+      1, 0, 0, 0, 0, // green
+      0, 0, 0, 0, 0, // blue
+      0, 0, 0, 1, 0, // alpha
+    ],
+    "蓝色通道": <double>[
+      0, 0, 0, 0, 0, // red
+      0, 0, 0, 0, 0, // green
+      1, 0, 0, 0, 0, // blue
+      0, 0, 0, 1, 0, // alpha
+    ],
+  };
+
   /// 外部播放状态控制器
   PlayerStateController? _playerStateController;
   PlayerStateController get playerStateController => _playerStateController!;
@@ -104,6 +131,14 @@ class _CanvasPlayerViewState extends State<CanvasPlayerView> {
                     clickPause();
                   },
                   child: const Text('⏸ Pause')),
+              ...colorFiltersMatrix.keys.map((key) {
+                return ElevatedButton(
+                  onPressed: () {
+                    playerController.setFilterMatrix(colorFiltersMatrix[key]!);
+                  },
+                  child: Text(key),
+                );
+              }).toList(),
             ],
           ),
         ],

lib/pages/canvas_player/widgets/canvas_player.dart

@@ -37,6 +37,12 @@ class _VidCanvasPlayerState extends State<VidCanvasPlayer> {
   ListQueue<int> frames = ListQueue<int>()..addFirst(30); //预留一位防止分母为0
   int maxFramesNum = 10;
   int curFPS = 30;
+  List<double> curColorFilterMatrix = <double>[
+    1, 0, 0, 0, 0, // red
+    0, 1, 0, 0, 0, // green
+    0, 0, 1, 0, 0, // blue
+    0, 0, 0, 1, 0, // alpha
+  ];
 
   @override
   void initState() {
@@ -69,12 +75,22 @@ class _VidCanvasPlayerState extends State<VidCanvasPlayer> {
     if (e is VidPlayerContrastChangeEvent) {
       updateFrame();
     }
+    if (e is VidPlayerFilterChangeEvent) {
+      onFilterMatrixChanged(e);
+      // updateFrame();
+    }
   }
 
   void onFrameChanged(VidPlayerFrameIndexChangeEvent e) {
     loadFrame(e);
   }
 
+  void onFilterMatrixChanged(VidPlayerFilterChangeEvent e) {
+    setState(() {
+      curColorFilterMatrix = e.filterMatrix;
+    });
+  }
+
   void loadFrame(VidPlayerFrameIndexChangeEvent e) async {
     // List<StackTrace>? debugList = image?.debugGetOpenHandleStackTraces();
     // print("${DateTime.now()} Load frame \n ${debugList.toString()}");
@@ -177,7 +193,8 @@ class _VidCanvasPlayerState extends State<VidCanvasPlayer> {
     if (image != null) {
       final size = MediaQuery.of(context).size;
       return CustomPaint(
-        painter: VidPainter(image: image!),
+        painter:
+            VidPainter(image: image!, colorFilterMatrix: curColorFilterMatrix),
         isComplex: false, //是否为复杂图像（true会缓存）
         size: size,
       );

lib/pages/canvas_player/widgets/vid_painter.dart

@@ -2,15 +2,22 @@ import 'package:flutter/material.dart';
 import 'dart:ui' as ui;
 
 class VidPainter extends CustomPainter {
-  VidPainter({required this.image});
+  VidPainter(
+      {required this.image,
+      this.colorFilterMatrix = const <double>[
+        1, 0, 0, 0, 0, // red
+        0, 1, 0, 0, 0, // green
+        0, 0, 1, 0, 0, // blue
+        0, 0, 0, 1, 0, // alpha
+      ]});
   ui.Image image;
+  List<double> colorFilterMatrix;
 
   @override
   void paint(Canvas canvas, Size size) async {
     final double scale = size.width / image.width;
     final double offsetY = (size.height - image.height * scale) / 2;
 
-    Paint paint = Paint();
     canvas.save();
     // canvas.scale(scale);
     // canvas.drawImage(image, Offset(0, offsetY), paint);
@@ -18,7 +25,7 @@ class VidPainter extends CustomPainter {
         image,
         Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()),
         Rect.fromLTWH(0, offsetY, size.width, image.height * scale),
-        paint);
+        Paint()..colorFilter = ColorFilter.matrix(colorFilterMatrix));
 
     canvas.restore();
     // image.dispose();

lib/pages/color_filter/page.dart

@@ -15,6 +15,7 @@ class _ColorFilterPageState extends State<ColorFilterPage> {
   ];
 
   final _playerStateController = Get.put(PlayerStateController());
+
   @override
   void initState() {
     // TODO: implement initState
@@ -37,7 +38,7 @@ class _ColorFilterPageState extends State<ColorFilterPage> {
             SizedBox(
                 height: 800,
                 child: CanvasPlayerView(vidURLs[0],
-                    viewSize: const Size(600, 600))),
+                    viewSize: const Size(700, 600))),
           ],
         ));
   }