广告
返回顶部
首页 > 资讯 > 移动开发 >iOS实现圆角箭头视图
  • 352
分享到

iOS实现圆角箭头视图

iOS箭头视图 2022-06-01 16:06:33 352人浏览 独家记忆
摘要

在APP中实现类似聊天内容背景图时,需要绘制圆角及箭头。很多人会选择使用图片(这也是最省事的一种方法),但是对于在视图中对内容做约束布局的话,我们无法准确的知道箭头的偏移量。下面就来

在APP中实现类似聊天内容背景图时,需要绘制圆角及箭头。很多人会选择使用图片(这也是最省事的一种方法),但是对于在视图中对内容做约束布局的话,我们无法准确的知道箭头的偏移量。下面就来介绍一下利用CGContextRef怎样绘制吧。

先来看看效果图吧!

代码实现:


- (void)drawRect:(CGRect)rect {
    float lw = 2; // 边线宽度
    float aw = 4;// 箭头宽
    float ah = 5;// 箭头高
    float r = 3;// 圆角角度
    
    // 需要减去边线的宽度,为什么不是减去边线的宽度x2?
    // 因为左边线和上边线是往视图内描绘的,而右边线和下边线是往视图外描绘的。
    float w = self.frame.size.width - lw;// 设置画线长度
    float h = self.frame.size.height - lw;// 设置画线宽度
    
    // 获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 设置边线宽度
    CGContextSetLineWidth(context, lw);
    //边框颜色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
 
    // 矩形填充颜色
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
 
    CGContextMoveToPoint(context, 0, lw); // 开始坐标左边开始
    CGContextAddArcToPoint(context, w, lw, w, r, r); // 右上角角度
    CGContextAddArcToPoint(context, w , h, w-r, h, r); // 右下角角度
    CGContextAddArcToPoint(context, aw, h, aw, h-r, r); // 左下角角度
    CGContextAddLineToPoint(context, aw, ah); // 向左上竖线
    CGContextAddLineToPoint(context, 0, lw); // 向左上斜线
    
    CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径

    // 父类调用 放在画完边线后。不然设置的文字会被覆盖
    [super drawRect:rect];
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: iOS实现圆角箭头视图

本文链接: https://www.lsjlt.com/news/30472.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS实现圆角箭头视图
    在APP中实现类似聊天内容背景图时,需要绘制圆角及箭头。很多人会选择使用图片(这也是最省事的一种方法),但是对于在视图中对内容做约束布局的话,我们无法准确的知道箭头的偏移量。下面就来...
    99+
    2022-06-01
    iOS 箭头 视图
  • iOS如何实现圆角箭头视图
    这篇文章主要介绍iOS如何实现圆角箭头视图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在APP中实现类似聊天内容背景图时,需要绘制圆角及箭头。很多人会选择使用图片(这也是最省事的一种方法),但是对于在视图中对内容做...
    99+
    2023-06-14
  • Android自定义ViewGroup实现带箭头的圆角矩形菜单
    本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子:  要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置。 最简单的做法就是让U...
    99+
    2022-06-06
    菜单 Android
  • css如何实现的交互小三角箭头图标
    这篇文章将为大家详细讲解有关css如何实现的交互小三角箭头图标,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。代码如下:<!DOCTYPE html PUBLIC &qu...
    99+
    2023-06-09
  • iOS实现圆环比例图
    本文实例为大家分享了iOS实现圆环比例图的具体代码,供大家参考,具体内容如下 实现效果 实现方法 SSTCircleProgressView  @interfac...
    99+
    2022-05-16
    iOS 比例图
  • js canvas实现圆角图片
    本文实例为大家分享了js canvas实现圆角图片的具体代码,供大家参考,具体内容如下 圆角图片的代码实现: <!DOCTYPE html> <html lan...
    99+
    2022-11-12
  • css如何实现带箭头和圆点的轮播
    这篇文章给大家分享的是有关css如何实现带箭头和圆点的轮播的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。功能:图片轮播,当鼠标移入图片、圆点和方向键时,停止轮播,移除恢复。首先建立div,并放入图片#wai{&n...
    99+
    2023-06-08
  • Android基于Fresco实现圆角和圆形图片
    Fresco是FaceBook开源的Android平台图片加载库,可以从网络,从本地文件系统,本地资源加载图片 Fresco本身已经实现了圆角以及圆形图片的功能。 <!--圆形...
    99+
    2022-11-13
  • 怎么在CSS中实现三角形和箭头
    本篇文章给大家分享的是有关怎么在CSS中实现三角形和箭头,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、CSS盒子模型盒子包括:margin、border、padding、c...
    99+
    2023-06-08
  • Android实现圆角图片的方法
    本文实例为大家分享了Android实现圆角图片的具体代码,供大家参考,具体内容如下 效果图 创建类CustomRoundAngleImageView public class ...
    99+
    2022-11-12
  • 如何实现左右箭头图标
    今天小编给大家分享一下如何实现左右箭头图标的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。左右箭头图标什么是csscss是一种...
    99+
    2023-07-04
  • css如何使用伪类after实现三角箭头
    小编给大家分享一下css如何使用伪类after实现三角箭头,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!伪类after实现的三角箭头实现原理:三边设置边框,箭头指向的那个方向的border...
    99+
    2022-10-19
  • Android基于Fresco怎么实现圆角和圆形图片
    这篇文章主要介绍“Android基于Fresco怎么实现圆角和圆形图片”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android基于Fresco怎么实现圆角和圆形图片”文章能帮助大家解决问题。Fr...
    99+
    2023-06-29
  • Android实现图片设置圆角形式
    本文实例为大家分享了Android实现图片设置圆角形式的具体代码,供大家参考,具体内容如下 1.自定义的图片圆角形式CircleImageView类 public class C...
    99+
    2022-11-12
  • Android中的图片圆角怎么实现
    这篇文章主要介绍了Android中的图片圆角怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Android中的图片圆角怎么实现文章都会有所收获,下面我们一起来看看吧。Android 开发中,经常需要对图片...
    99+
    2023-06-29
  • android 设置圆角图片实现代码
    代码如下: <xml version="1.0" encoding="utf-8"> <LinearLayout xmlns:android="http:/...
    99+
    2022-06-06
    图片 Android
  • android 实现圆角图片解决方案
    现在我们就来看看怎么样把图片的四角都变成圆形的,为什么要这样做那,如果要是这样界面就会非常的美观,下面我们就来看看代码吧。 java代码: 代码如下: public stat...
    99+
    2022-06-06
    图片 解决方案 Android
  • Android自定义view实现圆形、圆角和椭圆图片(BitmapShader图形渲染)
    一、前言 Android实现圆角矩形,圆形或者椭圆等图形,一般主要是个自定义View加上使用Xfermode实现的。实现圆角图片的方法其实不少,常见的就是利用Xfermode,...
    99+
    2022-06-06
    view 图片 椭圆 Android
  • Android 实现圆角图片的简单实例
    Android 实现圆角图片的简单实例实现效果图:本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出。于是自己自定义了个View,实现图片的圆角以及圆形效果。效果图:Android 圆角图片的实现形...
    99+
    2023-05-31
    android 圆角图片 roi
  • Android开发实现图片圆角的方法
    本文讲述了Android开发实现图片圆角的方法。分享给大家供大家参考,具体如下: Bitmap myCoolBitmap = ... ; // <-- Your bit...
    99+
    2022-06-06
    方法 图片 android开发 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作