面试题：Flutter中Skia与Dart运行时在图形绘制方面的结合方式

Skia与Dart运行时协作完成图形绘制操作的原理

Dart层构建图形描述：在Flutter中，Dart代码构建Widget树，每个Widget描述了其视觉外观和交互逻辑。例如，一个Container Widget定义了其大小、颜色、边距等属性。这些Widget经过布局和绘制流程，会生成对应的RenderObject树。RenderObject负责具体的布局和绘制逻辑，它将Widget的描述转化为更底层的图形绘制指令。
Skia执行绘制：Skia是一个2D图形库，Flutter使用Skia来实际执行图形绘制操作。Dart运行时通过调用Skia提供的API，将RenderObject生成的绘制指令传递给Skia。Skia根据这些指令在画布（Canvas）上进行绘制，最终将绘制结果显示在屏幕上。例如，当绘制一个圆形时，RenderObject会计算圆形的位置、半径等参数，并通过Dart调用Skia的API在画布上绘制圆形。
跨语言交互：Dart运行时与Skia之间通过FFI（Foreign Function Interface）进行交互。FFI允许Dart代码调用C/C++编写的Skia库函数。通过这种方式，Dart可以将绘制任务高效地交给Skia处理，同时保持Dart语言的简洁性和易用性。

常见场景及实现逻辑

绘制简单图形

场景：绘制一个红色的矩形。
实现逻辑：

import 'package:flutter/material.dart';

class RedRectangle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: RedRectanglePainter(),
    );
  }
}

class RedRectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Colors.red;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

在上述代码中，RedRectangle Widget使用CustomPaint来指定自定义绘制逻辑。RedRectanglePainter类继承自CustomPainter，在其paint方法中，通过canvas对象调用Skia的绘制方法drawRect，并使用Paint对象设置矩形的颜色为红色。

绘制复杂图形

场景：绘制一个带有渐变效果的圆形进度条。
实现逻辑：

import 'package:flutter/material.dart';

class CircularProgressBar extends StatelessWidget {
  final double progress;

  CircularProgressBar({required this.progress});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: CircularProgressBarPainter(progress: progress),
    );
  }
}

class CircularProgressBarPainter extends CustomPainter {
  final double progress;

  CircularProgressBarPainter({required this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2 - 10;
    final startAngle = -pi / 2;
    final sweepAngle = 2 * pi * progress;

    final gradient = SweepGradient(
      colors: [Colors.blue, Colors.green],
    );

    final paint = Paint()
     ..shader = gradient.createShader(
        Rect.fromCircle(center: center, radius: radius))
     ..strokeWidth = 20
     ..style = PaintingStyle.stroke;

    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      startAngle,
      sweepAngle,
      false,
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CircularProgressBarPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

在这个例子中，CircularProgressBar Widget根据progress值绘制一个圆形进度条。CircularProgressBarPainter类在paint方法中，使用canvas的drawArc方法绘制弧形。通过SweepGradient创建渐变效果，并将其应用到Paint对象的shader属性上，Skia根据这些指令完成带有渐变效果的圆形进度条的绘制。

星途面试题库

面试题：Flutter中Skia与Dart运行时在图形绘制方面的结合方式

知识考点

面试题答案

Skia与Dart运行时协作完成图形绘制操作的原理

常见场景及实现逻辑

绘制简单图形

绘制复杂图形