Как установить начальную точку клиппата - PullRequest
Новая
       44

Как установить начальную точку клиппата

0 голосов
/ 30 апреля 2020

Я собираюсь сделать форму, используя ClipPath(). Но когда я рисую его, кажется, что он начинается с (0.0) координат своего родителя. Но я хочу, чтобы это началось с другой точки (size.width * 0.25, size.height). Я хочу добиться этого:

enter image description here

Вот код: 

    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, откуда это происходит): enter image description here

1 Ответ

1 голос
/ 30 апреля 2020

Вы можете использовать следующий способ. 

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

Пользовательский Clipper: 

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