Flutter中如何使用FragmentShader提升应用性能

Flutter中如何使用FragmentShader提升应用性能

问题描述

我是一个 Flutter 开发者，主要专注于 iOS 和 Android 平台的开发。最近，我被要求添加一个绘图模块，用户可以用手指在屏幕上移动绘制线条。虽然我已经实现了一个简单的绘图功能，但我发现存在性能问题，特别是在绘制大量线条时。我想了解如何使用 FragmentShader 提升应用性能。

解决方案

初始实现

首先，我创建了一个 LineObject 类来存储线条的主要特性（点的坐标、颜色和笔触宽度），并实现了 CustomPaint 小部件的 FingerPainter 类来定义绘制线条的逻辑。

class LineObject {
  List<Offset> points;
  Color color;
  double strokeWidth;

  LineObject(this.points, this.color, this.strokeWidth);
}

class FingerPainter extends CustomPainter {
  List<LineObject> lines;

  FingerPainter(this.lines);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    for (var line in lines) {
      paint.color = line.color;
      paint.strokeWidth = line.strokeWidth;
      canvas.drawPath(Path().addPolygon(Polygon(line.points.map((offset) => Offset.toFloatPoint(offset)).toList())), paint);
    }
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true; // 需要优化
  }
}

存在的问题

1. 整体重绘：每次都会重绘所有线条。
2. shouldRepaint 始终返回 true：任何微小的更改都会导致所有线条重绘。
3. 重绘不是孤立的：Widget 树随着线条数量线性增长，影响性能。

优化步骤

1. 优化重绘逻辑：
   • 只重绘特定线条。
   • 在 shouldRepaint 中添加条件，仅当线条变化时重绘。

class FingerPainter extends CustomPainter {
  List<LineObject> lines;

  FingerPainter(this.lines);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    for (var line in lines) {
      paint.color = line.color;
      paint.strokeWidth = line.strokeWidth;
      Path path = Path().addPolygon(Polygon(line.points.map((offset) => Offset.toFloatPoint(offset)).toList()));
      canvas.drawPath(path, paint);
    }
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    var oldPainter = oldDelegate as FingerPainter;
    return lines != oldPainter.lines;
  }
}

1. 使 LineObject 不可变：
   • 使用 freezed 库或手动创建不可变类。

import 'package:freezed_annotation/freezed_annotation.dart';

part 'line_object.freezed.dart';

@freezed
class LineObject with _$LineObject {
  factory LineObject(List<Offset> points, Color color, double strokeWidth) = _LineObject;
}

1. 使用 RepaintBoundary 隔离重绘：
   • 将 Stack 小部件包装在 RepaintBoundary 中，以减少不必要的重绘。

GlobalKey repaintKey = GlobalKey();

// ...

RepaintBoundary(
  key: repaintKey,
  child: Stack(
    // ...
  ),
)

1. 将绘制的对象转换为图像：
   • 使用 RepaintBoundary 和 GlobalKey 创建一个图像，并更新 CustomPainter 以绘制该图像。

Future<ImageProvider> captureImage() async {
  RenderRepaintBoundary boundary = repaintKey.currentContext?.findRenderObject() as RenderRepaintBoundary;
  ui.Image image = await boundary.toImage();
  ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  Uint8List pngBytes = byteData.buffer.asUint8List();
  return MemoryImage(pngBytes);
}

class ImagePainter extends CustomPainter {
  ImageProvider image;

  ImagePainter(this.image);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(image.image, Offset.zero, Paint());
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    var oldPainter = oldDelegate as ImagePainter;
    return image != oldPainter.image;
  }
}

1. 使用 FragmentShader 优化图像质量：
   • 创建一个着色器文件，并编写代码以避免图像像素化。

// shader.glsl
precision mediump float;

uniform vec2 uResolution;
uniform sampler2D uTexture;

out vec4 fragColor;

vec2 st = vec2((gl_FragCoord.xy / uResolution.xy));

vec4 applyAntiAliasing(vec2 coord) {
  // 简单的抗锯齿处理，可以根据需要优化
  vec2 offset = 1.0 / uResolution;
  vec4 sum = texture(uTexture, coord);
  sum += 0.25 * texture(uTexture, coord + offset);
  sum += 0.25 * texture(uTexture, coord - offset);
  sum += 0.25 * texture(uTexture, coord + offset * vec2(1.0, -1.0));
  sum += 0.25 * texture(uTexture, coord - offset * vec2(1.0, -1.0));
  return sum / 1.5;
}

void main() {
  fragColor = applyAntiAliasing(st);
}

// 在 Dart 代码中加载和使用着色器
Shader shader = Shader.fromSkull(
  'assets/shader.glsl',
  uniforms: <String, dynamic>{
    'uResolution': Vector2(widget.size.width, widget.size.height),
    'uTexture': image, // 假设 image 是一个 ui.Image
  },
);

Paint paint = Paint()..shader = shader;
canvas.drawRect(Rect.fromLTWH(0, 0, widget.size.width, widget.size.height), paint);

完整代码总结

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show ui;
import 'dart:typed_data' show Uint8List;
import 'dart:ui' as ui;
import 'line_object.freezed.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DrawingScreen(),
    );
  }
}

class DrawingScreen extends StatefulWidget {
  [@override](/user/override)
  _DrawingScreenState createState() => _DrawingScreenState();
}

class _DrawingScreenState extends State<DrawingScreen> {
  List<LineObject> lines = [];
  GlobalKey repaintKey = GlobalKey();
  Future<ImageProvider>? capturedImage;

  void _onPanStart(DragStartDetails details) {
    Offset start = details.globalPosition;
    lines.add(LineObject([start], Colors.black, 5.0));
    setState(() {});
  }

  void _onPanUpdate(DragUpdateDetails details) {
    Offset update = details.globalPosition;
    LineObject? lastLine = lines.lastOrNull;
    if (lastLine != null) {
      lines = lines.map((line) => line == lastLine
        ? line.copyWith(points: [...line.points, update])
        : line
      ).toList();
      setState(() {});
    }
  }

  Future<ImageProvider> captureImage() async {
    RenderRepaintBoundary boundary = repaintKey.currentContext?.findRenderObject() as RenderRepaintBoundary;
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    return MemoryImage(pngBytes);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Drawing Screen')),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onPanStart: _onPanStart,
        onPanUpdate: _onPanUpdate,
        child: Stack(
          children: [
            if (capturedImage != null)
              Positioned.fill(
                child