在 Flutter Canvas 中使用带有 Paint 对象的渐变

Question

我可以使用以下示例绘制半圆： Flutter如何画半圆（半圆）

但是，

Paint

对象似乎只接受

Color

（使用

Paint.color

）。我想添加

RadialGradient

或

LinearGradient

作为

Color

。这可能吗？

Answer 1

是的！使用

Paint.shader

这是完全可能的。
您可以直接使用

dart:ui

创建渐变着色器，也可以使用

Gradient.createShader

将 Flutter 渐变转换为着色器。

dart:ui

渐变

import 'dart:ui' as ui;

// In your paint method
final paint = Paint()
  ..shader = ui.Gradient.linear(
    startOffset,
    endOffset,
    [
      color1,
      color2,
    ],
  );

可以在这里看到一个现实世界的例子。

颤动

painting

渐变

import 'package:flutter/painting.dart';

// In your paint method
final paint = Paint()
  ..shader = RadialGradient(
    colors: [
      color1,
      color2,
    ],
  ).createShader(Rect.fromCircle(
    center: offset,
    radius: radius,
  ));

可以在这里找到这样的示例。

---

这两者实际上是相同的。 Flutter 绘画版本只是在调用

dart:ui

时将其转换为 createShader 渐变（

shader

）。它存在的原因是绘画版本更适合像

Container

这样的预构建小部件。

Answer 2

注意：两种方法并不完全相同。对于第二种方法的对角渐变，您需要对其进行变换，因为

Gradient.createShader(Rect rect)

需要一个矩形；

final diagonalVector = Offset(x - x1, y - y1); // Vector pointing from start to target point.

paint.shader = LinearGradient(
  colors: [
    from,
    to,
  ],
  transform:  // Rotate gradient to align with the diagonal
      GradientRotation(atan2(diagonalVector.dy, diagonalVector.dx)),
).createShader(Rect.fromPoints(
  Offset(x1, y1),
  Offset(x, y),
));