Flutter之裁剪Image Widget

栏目: IOS · Android · 发布时间: 5年前

内容简介:在前面的文章中,我们介绍了前面我们说过在ClipPath Extends Map

在前面的文章中,我们介绍了 Dart 的两种编译时,以及 Hot reload 模式。今天我们来看下在 Flutter 中创建不规则Widget的方式。 Android 原生中,我们在创建不规则边界 View 时,是通过 clipPath 的方式来实现,在 Flutter 中也有相关的概念,下面我们来学习下 Flutter 中的 ClipPath 相关概念及用法。

ClipPath Widget

前面我们说过在 FlutterEverything is Widget ,那么要使用 Path 自然也有对应的 Widget 对象- ClipPath

ClipPath Extends Map

ClipPath Widget 继承关系如下图:

Flutter之裁剪Image Widget

enter image description here

ClipPath Introduce

官方文档中 ClipPath 说明如下:

A widget that clips its child using a path.

ClipPath 相关的属性有三个:

  • child: Widget 类型,裁剪的 Widget 对象
  • clipper:定义裁剪路径的 CustomClipper 对象,其内部提供一个裁剪路径和是否需要重新裁剪
  • clipBehavior:裁剪 Widget 的模式,默认取值为 Clip.antiAlias ,可选取值有 Clip.noneClip.hardEdge , Clip.antiAlias , Clip.antiAliasWithSaveLayer .

裁剪模式取值的区别:

  • none:无模式
  • hardEdge:裁剪速度稍快,但容易失真,有锯齿
  • antiAlias:裁剪边缘抗锯齿,使得裁剪更平滑,这种模式裁剪速度比 antiAliasWithSaveLayer 快,但是比 hardEdge 慢,该模式常用于圆形和弧形之类的形状裁剪
  • antiAliasWithSaveLayer:裁剪后具有抗锯齿特性并分配屏幕缓冲区,所有后续操作在缓冲区进行,然后再进行裁剪和合成

ClipPath Use

在代码中我们可以使用如下代码声明一个 ClipPath Widget

1ClipPath(
2      child: Image.asset('images/coffee.jpg'),//裁剪的Widget对象,这里是一个Image Widget
3      clipper: BottomWaveClipper(),//裁剪路径
4  )
复制代码

其中 BottomWaveClipper 定义了 Image Widget 的裁剪路径,是 CustomClipper 的子类,代码如下:

1class BottomWaveClipper extends CustomClipper<Path>{
 2
 3  @override
 4  Path getClip(Size size) {
 5    var path = Path();
 6    path.lineTo(0.0, size.height-20);
 7
 8    //控制点1
 9    var firstControlPoint = Offset(size.width/4, size.height);
10    //第一段贝塞尔曲线终点
11    var firstEndPoint = Offset(size.width/2.25, size.height-30);
12    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);
13
14    //控制点2
15    var secondControlPoint = Offset(size.width - (size.width / 3.25), size.height - 65);
16    //第二段贝塞尔曲线终点
17    var secondEndPoint = Offset(size.width, size.height - 40);
18    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
19        secondEndPoint.dx, secondEndPoint.dy);
20
21    path.lineTo(size.width, size.height - 40);
22    path.lineTo(size.width, 0.0);
23    path.close();
24    return path;
25  }
26
27  @override
28  bool shouldReclip(CustomClipper<Path> oldClipper) {
29    //是否重新裁剪
30    return false;
31  }
32}
复制代码

利用上述代码构建的裁剪 Image Widget 如下:

Flutter之裁剪Image Widget

enter image description here

完整的 WavyHeaderImage Widget 相关代码如下:

1import 'package:flutter/material.dart';
 2
 3class WavyHeaderImage extends StatelessWidget {
 4
 5  @override
 6  Widget build(BuildContext context) {
 7    return ClipPath(
 8      child: Image.asset('images/coffee.jpg'),
 9      clipper: BottomWaveClipper(),
10    );
11  }
12}
13
14class BottomWaveClipper extends CustomClipper<Path>{
15
16  @override
17  Path getClip(Size size) {
18    var path = Path();
19    path.lineTo(0.0, size.height-20);
20
21    var firstControlPoint = Offset(size.width/4, size.height);
22    var firstEndPoint = Offset(size.width/2.25, size.height-30);
23    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);
24
25    var secondControlPoint = Offset(size.width - (size.width / 3.25), size.height - 65);
26    var secondEndPoint = Offset(size.width, size.height - 40);
27    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
28        secondEndPoint.dx, secondEndPoint.dy);
29
30    path.lineTo(size.width, size.height - 40);
31    path.lineTo(size.width, 0.0);
32    path.close();
33    return path;
34  }
35
36  @override
37  bool shouldReclip(CustomClipper<Path> oldClipper) {
38    return false;
39  }
40}
复制代码
1  @override
2  Widget build(BuildContext context) {
3    return new Scaffold(
4      backgroundColor: Colors.blueGrey,
5      body: WavyHeaderImage(),
6    );
7  }
复制代码

个人微信公众号,欢迎大家加入。

Flutter之裁剪Image Widget

enter image description here


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

近似算法

近似算法

瓦齐拉尼 / 2010-9 / 49.00元

《近似算法》系统总结了到本世纪初为止近似算法领域的成果,重点关注近似算法的设计与分析,介绍了这个领域中最重要的问题以及所使用的基本方法和思想。全书分为三部分:第一部分使用不同的算法设计技巧给出了下述优化问题的组合近似算法:集合覆盖、施泰纳树和旅行商、多向割和k-割、k-中心、反馈顶点集、最短超字符串、背包、装箱问题、最小时间跨度排序、欧几里得旅行商等。第二部分介绍基于线性规划的近似算法。第三部分包......一起来看看 《近似算法》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具