Flutter绘制-04-BlendMode专项

查看目录-->

魔障

BlendMode 一直以来是个让我看到就躲的角色，那几十个模式，一看就头大。最近决心研究透这个东西，一路艰难，如：

好像没有什么可参考的代码；
好像也没什么具体的博客文章可参考（除了原文的翻译）
最大的问题是，你写出的效果，跟文档描述不一样，那个四色条和鸟的效果你看不懂，这是最要命的。

不知你是否也遇到过这些问题。

有条件的总结

先说官方api：api.flutter.dev/flutter/dar… 看上去很详尽，但不能立刻让你下笔如有神。

BlendMode在很多地方都用到了，我这里所谓的“有条件”，仅是指在一些局部条件下，感觉有些理解了，以此做记录。

demo前提条件

在使用Canvas绘制时，saveLayer与restore之间生效。

BlendMode是什么

从官方api抽取关键点：

在画布上绘制时使用的算法。
BlendMode是一个枚举，每个枚举值代表一个算法。
在画布上绘制形状或图像时，可以使用不同的算法来混合像素。
混合像素？混合的是谁呢，src和dst。看下面示意图。
src和dst，可以看做是屏幕上的两层像素点，BlendMode决定这两层像素点如何叠加。

如图，在框与圆的重合部分，后画的覆盖先画的，也就是3在2上面，6在5上面。
注意，有个红框bg，不参与blendmode计算。只有src与dst参与计算。

注意

关于图形的亮度、饱和度和色调，请了解下，可参考：jingyan.baidu.com/article/d2b…
模式解释，也是来源于官方api，部分会加上个人理解

那二十多个模式

先看示意图，请记住代表src dst和bg的图形：

原始代码如下：

import 'package:flutter/material.dart';
import 'dart:math';
import 'dart:ui';
import 'dart:ui' as ui;

import 'package:flutter/services.dart';

class TestPaintBlendMode extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TestPaintState();
  }
}

class TestPaintState extends State<TestPaintBlendMode> {
  ui.Image _src;
  ui.Image _dst;
  @override
  void initState() {
    super.initState();
    _loadImage();
  }

  void _loadImage() async {
    _src = await loadImageFromAssets('images/a2.png');
    _dst = await loadImageFromAssets('images/dst.jpeg');
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test paint"),
      ),
      body: CustomPaint(
        painter: _MyPaint(_src, _dst),
        size: MediaQuery.of(context).size,
      ),
      backgroundColor: Colors.white,
    );
  }

  Future<ui.Image> loadImageFromAssets(String path) async {
    ByteData data = await rootBundle.load(path);
    List<int> bytes =
        data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
    return decodeImageFromList(bytes);
  }
}

class _MyPaint extends CustomPainter {
  ui.Image _src;
  ui.Image _dst;
  _MyPaint(this._src, this._dst);
  @override
  void paint(Canvas canvas, Size size) {
//    translateToCenter(canvas, size);
    print("size=" + size.width.toString() + " " + size.height.toString());
    _test(canvas, size);
  }

  void _test(Canvas canvas, Size size) {
    Paint _paint = Paint();
    _paint.isAntiAlias = true;
    canvas.drawPaint(_paint..color = Colors.black12);// 画背景

    _paint.color = Colors.red;
    canvas.drawCircle(Offset(150, 100), 100, _paint); // 画红圆

    canvas.saveLayer(Offset.zero & size, Paint()); // 新建层

    _paint.color = Colors.yellowAccent;
    canvas.drawCircle(Offset(250, 100), 100, _paint); // 画黄圆

    canvas.drawImage(_dst, Offset(0,550), _paint); // 画底部绿色图

//    _paint.blendMode = BlendMode.clear;
//    _paint.blendMode = BlendMode.src;
//    _paint.blendMode = BlendMode.dst;
//    _paint.blendMode = BlendMode.srcOver;
//    _paint.blendMode = BlendMode.dstOver;
//    _paint.blendMode = BlendMode.srcIn;
//    _paint.blendMode = BlendMode.dstIn;
//    _paint.blendMode = BlendMode.srcOut;
//    _paint.blendMode = BlendMode.dstOut;
//    _paint.blendMode = BlendMode.srcATop;
//    _paint.blendMode = BlendMode.dstATop;
//    _paint.blendMode = BlendMode.xor;
//    _paint.blendMode = BlendMode.plus;
//    _paint.blendMode = BlendMode.modulate;
//    _paint.blendMode = BlendMode.screen;
//    _paint.blendMode = BlendMode.overlay;
//    _paint.blendMode = BlendMode.darken;
//    _paint.blendMode = BlendMode.lighten;
//    _paint.blendMode = BlendMode.colorDodge;
//    _paint.blendMode = BlendMode.colorBurn;
//    _paint.blendMode = BlendMode.hardLight;
//    _paint.blendMode = BlendMode.softLight;
//    _paint.blendMode = BlendMode.difference;
//    _paint.blendMode = BlendMode.exclusion;
//    _paint.blendMode = BlendMode.multiply;
//    _paint.blendMode = BlendMode.hue;
//    _paint.blendMode = BlendMode.saturation;
//    _paint.blendMode = BlendMode.color;
//    _paint.blendMode = BlendMode.luminosity;

    _paint.color = Colors.blueAccent;
    canvas.drawCircle(Offset(250, 250), 100, _paint);  // 画蓝圆
    _paint.color = Colors.green;
    canvas.drawCircle(Offset(150, 250), 100, _paint); // 画绿圆

    canvas.drawImage(_src, Offset(0,400), _paint); // 画儿童图

    canvas.restore();
  }



  // 画布起点移到屏幕中心
  void translateToCenter(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, size.height / 2);
  }

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