我需要在未选择区域的其余部分上涂上一层白色,这样您才能看到所选择的内容。
所以我需要以稍微不同的颜色或沿这个方向的某种颜色来绘制此处的区域。
这是我当前的Painter代码:
class PolygonPainter extends CustomPainter {
List<ui.Offset> points;
bool overflow;
double radius;
EditorType currentType;
ui.Image image;
Rect boundingBox;
Rect inputRect;
PolygonPainter({
@required this.points,
@required this.overflow,
@required this.radius,
@required this.image,
@required this.currentType,
@required this.boundingBox,
@required this.inputRect,
});
@override
void paint(Canvas canvas, Size size) {
if (inputRect != null && boundingBox != null) {
Color mainColor = overflow ? Color.fromRGBO(52, 152, 219, 0.2) : Color.fromRGBO(231, 76, 60, 0.2);
/// paint for lines
final paint = Paint()
..color = overflow ? Color.fromRGBO(231, 76, 60, 1) : Color.fromRGBO(52, 152, 219, 1)
..strokeCap = StrokeCap.square
..style = PaintingStyle.fill
..strokeWidth = 2;
/// paint for lines
final imagePaint = Paint();
/// paint for fill
final fillPaint = Paint()
..color = mainColor
..strokeCap = StrokeCap.square
..style = PaintingStyle.fill
..strokeWidth = 2;
/// paint for circle
final circlePaint = Paint()
..color = overflow ? Color.fromRGBO(231, 76, 60, 0.4) : Color.fromRGBO(52, 152, 219, 0.4)
..strokeCap = StrokeCap.square
..style = PaintingStyle.fill
..strokeWidth = 2;
canvas.drawImageRect(image, inputRect, boundingBox, imagePaint);
if (currentType == EditorType.Trainer) {
for (int i = 0; i < points.length; i++) {
if (i + 1 == points.length) {
canvas.drawLine(points[i], points[0], paint);
} else {
canvas.drawLine(points[i], points[i + 1], paint);
}
}
int numberCounter = 1;
for (int i = 0; i < points.length; i++) {
canvas.drawCircle(points[i], radius, circlePaint);
if (i % 2 == 0) {
TextSpan span = TextSpan(style: TextStyle(color: Colors.white), text: numberCounter.toString());
TextPainter tp = TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas, Offset(points[i].dx - 3.5, points[i].dy - 8));
numberCounter++;
}
}
}
}
}
@override
bool shouldRepaint(PolygonPainter oldPainter) => oldPainter.points != points || overflow;
}
因此,我正在寻找解决方案,以便用户可以看到实际选择的内容,而不仅仅是看到线和点。