颤动，PaintingStyle.fill 没有按预期工作

Question

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

class PaintHalfHexagon extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.fill;

    Path path = Path();

    path.moveTo(size.width * 0.1, size.height * 0.34);
    path.quadraticBezierTo(size.width * 0.1, size.height * 0.26,
        size.width * 0.3, size.height * 0.28);
    path.moveTo(size.width * 0.5, size.height * 0.34);
    path.quadraticBezierTo(size.width * 0.5, size.height * 0.26,
        size.width * 0.3, size.height * 0.28);
    path.moveTo(size.width * 0.1, size.height * 0.34);
    path.lineTo(size.width * 0.5, size.height * 0.34);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // return oldDelegate._lineOnefraction != _lineOnefraction;
    return false;
  }
}

当我描边的时候，形状很完美，当我填充它来填充颜色时，它的形状很奇怪。

PaintingStyle.fill
PaintingStyle.stroke

问题是什么以及如何解决？

Answer 1

我假设您想绘制一个具有 'stroke' 版本形状但像 'fill' 版本一样填充的对象。问题是调用 moveTo 会破坏您当前的路径并在您指定的坐标处开始一条新路径。即使您将单独的路径重新组合在一起，使它们 看起来 就像它们接触一样，就引擎而言，它们并不连续。因此，当您使用 PaintingStyle.fill 时，它不知道应该填写 space 。您示例中的结果是它分别关闭了每个贝塞尔曲线的路径，并分别填充了每个贝塞尔曲线。

您可以重构以删除 moveTo 调用，例如：

path.moveTo(size.width * 0.1, size.height * 0.34);
path.quadraticBezierTo(size.width * 0.1, size.height * 0.26,
    size.width * 0.3, size.height * 0.28);
path.quadraticBezierTo(size.width * 0.5, size.height * 0.26,
    size.width * 0.5, size.height * 0.34);
path.lineTo(size.width * 0.5, size.height * 0.34);

颤动，PaintingStyle.fill 没有按预期工作

Flutter, PaintingStyle.fill not working as expected

flutter

flutter-layout

flutter-animation