Răsfoiți Sursa

完善图像滤镜的逻辑

gavin.chen 2 ani în urmă
părinte
comite
b3eb6c249c
2 a modificat fișierele cu 104 adăugiri și 2 ștergeri
  1. 95 0
      lib/pages/canvas_player/view.dart
  2. 9 2
      lib/pages/color_filter/page.dart

+ 95 - 0
lib/pages/canvas_player/view.dart

@@ -3,6 +3,7 @@ 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:get/get.dart';
+import 'package:image/image.dart';
 import 'package:vid_player_demo/controller/player_controller.dart';
 import 'package:vid_player_demo/widgets/image_cache.dart';
 
@@ -27,6 +28,10 @@ class _CanvasPlayerViewState extends State<CanvasPlayerView> {
   VidDataHost? _vidDataHost;
   VidDataHost get dataHost => _vidDataHost!;
   bool _ifInit = false;
+  double _brightness = 0;
+  double _contrast = 0;
+  double _matrixBrightness = 0.0;
+  double _matrixContrast = 1.0;
 
   final colorFiltersMatrix = {
     "原色": <double>[
@@ -53,6 +58,18 @@ class _CanvasPlayerViewState extends State<CanvasPlayerView> {
       1, 0, 0, 0, 0, // blue
       0, 0, 0, 1, 0, // alpha
     ],
+    "低对比度": <double>[
+      0.5, 0, 0, 0, 0, // red
+      0, 0.5, 0, 0, 0, // green
+      0, 0, 0.5, 0, 0, // blue
+      0, 0, 0, 1, 0, // alpha
+    ],
+    "高对比度": <double>[
+      2, 0, 0, 0, 0, // red
+      0, 2, 0, 0, 0, // green
+      0, 0, 2, 0, 0, // blue
+      0, 0, 0, 1, 0, // alpha
+    ]
   };
 
   /// 外部播放状态控制器
@@ -94,6 +111,43 @@ class _CanvasPlayerViewState extends State<CanvasPlayerView> {
     clickPlay();
   }
 
+  ///设置亮度传入的value范围为-100 ~ 100,brightness的范围为 -1 ~ 1
+  void setBrightness(value) {
+    final brightness = value / 100;
+    if (brightness < -1 || brightness > 1) {
+      return;
+    }
+    _matrixBrightness = brightness;
+    final fliterMatrix = <double>[
+      _matrixContrast, 0, 0, 0, _matrixBrightness, // red
+      0, _matrixContrast, 0, 0, _matrixBrightness, // green
+      0, 0, _matrixContrast, 0, _matrixBrightness, // blue
+      0, 0, 0, 1, 0, // alpha
+    ];
+    playerController.setFilterMatrix(fliterMatrix);
+  }
+
+  ///设置对比度传入的value范围为value范围为-100 ~ 100,brightness的范围为 0 ~ 10
+  void setContrast(value) {
+    double contrast = 1;
+    if (value < 0) {
+      contrast = (value + 100) / 100;
+    } else if (value >= 0) {
+      contrast = value / 100 * 9 + 1;
+    }
+    if (contrast < 0 || contrast > 10) {
+      return;
+    }
+    _matrixContrast = contrast;
+    final fliterMatrix = <double>[
+      _matrixContrast, 0, 0, 0, _matrixBrightness, // red
+      0, _matrixContrast, 0, 0, _matrixBrightness, // green
+      0, 0, _matrixContrast, 0, _matrixBrightness, // blue
+      0, 0, 0, 1, 0, // alpha
+    ];
+    playerController.setFilterMatrix(fliterMatrix);
+  }
+
   @override
   void initState() {
     super.initState();
@@ -141,6 +195,47 @@ class _CanvasPlayerViewState extends State<CanvasPlayerView> {
               }).toList(),
             ],
           ),
+          const SizedBox(
+            height: 20,
+          ),
+          Row(children: [
+            const Text("明亮度"),
+            SizedBox(
+              width: 800,
+              child: Slider(
+                value: _brightness,
+                max: 100,
+                min: -100,
+                divisions: 200,
+                label: _brightness.round().toString(),
+                onChanged: (double value) {
+                  setBrightness(value);
+                  setState(() {
+                    _brightness = value;
+                  });
+                },
+              ),
+            )
+          ]),
+          Row(children: [
+            const Text("对比度"),
+            SizedBox(
+              width: 800,
+              child: Slider(
+                value: _contrast,
+                max: 100,
+                min: -100,
+                divisions: 200,
+                label: _contrast.round().toString(),
+                onChanged: (double value) {
+                  setContrast(value);
+                  setState(() {
+                    _contrast = value;
+                  });
+                },
+              ),
+            )
+          ])
         ],
       ),
     );

+ 9 - 2
lib/pages/color_filter/page.dart

@@ -37,8 +37,15 @@ class _ColorFilterPageState extends State<ColorFilterPage> {
             const SizedBox(height: 24),
             SizedBox(
                 height: 800,
-                child: CanvasPlayerView(vidURLs[0],
-                    viewSize: const Size(700, 600))),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceAround,
+                  children: [
+                    CanvasPlayerView(vidURLs[0],
+                        viewSize: const Size(700, 600)),
+                    CanvasPlayerView(vidURLs[0],
+                        viewSize: const Size(700, 600)),
+                  ],
+                )),
           ],
         ));
   }