iOS开发UI之弧形文字

本文实例为大家分享了iOS开发UI之弧形文字的具体代码,供大家参考,具体内容如下

要实现类似效果的弧形文字,网上找了一圈没找到有简单的实现方式,CATextLayer也不能使用path来用路径绘制出来,所以我采用了一个曲线救国的方式。

实现思路

1.先找到文字的中心点 ,用一段圆弧将这些中心点连接起来

2.过每个中心点做圆弧的切线,找到圆弧的圆点O,连接O与每个中心点

3.现在把字去掉,来找点

圆点为O,圆弧最左边为A,最右边为B,顶点为N,AB与OP交点为P,由圆的垂径定理可以知道,AB是垂直于OP的。现在设AB长度为w,NP长度为h,OA、OA都是圆的半径,长度为r,则OP为r-h。将圆弧上面部分用一个矩形包起来,这个就可以作为显示弧形文字的view,如图。

由图中可以知道△AOP是直角三角形,根据勾股定理,则有r²=(w/2)²+(r-h)²,可以知道r=h/2+w²/8h,h是view的height,w是view的width,这两个是已知条件,所以可以得到圆的半径r。
假设弧形文字只有3个字,那么这三个字就分别在A、N、B的位置上,现在△AOP的三边都是已知的,那么可以求角AOP的角度α,用反三角函数arcsin或者arccos,则可以获得α的具体值。这个角α就是每个夹角的角度,弧形文字长度不固定时计算方式同理。

4.计算每个点的位置坐标

以view的左上角为原点(0,0),那么圆点O的坐标就是(w/2,r)。如果以圆点O为直角坐标系圆点,那么顶点N的起始弧度就是-π/2,将其设为startAngle。其他每个点的坐标就是(rcos(startAngle+αi),rsin(startAngle+αi)),其中i是每个点的索引(从0开始)。再将其转换到view左上角是原点的坐标系,则坐标为(w/2+rcos(startAngle+αi),r+rsin(startAngle+αi)),就是x和y分别加上圆点O的x和y。

代码实现

1.定义一些变量

var textLength:Int = 0 // 文字长度
var viewWidth:CGFloat = 0 // view宽度
var viewHeight:CGFloat = 0 // view高度
var arcRadius:CGFloat = 0 // 圆半径
var textHeight:CGFloat = 20 // 文字高度
var totalRadian:CGFloat = 0 // 总弧度
var eachRadian:CGFloat = 0 // 每个夹角弧度

2.初始化变量

viewWidth = view.frame.size.width - textHeight * 2
viewHeight = view.frame.size.height - textHeight
arcRadius = viewHeight / 2 + viewWidth * viewWidth / 8 / viewHeight // 根据垂径定理得到
textLength = text.isEmpty ? 1 : text.count
totalRadian =  asin(viewWidth / 2 / arcRadius) * 2 // 用反三角函数求角度,乘2之前得到的是一半的角度,乘2得到总角度(弧度制)
eachRadian = totalRadian / (CGFloat(textLength) - 1)

3.找点显示文字

// 先移除之前创建的
view.subviews.forEach { (subview) in
    subview.removeFromSuperview()
}

let startAngle:CGFloat = -CGFloat.pi / 2 - totalRadian / 2 // 起始角度,从左到右,取第一个字符的位置为起始角度

for i in 0..<textLength {
    let angle = startAngle + eachRadian * CGFloat(i)
    let x:CGFloat = arcRadius * cos(angle)
    let y:CGFloat = arcRadius * sin(angle)
    let center = CGPoint(x: frame.size.width / 2 + x, y: arcRadius + textHeight + y) // 各个label中点坐标
    
    if text.isEmpty {return}
    let label = UILabel()
    label.textColor = .black
    label.font = UIFont.systemFont(ofSize: 15)
    let character:Character = text[text.index(text.startIndex, offsetBy: i)] // 获取对应索引位置上的字符
    label.text = String(character)
    label.sizeToFit()
    label.center = center
    view.addSubview(label)
}

此时,绘制出来的文字方向还是正的,没有发生偏转

我们需要分别将每个文字旋转一定的角度。在最顶点N的文字的角度是正的,没有发生偏转,那么我们就以N点文字为基准点,经过观察论证,每个文字的旋转角度和每个点与圆心O的连线和线段ON形成的夹角一致,即eachRadian*i - totalRadian / 2。

4.旋转文字

let alpha = angle + CGFloat.pi / 2 // 这里的angle和上面循环里的是同一个变量
label.transform = CGAffineTransform(rotationAngle: alpha)

至此,基本实现了弧形文字的效果。不过还是有点问题,当文字较少时,文字之间的间隙很大

为了解决这个问题,我们可以给每个夹角设置一个固定值

5.固定夹角值

eachRadian = 0.1 // 0.85 // 此处是弧度值 ,可以任意一个角度,0.1弧度约为5.7度
totalRadian = eachRadian * (CGFloat(textLength) - 1)

最后,在不设置固定角度时,为了不让每次文字的开始结束都在view的最下边开始,可以将totalRadian乘以一个小于1的值,来减小角度。

totalRadian =  asin(viewWidth / 2 / arcRadius) * 2 * 4 / 5

6.用CATextLayer

