首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

iOS编程101:如何创建圆形头像和圆角图片

IOS7的一个变化是相对于方形图像,更偏爱于使用圆形图像。在内置的应用中可以看到圆形图标或圆形图像联系人和电话应用。...layer对象提供了多种属性,使用它们来控制视图的可视内容: 背景颜色 边框和边框宽度 阴影颜色,宽度等 Opacity(不透明度) 圆角半径 Corner radius就是我们用来绘制圆角和圆形图像的属性...创建圆形用户头像 接下来,让我们看看如何通过改变圆角半径,使用户头像转换成一个圆形图像。...所以上面的第一行是设置layer对象(CALayer类的一个实例)的圆角半径。将方形图像变成圆形图像,半径应设置为UIImageView宽度的一半。例如,如果方形图像的宽度是100像素。...半径应设置为50像素。其次,你必须将clipsToBounds属性设置为YES,这样layer才能生效。 现在编译和运行应用程序,你会得到一个圆形头像。 ? 非常容易吧。

2.1K20

flutter系列之:flutter中常用的Stack layout详解

简介 对于现代APP的应用来说,为了更加美观,通常会需要用到不同图像的堆叠效果,比如在一个APP用户背景头像上面添加一个按钮,表示可以修改用户信息等。...为了用户更加方便的使用AlignmentGeometry,AlignmentGeometry提供了一些便捷的方法,topStart,topCenter,topEnd等,大家可以自行选取。...在我们这个例子中,我们在Stack中设置一个背景图片,然后在图片上叠加一个文本。 那么应该怎么实现呢?...首先我们需要设置Stack的alignment方式,我们希望文本和图片的中心重合,也就是说把文字放在图片中间,我们将Stack的alignment设置为Alignment.center。...接下来是一个背景图片,因为原始图片是一个正方形的图片,我们需要对图片进行裁剪成圆形,这里使用一个非常方便的类CircleAvatar来创建圆形的图标: const CircleAvatar(

58610

6详解AppBar小部件

您可以使用它来显示图标、图像、形状或使用布局小部件(例如row和 )的任意组合column。...), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐的小部件列表。我们通常在用作按钮的应用程序中看到它们来触发下拉菜单、个人资料头像等。...背景颜色 以下代码将 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影,900即最暗和最亮50。...工具栏包含文字,图标,按钮,和其他任何公司的前景,除了小部件,Container和Image。...中使用 AppBar 的布局 ( leading, title, 和actions) 如何自定义 AppBar 的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题

16.3K10

Flutter 专题】122 图解自定义半遮挡头像 SeriesCircleProfile & CircleAvatar

和尚在学习过程中,想实现一行半遮挡的用户头像的功能,横向展示过程中,具体包括 右侧头像逐个半遮挡左侧头像 和 左侧头像逐个半遮挡右侧头像 两种展示; 可展示本地图或网络图; 可自定义末尾图标;...左右半遮挡 和尚预想的核心功能,是实现不同方向的叠加遮挡效果;其中合适准备采用 Stack 小组件作为头像的层级展示,在通过 Positioned 设置偏移量来设置半遮挡效果;其中 Stack...CircleAvatar 和尚在设置圆形头像时了解到 CircleAvatar 组件,Flutter 提供了很多绘制圆形的方法,和尚趁此机会简单学习一下 CircleAvatar;CircleAvatar...; 案例尝试 1. child child 为 CircleAvatar 中居中展示的子 Widget,一般是 TextView,用于展示姓名等;若设置图片则不会进行圆形裁切; return CircleAvatar...3. backgroundColor & foregroundColor backgroundColor 和 foregroundColor 分别对应背景颜色和子 child 颜色,除非两个颜色均设置

1.1K51

Swift-图像的性能优化

设置图像圆角,不用cornerRadius 在获取上下文(UIGraphicsBeginImageContextWithOptions)和绘图(drawInRect)之间实例化一个圆形的路径,并进行路径裁切...不到万不得已,View的背景色尽量不要设置成透明颜色。...// 背景填充(在裁切之前做填充) backColor.setFill() UIRectFill(rect) 但黑线的原因暂时尚未查明。我之前的思路是按照做圆形头像的代码继续做的。...但是突然想到不用裁切,不用设置圆形头像的边框,突然感觉这样就有点多此一举了,因此将多余的代码就都删除了。没想到删多了,出问题了,不过好在有人及时给我提出了问题。并帮助我改正、再次感谢!...---- 2017年09月04日补充 又发现一个问题 就是如果按照最之前写的代码,在设置矩形图片时,如果不在开启图形上下文后,对背景做填充,那么当你的图像不是一个矩形的时候(是任意的不规则形状),那么,

1.6K70

FlutterFlutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )

设置若干子组件 ] ) 运行效果 : Center 组件填充整个屏幕 , Wrap 组件是 Center 的子组件 , 在中心显示 ; 参考博客 : 【FlutterFlutter 布局组件..., 监听器 onTap 点击事件 , 点击时删除对应的图片文件 , 并更新整体布局 ; GestureDetector 组件的 child 子组件就是我们看到的关闭按钮 , 先使用 ClipOval 圆形切割组件切割出一个黑色圆形..., // 右上角的删除按钮 child: ClipOval( child: Container( padding: EdgeInsets.all(3), // 背景装饰...存放获取的图片集合, 初始化时为空 List _images = []; // 图片获取引擎 final picker = ImagePicker(); /// 获取摄像头图像的方法...pickedFile.path)); } else { print('No image selected.'); } }); } /// 获取相册中的图像

8.4K20

Flutter实战】图片组件及四大案例

老孟导读:大家好,这是【Flutter实战】系列文章的第三篇,这一篇讲解图片组件,Image有很多高级用法,希望对您有所帮助。 图片组件是Flutter基础组件之一,和文本组件一样必不可少。...9图通常用于控件大小、宽高比不固定的场景,比如「聊天背景图片」等。...所有图标效果如下: 案例 聊天背景(.9图实现) Container( width: 200, padding: EdgeInsets.only(left: 8,top: 8,right: 20...'老孟,专注分享Flutter技术和应用实战。' '老孟,专注分享Flutter技术和应用实战。'...,), ) 背景图片大小是57x80: 右侧三角已经不在中间了,如果想让其一直保持居中,修改拉伸区域: centerSlice: Rect.fromLTWH(20, 10, 1, 60), 圆形带边框的头像

2.5K10

UI界面中的用户头像,这么设计就对了!

Avatar,译为用户头像,或者Userpic,用户可以通过它来辨别自己的身份,识别自己的id。 001.用户头像包含哪些内容? 一般的用户头像有几种形式,空白状态,姓名缩写,用户的照片或者图像。...为了更好的识别,背景颜色可以多样化; 2....Headers、Appbars 等是24-40dp 宽度的Avatars的主要目标; 3. 40-48dp头像通常用于内容块或列表; 4.如果你想在模板中使用头像,比如配置文件、设置等,那么你应该使用56...对于高优先级的指示,可以使用纯色和明亮的颜色 对于其他情况,请使用平滑或浅色背景 006. 调用操作 当头像被点击,然后需要触发其它操作的时候。...常见的做法是使用像圆形的按钮或嵌套功能的圆形图标,它表示点击后,动作将会发生。 007.包含文字的头像 a.侧面文字 当需要添加附加信息时,辅助标题可以与Avatar一起使用。

2.2K10

Flutter动画之粒子精讲

本文所有源码见github/flutter_journey 1.何为动画 1.1:动画说明 见字面,会动的画面。...画面连续渲染,当速度快到一定程度,大脑就会呈现动感 1).何为运动:视觉上看是一个物体在不同的时间轴上表现出不同的物理位置 2).位移 = 初位移 + 速度 * 时间 小学生的知识不多说 3).速度 =...extends CustomPainter { Ball _ball; //小球 Rect _area;//运动区域 Paint mPaint; //主画笔 Paint bgPaint; //背景画笔...给定一个较小的dx,随着dx增加,根据函数求出dy,然后更新小球信息 如下面的sin图像,随着每次更新,根据函数关系约束小球坐标值 double dx=0.0; void updateBall...,下面是通过参数方程让呈圆形轨迹 也就是数学学得好,想怎么跑怎么跑。

1.1K10

不懂设计的产品不是好开发

Material设计指南中给我们提供了这样一个工具,来方便开发者设置这些颜色。 https://material.io/resources/color 2....白色背景上的白色文字或图标的对比度为1:1。白色背景上的黑色文字有21:1的对比度。 Material设计指南确保在背景和前景(文本或图标)之间应用WCAG建议的最小对比度,即4.5:1。...Flutter中默认的材料文本样式是BodyText2。BodyText1可用于强调通常为BodyText2的文本。 Caption和Overline是最小的样式,用于注释,如图像标题,图表图例。...它们可以以光栅或矢量图像的形式下载。比起光栅图像,我更喜欢矢量图像,因为它们是可伸缩的,而且尺寸更小。 Material图标也可以在Web和Flutter项目中作为图标字体使用。...截至目前,材料图标有五种不同的主题:填充、锐利、圆形、轮廓和双色。Flutter支持填充、圆形、勾勒和锐利的风格。

2.5K20

Flutte部件目录-Material Components 顶

应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...在这种情况下,假定每个项目将具有不同的背景色,并且背景色将与白色形成鲜明对比。...FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容上以提升应用程序中的主要操作。...例如,他们可以显示头像图标,以阐明潜台词或正交行为(添加帐户)。 ? AlertDialog 警报是需要确认的紧急中断,通知用户有关情况。 AlertDialog小部件实现了这个组件。 ?...信息显示 Image 一个显示图像的小部件。 ? Icon 材质设计图标。 ? Chip 一个Material Design芯片。 芯片代表小块中的复杂实体,联系人。 ?

9.4K40

Qt编写自定义控件62-探探雷达

这个控件的核心其实就是外围的那个扫描圈和发散的扫描线,中间变大变小恢复正常的圆形头像,外围的扫描圈采用锥形渐变颜色,通过透明度控制形成扫描效果,核心方法就是drawPie,至于扩散圈,需要识别到单击以后将扩散圈存入队列...二、实现的功能 1:可设置中间图像 2:可设置图像的边框宽度+边框颜色,产生圆形图像效果 3:可设置扫描线的最大半径 4:可设置扫描线的边框宽度 5:可设置扩散圈的线条宽度 6:可设置扫描线的每次移动的步长.../** * 探探雷达控件 作者:东门吹雪(QQ:709102202) 整理:feiyangqingyun(QQ:517216493) 2019-10-01 * 1:可设置中间图像 * 2:可设置图像的边框宽度...+边框颜色,产生圆形图像效果 * 3:可设置扫描线的最大半径 * 4:可设置扫描线的边框宽度 * 5:可设置扩散圈的线条宽度 * 6:可设置扫描线的每次移动的步长 * 7:可设置扩散圈的每次移动的步长...QPainter *painter) { painter->save(); painter->setBrush(Qt::NoBrush); //绘制所有扩散圈,扩散圈其实就是个没有背景颜色的圆形

80420
领券