Flutter：如何自定义从下到上剪辑图像？

Posted 2023-03-12

【中文标题】Flutter：如何自定义从下到上剪辑图像？

【英文标题】：Flutter: How to custom clip an image from bottom to up?

【发布时间】：2020-02-12 10:39:56

【问题描述】：

我正在开发一个颤振项目并尝试剪辑图像。下面是我的代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  


class MyHomePage extends StatelessWidget 
  final String title;
  var scaffoldKey = GlobalKey<ScaffoldState>();
  MyHomePage(Key key, this.title) : super(key: key);

  @override
  Widget build(BuildContext context) 
    
    return Scaffold(
      
      appBar: AppBar(title: Text("THIS IS APP BAR"),),
      body: Stack(
          children: <Widget>[
            Padding(
            padding: const EdgeInsets.only(bottom: 2.0),
              child:ClipPath(
                clipper: ClippingClass(),
              child: Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 320.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                            "https://picsum.photos/250?image=9"))
                ),
              ),
            ),
          ),
          ],
        ),
    );
  


class ClippingClass extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    var path = Path();
    path.lineTo(0.0, size.height-40);
    path.quadraticBezierTo(size.width / 4, size.height,
        size.width / 2, size.height);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height,
        size.width, size.height - 40);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  

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

下面是结果。

但是我的意图不是让曲线从下到上。相反，我在这里从下到下。

我需要的如下（忽略这些线，它们是 Adob​​e XD 的指导线）

我怎样才能完成这项工作？

【问题讨论】：

我的回答解决了你的问题吗？

【参考方案1】：

您只需要在正在绘制的路径的高度反转您应用-40 的位置：

path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height - 40,
  size.width / 2, size.height - 40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height - 40,
  size.width, size.height);
path.lineTo(size.width, 0.0);
path.close();

【参考方案2】：

变化是

path.lineTo(0.0, size.height);
path.quadraticBezierTo(size.width / 4, size.height-40,        size.width / 2, size.height-40);
path.quadraticBezierTo(size.width - (size.width / 4), size.height-40,        size.width, size.height - 0);
path.lineTo(size.width, 0.0);

完整解决方案

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  


class MyHomePage extends StatelessWidget 
  final String title;
  var scaffoldKey = GlobalKey<ScaffoldState>();
  MyHomePage(Key key, this.title) : super(key: key);

  @override
  Widget build(BuildContext context) 

    return Scaffold(

      appBar: AppBar(title: Text("THIS IS APP BAR"),),
      body: Stack(
          children: <Widget>[
            Padding(
            padding: const EdgeInsets.only(bottom: 2.0),
              child:ClipPath(
                clipper: ClippingClass(),
              child: Container(
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                height: 320.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                            "https://picsum.photos/250?image=9"))
                ),
              ),
            ),
          ),
          ],
        ),
    );
  


class ClippingClass extends CustomClipper<Path> 
  @override
  Path getClip(Size size) 
    var path = Path();
    path.lineTo(0.0, size.height);
    path.quadraticBezierTo(size.width / 4, size.height-40,        size.width / 2, size.height-40);
    path.quadraticBezierTo(size.width - (size.width / 4), size.height-40,        size.width, size.height - 0);
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  

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