如果觉得UILbel占用资源更大的话,可以考虑用更轻量级的CATextLayer

let textLayer = CATextLayer()
textLayer.bounds = CGRect(x: 0, y: 0, width: 20, height: 20)
let character:Character = text[text.index(text.startIndex, offsetBy: i)]
textLayer.string = String(character)
textLayer.foregroundColor = UIColor.black.cgColor
textLayer.font = UIFont.systemFont(ofSize: 15)
textLayer.fontSize = 15
textLayer.alignmentMode = .center
textLayer.contentsScale = UIScreen.main.scale
textLayer.position = center
view.layer.addSublayer(textLayer)

// 旋转
let alpha = angle + CGFloat.pi / 2
let trans = CATransform3DIdentity
textLayer.transform = CATransform3DRotate(trans, alpha, 0, 0, 1)

实现的效果是一样的。

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

(0)

相关推荐

  • iOS中UILabel设置居上对齐、居中对齐、居下对齐及文字置顶显示

    iOS中UILabel设置居上对齐.居中对齐.居下对齐 在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,博主参考国外网站,从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐. 具体如下: // // myUILabel.h // // // Created by yexiaozi_007 on 3/4/13. // Copyright (c) 2013 yexiaozi_007. All rights reserved. // #import <UIKit/UIK

  • IOS开发UIButton(左边图片右边文字效果)

    在使用UIButton的时候,需要实现UIButton左边图片,图片后面紧跟文字效果比较麻烦,简单实现方法具体代码如下: (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = RGB(235, 235, 240); UIButton *oneButton = [[UIButton alloc] initWithFrame:CGRectMake(0, kHeaderHeight + 8, kScreenWidth,

  • iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)

    在项目中使用文本输入框出UITextField之外还会经常使用 UITextView ,难免会有需求监听UITextView文本框内文本数量.下面介绍在swift3中两种常用方式 方式一: 全局通知 1.注册通知 在合适位置注册监听UITextView文本变化的全局通知 //UITextView 监听开始输入的两种方法 //方法一:通知 NotificationCenter.default.addObserver(self, selector: #selector(ComposeVC.textV

  • iOS设置UIButton文字显示位置和字体大小、颜色的方法

    前言 大家都知道UIButton按钮是IOS开发中最常用的控件,作为IOS基础学习教程知识 ,初学者需要了解其基本定义和常用设置,以便在开发在熟练运用. 一.iOS设置UIButton的字体大小 btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlStateNormal]; //设置按钮上的自体的大小 //[btn setFont: [UIFont system

  • iOS中的UITextView文字输入光标使用技巧小结

    1.创建并初始化 @property (nonatomic, strong) UITextView *textView; // 创建 self.textView = [[UITextView alloc] initWithFrame:self.view.frame]; // 设置textview里面的字体颜色 self.textView.textColor = [UIColor blackColor]; // 设置字体名字和字体大小 self.textView.font = [UIFont fo

  • iOS基于 UILabel实现文字添加描边功能

    可以达到文字描一圈黑边的效果: 继承UILabel以后重载drawTextInRect: - (void)drawTextInRect:(CGRect)rect { CGSize shadowOffset = self.shadowOffset; UIColor *textColor = self.textColor; CGContextRef c = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(c, 1); CGContextSet

  • iOS改变UITextField占位文字颜色的三种方法

    有时,UITextField自带的占位文字的颜色太浅或者不满足需求,所以需要修改,而UITextField没有直接的属性去修改占位文字的颜色,所以只能通过其他间接方式去修改. 例如:系统默认的占位文字颜色太浅 需要加深颜色,或者改变颜色 示例: 核心代码 方法一:通过attributedPlaceholder属性修改占位文字颜色 CGFloat viewWidth = self.view.bounds.size.width; CGFloat textFieldX = 50; CGFloat te

  • iOS应用中UILabel文字显示效果的常用设置总结

    创建UIlabel对象 复制代码 代码如下: UILabel* label = [[UILabel alloc] initWithFrame:self.view.bounds]; 设置显示文本 复制代码 代码如下: label.text = @"This is a UILabel Demo,"; 设置文本字体 复制代码 代码如下: label.font = [UIFont fontWithName:@"Arial" size:35]; 设置文本颜色 复制代码 代码如

  • iOS如何将UIButton中的图片与文字上下对齐详解

    前言 相信每位iOS开发者都知道在UIButton中可以设置图片和文字,也经常见到同时设置有图片和下方提示文字的按钮,但是当我自己去对图片按钮添加提示文字的时候,却发现这并不是想象中的那么简单.怎么不简单呢?下面来一起看看详细的介绍吧. 设置图片和文字 如示例代码: func initView() -> Void { var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100)) button.setImage(UIIm

  • 详解IOS 利用storyboard修改UITextField的placeholder文字颜色

    详解IOS 利用storyboard修改UITextField的placeholder文字颜色 最近有个需求需要修改UITextField的placeholder文字颜色,在网上找发现有用代码修改的,但是考虑到更加优雅的实现,所以尝试着在storyboard中直接实现,结果竟然真的成功了, 实现的位置如下: 具体步骤: 1.在User Defined Runtime Attributes中添加一个Key. 2.输入Key Path(这里我们输入_placeholderLabel.textColo

随机推荐

其他