[Flutter] 绘图--异形裁剪

由于时间关系，先上代码和效果。后续再补充上解释

代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ClipImagePage(),
    );
  }
}

class ClipImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text('裁切'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ClipPath(
                clipper: MyClipper(),
                child: Container(height: 300, width: 300, color: Colors.amber))
          ],
        ),
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    
    path.moveTo(0,0);// start point

    var radius = size.width / 3;
    
    path.arcToPoint(Offset(radius, radius),radius:Radius.circular(radius));

    var lineY = size.height - radius;
    var finalLineY = lineY > radius ? lineY : radius;
    
    path.lineTo(radius, finalLineY);
    
    path.arcToPoint(Offset(2*radius, size.height),radius:Radius.circular(radius),clockwise:false);

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

    return path;
  }

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

效果如下：

在上面的基础上，再完善，做出一个对称的效果

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ClipImagePage(),
    );
  }
}

class ClipImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text('裁切'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ClipPath(
                clipper: MyClipper(),
                child: Container(height: 100, width: 200, color: Colors.amber))
          ],
        ),
      ),
    );
  }
}

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

    var baseRadius = size.width / 10;
    var edgeSpace = baseRadius * 2;

    path.moveTo(edgeSpace, 0);

    path.lineTo(size.width - edgeSpace, 0);

    path.arcToPoint(Offset(size.width - edgeSpace + baseRadius, baseRadius),
        radius: Radius.circular(baseRadius));

    path.lineTo(size.width - edgeSpace + baseRadius, size.height - baseRadius);

    path.arcToPoint(Offset(size.width, size.height),
        radius: Radius.circular(baseRadius), clockwise: false);

    path.lineTo(0, size.height);

    path.arcToPoint(Offset(baseRadius, size.height - baseRadius),
        radius: Radius.circular(baseRadius), clockwise: false);

    path.lineTo(baseRadius, baseRadius);

    path.arcToPoint(Offset(edgeSpace, 0),
        radius: Radius.circular(baseRadius));

    return path;
  }

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

效果如下：