Flutter CustomPainter Cropper为非选定图像部件设置的不透明度

时间:2019-11-23 18:17:19

标签: canvas flutter dart

我需要在未选择区域的其余部分上涂上一层白色,这样您才能看到所选择的内容。

这是现在的样子: enter image description here

所以我需要以稍微不同的颜色或沿这个方向的某种颜色来绘制此处的区域。

这是我当前的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;

}

因此,我正在寻找解决方案,以便用户可以看到实际选择的内容,而不仅仅是看到线和点。

0 个答案:

没有答案