4

Custom Painter を使い始めたばかりで、基本的なクロスを作成しましたが、角を丸くしたり、色をグラデーションにしたりする方法がわかりません。

グラデーションにはが必要なようですが、パスを使用したため、グラデーションはcreateShaderありrectません。

また、クロスの角を少し丸くしたいのですが、それがどのように行われるのかわかりません。長方形を作ろうと思ったのですが、斜めの長方形も作れないようです。

class CrossPainter extends CustomPainter {
  CrossPainter({this.bodyColour, this.strokeColour, this.stroke});
  final Color bodyColour;
  final Color strokeColour;
  final double stroke;
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint
      ..color = strokeColour
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..strokeWidth = stroke;

    Paint paint1 = Paint();
    paint1
      ..color = bodyColour
      ..style = PaintingStyle.fill
      ..strokeWidth = 0;

    double width = size.width;
    double height = size.height;

    Path path = Path();
    path.addPolygon([Offset.zero, Offset(width / 4, 0), Offset(width, height), Offset(width - (width / 4), height)], true);
    Path path2 = Path();
    path2.addPolygon(
        [Offset(width, 0), Offset(width - (width / 4), 0), Offset(0, height), Offset(0 + (width / 4), height)], true);

    canvas.drawPath(path, paint1);
    canvas.drawPath(path2, paint1);
    // canvas.drawPath(path, paint); //border
    // canvas.drawPath(path2, paint); //border
  }

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

境界線を追加するものもpaint1ありますが、各ポリゴンが個別のオブジェクトであるため、見栄えがよくありません。

4

1 に答える 1

0

Shader の Rect を自由に使用して、キャンバスに描かれた丸みを帯びたポリゴンにグラデーションを塗りつぶすことができます。私のアプローチでは、キャンバスで定義されたサイズを Rect のベースとして使用しました。

Paint()
  ..style = PaintingStyle.stroke
  ..strokeCap = StrokeCap.round
  ..shader = gradient
      .createShader(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
  ..strokeWidth = 20,

次に、レンダリングしているキャンバスにこのペイント オブジェクトを追加できます。

グラデーションに関しては、好きなように定義できます。しかし、ここに例があります。

const Gradient gradient = SweepGradient(
  startAngle: 1.25 * math.pi / 2,
  endAngle: 5.5 * math.pi / 2,
  tileMode: TileMode.repeated,
  colors: <Color>[
    Colors.blueAccent,
    Colors.lightBlueAccent,
  ],
);
于 2022-02-03T07:30:30.143 に答える