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;
}

如何设置剪切路径的起点

1 个答案: