模拟系统照相机图片裁剪的功能-阿里云开发者社区

开发者社区> 游贤明> 正文

模拟系统照相机图片裁剪的功能

简介:
+关注继续查看

模拟系统照相机图片裁剪的功能

效果如下:

源码:

//
//  RootViewController.m
//  ScrollView
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"

@interface RootViewController ()<UIScrollViewDelegate>

{
    BOOL tapped;
}

@property (nonatomic, strong) UIScrollView           *scrollView;
@property (nonatomic, strong) UIImageView            *imageView;
@property (strong, nonatomic) UITapGestureRecognizer *tapGesture;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    
    // scrollView
    {
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
        [self.view addSubview:_scrollView];
        
        _scrollView.center              = self.view.center;
        _scrollView.delegate            = self;
        _scrollView.layer.borderWidth   = 2.f;
        _scrollView.layer.borderColor   = [UIColor redColor].CGColor;
        _scrollView.layer.masksToBounds = NO;
        
        // 不显示滚动的条
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.showsVerticalScrollIndicator   = NO;

        _scrollView.bouncesZoom      = YES;
        _scrollView.minimumZoomScale = 1.f;
        _scrollView.maximumZoomScale = 10.f;
        _scrollView.contentMode      = UIViewContentModeScaleAspectFit;
    }
    
    // 图片
    _imageView       = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    _imageView.image = [UIImage imageNamed:@"back"];
    _imageView.contentMode = UIViewContentModeScaleAspectFit;
    [_scrollView addSubview:_imageView];
    
    // 手势
    _tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                          action:@selector(tapRecognized:)];
    [_scrollView addGestureRecognizer:_tapGesture];
}

- (void)tapRecognized:(id)sender
{
    if (!tapped)
    {
        CGPoint tapPoint = [self.tapGesture locationOfTouch:0
                                                     inView:self.tapGesture.view];
        CGRect zoomRect = [self zoomRectForScrollView:self.scrollView
                                            withScale:6.0f
                                           withCenter:tapPoint];
        [self.scrollView zoomToRect:zoomRect animated:YES];
        tapped = YES;
    }
    else
    {
        [self.scrollView setZoomScale:1.0f animated:YES];
        tapped = NO;
    }
}


- (CGRect)zoomRectForScrollView:(UIScrollView *)scrollView
                      withScale:(float)scale
                     withCenter:(CGPoint)center
{
    CGRect zoomRect;
    zoomRect.size.height = scrollView.frame.size.height / scale;
    zoomRect.size.width  = scrollView.frame.size.width / scale;
    zoomRect.origin.x    = center.x - (zoomRect.size.width / 2.0);
    zoomRect.origin.y    = center.y - (zoomRect.size.height / 2.0);
    return zoomRect;
}

#pragma mark - UIScrollView代理方法
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

@end

一个需要注意的地方:

需要将图片的view在UIScrollView的代理方法中传递出去

至于这有怎么样的用处,如果有需求需要你截取图片的某一个区域,这时候你就知道有啥用了:)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Elastic Image Slider 带缩略图功能的幻灯片
  今天我们要为您展示如何创建一个简单的弹性幻灯片,带有缩略图预览功能。Elastic Image Slider 这款幻灯片能够自动调整以适应到其父容器,我们可以通过幻灯片使用缩略图预览或幻灯片的自动播放选项。
769 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4072 0
Android图形显示系统——一张图片的显示流程
Android设备上一张图片的显示过程 应用示例 假如我们现在有一张这样的风景照 想在Android设备(比如一个小米pad)上显示出来。首先想到的是写一个应用,用一个ImageView,把这张照片附到ImageView上显示,如下面的demo。 MainActivity.java package com.example.pictureshow; imp
2364 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4503 0
如何用 React 完成图片上传功能?
本文讲的是如何用 React 完成图片上传功能?,下面这篇特邀文章是由 Damon Bauer 完成的,主题是关于一个 web 开发人员非常常见的工作:为用户提供图片上传功能。我想说这并不容易,但是有了一些功能强大的工具来帮忙做一些比较“重”的工作
3666 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5730 0
蚂蚁分类信息系统5.8 解决手机端新闻详情页面图片不自动缩放问题
蚂蚁分类信息系统5.8 解决手机端新闻详情页面上传大图时,手机端浏览没有自动缩放,修复该BUG 修复后手机端可正常缩放 ...
1038 0
+关注
711
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载