视频添加文字和贴纸需求分析

发表于 | 分类于

视频添加文字和贴纸需求分析

  • 贴纸除了天气海拔等物理来源之外，需要通过服务下载贴纸资源，外加内置系统表情。

  • 在视频编辑界面添加贴纸层，对贴纸进行拖动、缩放、旋转、删除操作。

  • 在视频编辑界面添加文字层，可以改变文字颜色，拖、缩放、旋转、删除操作。

技术背景

  • 对贴纸和文字进行操作，涉及到iOS UIGestureRecongizer手势响应的管理。

  • 对文字视图做操作编辑状态下恢复原状，涉及iOS仿射变换知识。

解决方案

在视图对象上添加手势，并且在各个手势selector API里面实现对视图的控制。

一、利用UIGestureRecongizer方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 添加所有的手势  
- (void) addGestureRecognizerToView:(UIView *)view {  
    // 旋转手势  
    UIRotationGestureRecognizer *rotationGestureRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotateView:)];  
    [view addGestureRecognizer:rotationGestureRecognizer];  
      
    // 缩放手势  
    UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchView:)];  
    [view addGestureRecognizer:pinchGestureRecognizer];  
      
    // 移动手势  
    UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panView:)];  
    [view addGestureRecognizer:panGestureRecognizer];  
}
1
2
3
4
5
6
7
8
// 处理旋转手势  
- (void) rotateView:(UIRotationGestureRecognizer *)rotationGestureRecognizer {  
    UIView *view = rotationGestureRecognizer.view;  
    if (rotationGestureRecognizer.state == UIGestureRecognizerStateBegan || rotationGestureRecognizer.state == UIGestureRecognizerStateChanged) {  
        view.transform = CGAffineTransformRotate(view.transform, rotationGestureRecognizer.rotation);  
        [rotationGestureRecognizer setRotation:0];  
    }  
}
1
2
3
4
5
6
7
8
// 处理缩放手势  
- (void) pinchView:(UIPinchGestureRecognizer *)pinchGestureRecognizer {  
    UIView *view = pinchGestureRecognizer.view;  
    if (pinchGestureRecognizer.state == UIGestureRecognizerStateBegan || pinchGestureRecognizer.state == UIGestureRecognizerStateChanged) {  
        view.transform = CGAffineTransformScale(view.transform, pinchGestureRecognizer.scale, pinchGestureRecognizer.scale);  
        pinchGestureRecognizer.scale = 1;  
    }  
}
1
2
3
4
5
6
7
8
9
// 处理拖拉手势  
- (void) panView:(UIPanGestureRecognizer *)panGestureRecognizer {  
    UIView *view = panGestureRecognizer.view;  
    if (panGestureRecognizer.state == UIGestureRecognizerStateBegan || panGestureRecognizer.state == UIGestureRecognizerStateChanged) {  
        CGPoint translation = [panGestureRecognizer translationInView:view.superview];  
        [view setCenter:(CGPoint){view.center.x + translation.x, view.center.y + translation.y}];  
        [panGestureRecognizer setTranslation:CGPointZero inView:view.superview];  
    }  
}

二、利用仿射变换实现

1、CGAffineTransformMake //直接创建变换

2、CGAffineTransformMakeScale //创建一个给定比例放缩的变换

CGAffineTransform CGAffineTransformMakeScale (CGFloat sx, CGFloat sy);可以看到这个参数就少多了，也比较好理解，假设是一个图片视图引用了这个变换，那么图片的宽度就会变为widthsx ，对应高度变为hight sy。

3、CGAffineTransformMakeRotation //创建一个旋转角度的变化

CGAffineTransform CGAffineTransformMakeRotation ( CGFloat angle);在这里可以看到参数并不是一个角度，但是它是把参数作为一个弧度，然后把弧度再转换为角度来处理，
其结果就可能是将一个图片视图旋转了多少度。

4、CGAffineTransformMakeTranslation //创建一个平移的变化

总结

对于文字进行缩放、旋转、平移操作之外，编辑状态下要还原原始状态，所以需要仿射变换和手势相结合。但也可以完全通过仿射变换实现。