颤振自定义油漆与路径交叉，但带有渐变和圆角

Question

我刚刚开始使用自定义画家，我已经创建了一个基本的十字架，但不确定如何使角变圆并使颜色渐变？

似乎梯度需要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它增加了一个边框，但它看起来不太好，因为每个多边形都是一个单独的对象。

Answer 1

您可以自由使用着色器上的 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,
],
);