Маскирование контура и закрашивание в Flutter с помощью пользовательского Painter

#flutter #dart #canvas #skia

#flutter #dart #холст #skia

Вопрос:

я хочу раскрасить линии так, как я хочу, используя a drawPath для маскировки a drawPaint .Но я нахожу, что за правильными результатами, подобными этому, черный фон.Когда я использую BlendMode.src для проверки src (строки), я нахожу, что там также черный фон, который привязывает мою строку вот так, есть какой-нибудь способ избежать этого?

 import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() => runApp(StartPage());

class StartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: PaintDemo(),
        size: Size.infinite,
      ),
    );
  }
}

class PaintDemo extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var startPoint = Offset(0, 0);
    var controlPoint1 = Offset(size.width / 2, 0);
    var controlPoint2 = Offset(size.width / 2, size.height);
    var endPoint = Offset(size.width, size.height);

    var path = Path()
      ..moveTo(startPoint.dx, startPoint.dy)
      ..cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
          controlPoint2.dy, endPoint.dx, endPoint.dy);

    canvas.save();

    canvas.drawPaint(
      Paint()
        ..shader = ui.Gradient.linear(
          Offset(size.width / 2, 0),
          Offset(size.width / 2, size.height),
          [
            Color(0xFF32D74B),
            Color(0xFFFF453A),
          ],
        ),
    );

    canvas.restore();

    canvas.saveLayer(
      Rect.fromLTRB(0, 0, size.width, size.height),
      Paint()..blendMode = BlendMode.dstIn,
    );

    canvas.drawPath(
        path,
        Paint()
          ..isAntiAlias = true
          ..color = Colors.orange
          ..style = PaintingStyle.stroke
          ..strokeWidth = 3);

    canvas.restore();
  }

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

  

Ответ №1:

Я протестировал ваш код, не изменив ни одного символа в dartpad, и не увидел черного цвета фона. Пожалуйста, посмотрите на скриншот.

скриншот кода, выполняемого в dartpad