Flutter 绘制探索 6 | 深入分析 CustomPaint 组件 | 七日打卡

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController spread;
  @override
  void initState() {
    super.initState();
    spread =
        AnimationController(vsync: this, duration: Duration(milliseconds: 2000))
          ..repeat();
  }
  
  @override
  void dispose() {
    spread.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: CustomPaint(
          size: Size(120, 120),
          painter: ShapePainter(spread: spread),
        ),
      ),
    );
  }
}
复制代码

class ShapePainter extends CustomPainter {
  final Animation<double> spread;

  ShapePainter({this.spread}) : super(repaint: spread);

  @override
  void paint(Canvas canvas, Size size) {
    final double smallRadius = size.width / 6;
    final double spreadFactor = 2;

    Paint paint = Paint()..color = Colors.green;
    canvas.translate(size.width / 2, size.height / 2);
    canvas.drawCircle(Offset(0, 0), smallRadius, paint);
    
    if (spread.value != 0) {
      paint..color = Colors.green.withOpacity(1 - spread.value);
      canvas.drawCircle(
          Offset(0, 0), smallRadius * (spreadFactor * spread.value), paint);
    }
  }

  @override
  bool shouldRepaint(covariant ShapePainter oldDelegate) {
    return oldDelegate.spread != spread;
  }
}
复制代码

abstract class CustomPainter extends Listenable {
  const CustomPainter({ Listenable? repaint }) : _repaint = repaint;

  final Listenable? _repaint;

  // 监听
  @override
  void addListener(VoidCallback listener) => _repaint?.addListener(listener);
  
  // 移除监听
  @override
  void removeListener(VoidCallback listener) => _repaint?.removeListener(listener);
  // 略...
}
复制代码

---->[RenderCustomPaint#attach]----
@override
void attach(PipelineOwner owner) {
  super.attach(owner);
  _painter?.addListener(markNeedsPaint);
  _foregroundPainter?.addListener(markNeedsPaint);
}

@override
void detach() {
  _painter?.removeListener(markNeedsPaint);
  _foregroundPainter?.removeListener(markNeedsPaint);
  super.detach();
}

@override
RenderCustomPaint createRenderObject(BuildContext context) {
  return RenderCustomPaint(
    painter: painter,
    foregroundPainter: foregroundPainter,
    preferredSize: size,
    isComplex: isComplex,
    willChange: willChange,
  );
}

@override
void updateRenderObject(BuildContext context, RenderCustomPaint renderObject) {
  renderObject
    ..painter = painter
    ..foregroundPainter = foregroundPainter
    ..preferredSize = size
    ..isComplex = isComplex
    ..willChange = willChange;
}

@override
void didUnmountRenderObject(RenderCustomPaint renderObject) {
  renderObject
    ..painter = null
    ..foregroundPainter = null;
}

---->[画板使用]----
CustomPaint(
  size: Size(200, 200),
  painter: ShapePainter(color: Colors.red,offset: Offset(50,50)),
  foregroundPainter: ShapePainter(color: Colors.blue),
  child: Icon(Icons.android_rounded,size: 50,color: Colors.green,),
),

class ShapePainter extends CustomPainter {
  final Color color;
  final Offset offset;

  ShapePainter({this.color, this.offset = Offset.zero});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = color;
    canvas.drawCircle(offset, 20, paint);
  }

  @override
  bool shouldRepaint(covariant ShapePainter oldDelegate) {
    return oldDelegate.color != color || oldDelegate.offset != offset;
  }
}
复制代码

---->[RenderCustomPaint#paint]----
@override
void paint(PaintingContext context, Offset offset) {
  if (_painter != null) {
    _paintWithPainter(context.canvas, offset, _painter!);
    _setRasterCacheHints(context);
  }
  super.paint(context, offset);
  if (_foregroundPainter != null) {
    _paintWithPainter(context.canvas, offset, _foregroundPainter!);
    _setRasterCacheHints(context);
  }
}

合成器包含一个光栅缓存，它保存层的 bitmaps，以避免在每一帧上重复渲染这些层的消耗。
如果没有设置这个标志，那么合成器将会用它自己的触发器来决定这个层是否足够复杂，
是否可以从缓存中获益。

如果 [painter] 和 [foregroundPainter] 都为 null，此标志不能设置为true，
因为在这种情况下该标志将被忽略。

栅格缓存是否应该被告知这幅画是否可能在下一帧中改变。如果没有设置这个标志，那么 compositor 将会用它自己的heuristics 来决定当前层是否可能在将来被重用。

如果 [painter] 和 [foregroundPainter] 都为 null，此标志不能设置为 true，
因为在这种情况下该标志将被忽略。

---->[RenderCustomPaint#_setRasterCacheHints]----
void _setRasterCacheHints(PaintingContext context) {
  if (isComplex)
    context.setIsComplexHint();
  if (willChange)
    context.setWillChangeHint();
}

---->[PaintingContext#setIsComplexHint]----
void setIsComplexHint() {
  _currentLayer?.isComplexHint = true;
}
---->[PaintingContext#setWillChangeHint]----
void setWillChangeHint() {
  _currentLayer?.willChangeHint = true;
}

---->[RenderCustomPaint#performResize]----
@override
void performResize() {
  size = constraints.constrain(preferredSize);
  markNeedsSemanticsUpdate();
}

void _paintWithPainter(Canvas canvas, Offset offset, CustomPainter painter) {
  late int debugPreviousCanvasSaveCount;
  canvas.save();
  if (offset != Offset.zero)
    canvas.translate(offset.dx, offset.dy);
  painter.paint(canvas, size); // <----

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomPaint(
        painter: ShapePainter(color: Colors.red),
      ),
    );
  }
}
复制代码

main(){
  print('--0.clamp(3, 6):-------${0.clamp(3, 6)}-------');
  print('--1.clamp(3, 6)-------${1.clamp(3, 6)}-------');
  print('--4.clamp(3, 6)-------${4.clamp(3, 6)}-------');
  print('--7.clamp(3, 6)-------${7.clamp(3, 6)}-------');
}
日志: 
--0.clamp(3, 6):-------3-------
--1.clamp(3, 6)-------3-------
--4.clamp(3, 6)-------4-------
--7.clamp(3, 6)-------6-------
复制代码

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CustomPaint(
        painter: ShapePainter(color: Colors.red),
        child: Icon(Icons.android_rounded),
      ),
    );
  }
}
复制代码