php仿小红书,【仿小红书】为图片加上带动效的小标签

前言

最近项目中需要模仿小红书中发笔记的相关功能，其中允许用户对图片打标签的功能是其中的重点，下面是实现这个功能的一些思路。

小红书打标签功能

功能需求分析

把玩了一下小红书，总结了一下这个打标签功能的一些需求。

点击图片弹出输入框，输入标签信息后在点击位置生成一个标签。

点击标签上的小圆点可以切换不同样式，分别有左右两个方向，直线和斜线两种样式，标签数量1~3个，最多一共12种样式。

点击标签上的文字可以对标签内容进行编辑。

长按标签任意部分可以删除标签。

拖动标签任意部分可以移动标签的位置。

在不可编辑的状态看下，点击图片可以隐藏/显示所有标签。

思路

有了需求，下面就逐个来分析实现。

1、比例坐标、ViewModel

首先这个小标签需要响应触摸事件，所以打算以继承UIView的方式来实现它，显然这个标签由原点、线条、文本等部件组成。由于上面的第一个需求中在创建一个视图时，需要确定这个标签视图的位置，考虑到图片本身是有可能缩放来适配不同尺寸设备的，所以标签视图的位置可以用比例坐标来表示，即坐标的取值为0~1，最后乘以父视图的宽高得到父视图坐标系中的准确坐标。

使用比例坐标

同时也单独用一个TagViewModel来保存表示一个标签所需的数据，创建一个标签就是创建一个TagViewModel，标签视图只需要接受并处理这个ViewModel即可生成标签。

@interface TagViewModel : NSObject

//文本数组

@property (nonatomic, strong) NSMutableArray *tagModels;

//标签相对于父视图坐标系中的相对坐标，例如(0.5, 0.5)即代表位于父视图中心

@property (nonatomic, assign) CGPoint coordinate;

//样式

@property (nonatomic, assign) TagViewStyle style;

//顺序标志

@property (nonatomic, assign) NSUInteger index;

//初始化

- (instancetype)initWithArray:(NSArray *)tagModels coordinate:(CGPoint)coordinate;

//样式相关

- (void)resetStyle;

- (void)styleToggle;

- (void)synchronizeAngle;

@end

一个TagViewModel代表一个标签，一个标签中有可能含有几段文本，而且在绘制时需要用到相应样式中角度等数据，因此再定义一个TagModel表示一段文字。

@interface TagModel : NSObject

//文本

@property (nonatomic, copy) NSString *name;

@property (nonatomic, copy) NSString *value;

//角度

@property (nonatomic, assign) CGFloat angle;

//文本位置

@property (nonatomic, assign) CGSize textSize;

@property (nonatomic, assign) CGPoint textPosition;

//初始化

- (instancetype)initWithName:(NSString *)name value:(NSString *)value;

@end

2、 图层绘制

标签视图作为提供给外部的最小单位，而其内部的组件(文本、线条、原心)由于不需要响应事件，则选择用图层来绘制，这样做比用视图来绘制会稍微更高效。

一个标签视图主要由文本、线条、圆心组成，可以使用CATextLayer和CAShapeLayer来实现，结构参考下面的示意图。绘制的步骤是首先确定标签视图的宽高，视图高度由斜线半径与文本的高度决定，而视图宽度主要由斜线半径与文本的宽度决定。