如何设置剪辑路径的起点

Question

我即将使用ClipPath() 制作一个形状。但是当我绘制它时，它似乎是从其父级的（0.0）坐标开始的。但我希望它从另一个点开始（size.width * 0.25, size.height）。我想实现这个：

代码如下：

    import 'dart:core';
    import 'package:flutter/material.dart';

    class TheHill extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        var path = Path();

        path.moveTo(size.width * 0.15, size.height);

        path.quadraticBezierTo(size.width * 0.25, size.height * 0.99999,
            size.width * 0.40, size.height * 0.92);

        path.quadraticBezierTo(size.width * 0.5, size.height * 0.87,
            size.width * 0.60, size.height * 0.92);

        path.quadraticBezierTo(size.width * 0.75, size.height * 0.99999,
            size.width * 0.85, size.height);

        path.lineTo(size.width, size.height);
        path.lineTo(0, size.height);

        path.lineTo(size.width, 0.0);
        path.close();

        return path;
      }

      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) => false;
    }

这是输出（红色括号是额外的 IDK 来自哪里）：

Answer 1

您可以使用以下方式。

  ClipPath(
          clipper: TheHill(),
          child: Container(
            width: 250,
            height: 250,
            color: Colors.amber,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Icon(Icons.play_arrow),
            ),
          ),
        ),

自定义剪辑器：

class TheHill extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(size.width * 0.15, size.height);

    path.quadraticBezierTo(size.width * 0.25, size.height * 0.99999,
        size.width * 0.40, size.height * 0.92);

    path.quadraticBezierTo(size.width * 0.5, size.height * 0.87,
        size.width * 0.60, size.height * 0.92);

    path.quadraticBezierTo(size.width * 0.75, size.height * 0.99999,
        size.width * 0.85, size.height);

    path.lineTo(size.width, size.height);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}