[XTPaster] iOS 贴纸功能 实现

作者: TEASON | 来源:发表于2015-10-28 14:51 被阅读5851次

请支持原创, 如需转载, 请注明出处@TEASON

先把代码贴上来,https://github.com/Akateason/XTPaster欢迎follow和star

XTPaster.gif

贴纸功能出现在很多图片社交中, 就是图片上面贴图片, 对贴纸而言就是需要控制贴纸的位置,旋转,大小, 说到底是处理gesture,transform,frame, 如果需要多张贴纸, 需要考虑增加删除和正在操作的对象 , 你的脑海中需要对这些东西有个了解.

铺垫做到这里, github下载代码, 集成方式如下
1.把Paster文件夹放到你的项目中
2.把UIImage+AddFunction类目放到你的项目中

主要逻辑在这两个类
XTPasterStageViewXTPasterView
1.XTPasterStageView是画布View,用来放需要被加工的图片,是主舞台,用来管理贴纸list,贴纸的新增和删除, 保存退出等
2.XTPasterView是贴纸类. 手势或点击控制旋转,位置,大小等

调用方式

1.new

    _stageView = [[XTPasterStageView alloc] initWithFrame:rectImage] ;
    _stageView.originImage = self.imageWillHandle ; // 需要被贴纸加工的图片
    _stageView.backgroundColor = [UIColor whiteColor] ;
    [self.view addSubview:_stageView] ;

2.add paster

    [_stageView addPasterWithImg:image] ;

如果你只想使用的话, 看到上面足矣 .

下面的部分从宏观和细节两个角度大概讲一下我个人实现的思路 .

大方向思路
  • pasterID , 用一个自增的id来控制内存里的贴纸唯一
  • XTPasterStageView管理多张贴纸 , XTPasterView中设置delegate在XTPasterStageView中回调控制新增和删除
  • 多张贴纸需要判断哪一张在操作中, 所以贴纸类需要一个bool状态isOnFirst来控制是否正在操作.
@interface XTPasterStageView : UIView

@property (nonatomic,strong) UIImage *originImage ;//原图

- (instancetype)initWithFrame:(CGRect)frame ;
- (void)addPasterWithImg:(UIImage *)imgP ;//加贴纸
- (UIImage *)doneEdit ;//完成保存

@end
#import <UIKit/UIKit.h>
#import "XTPasterStageView.h"

@class XTPasterView ;

@protocol XTPasterViewDelegate <NSObject>
- (void)makePasterBecomeFirstRespond:(int)pasterID ; //切换控制正在操作哪一张贴纸
- (void)removePaster:(int)pasterID ; //删除某张
@end

@interface XTPasterView : UIView

@property (nonatomic,strong)    UIImage *imagePaster ; //img resource
@property (nonatomic)           int     pasterID ;
@property (nonatomic)           BOOL    isOnFirst ; //是否正在操作
@property (nonatomic,weak)    id <XTPasterViewDelegate> delegate ;
- (instancetype)initWithBgView:(XTPasterStageView *)bgView
                      pasterID:(int)pasterID
                           img:(UIImage *)img ;
- (void)remove ;

@end
细节思路

上面给出.h的外部Api只和需求有关, 并把只和自己有关的细节放在.m里面
比如说变形按钮, 删除按钮, 拖动等等, 这些都是控制单张贴纸操作的细节 .
有以下几点需要注意:

  • 变形按钮: 实现缩放和旋转
  • 拖动: 手势 ,控制相对位移
  • 删除按钮: 删除在舞台上正在操作的贴纸
#define PASTER_SLIDE        150.0
#define FLEX_SLIDE          15.0
#define BT_SLIDE            30.0
#define BORDER_LINE_WIDTH   1.0
#define SECURITY_LENGTH     75.0

@interface XTPasterView ()
{
    CGFloat minWidth;
    CGFloat minHeight;
    CGFloat deltaAngle;
    CGPoint prevPoint;
    CGPoint touchStart;
    CGRect  bgRect ;
}

@property (nonatomic,strong) UIImageView    *imgContentView ;
@property (nonatomic,strong) UIImageView    *btDelete ; 
@property (nonatomic,strong) UIImageView    *btSizeCtrl ;

@end

细节的实现见源码吧, 贴过来实在是有点冗长, github源码点这里过去欢迎follow

相关文章

网友评论

  • GavinKang:大神,我现在要实现贴纸功能,类似美图秀秀中的贴纸功能,但是一直对于美图秀秀的双指缩放,有问题,没有解决,可以说一下思路吗??要是有Demo就更好了
    88ad37ab3be9:放大缩小的倍数怎么控制啊
    CocoaBird:你好,你的问题解决了没?我现在正好也遇到这样的需求了,希望能从获取你的帮助!
  • GavinKang:你好,我现在就是在处理图片编辑,但是需要实现美图秀秀,贴纸中编辑图片的功能,就是可以双指放大,单指移动,取消选中状态,现在使用的是你的类,在双指放大的时候,像素会发生变化,三个角的镜像,删除,旋转,也会放大或者缩小,我想在双指放大的时候,三个角的按钮大小不发生变化,求解决办法或者思路
  • 古子林:你好,感谢你的分享,受教了,但我遇到一个问题想请教一下,你这样获取到的图片像素是改变了的啊,如何保持图片分辨率不变呢?
  • cppup:mark,想添加图文呢
  • a831c19fb0cd:增加一个镜像功能就更完美了~
  • 竹林漫步:厉害,mark
  • 娘哩个脚:支持TextView吗?
  • c96787cb33a7:好厉害,mark
  • IMSong:不错,Mark

本文标题:[XTPaster] iOS 贴纸功能 实现

本文链接:https://www.haomeiwen.com/subject/tcoxhttx.html