美文网首页ios 知识点
IOS H5页面图片点击捏合放大缩小

IOS H5页面图片点击捏合放大缩小

作者: d0u | 来源:发表于2017-02-08 10:53 被阅读2549次

    方式是以注入JS代码的方式,遍历所有的图片img标签,然后通过js获取到图片的url地址,然后自己再做点击弹出图片页面和添加捏合手势,代码如下(方法来自网络,从他人出学习来的,原文章地址找不到了...)
    H5加载完成之后注入js,获取url,给img添加可点击

    -(void)webViewDidFinishLoad:(UIWebView *)webView
    {
        //这里是js,主要目的实现对url的获取
        static  NSString * const jsGetImages =
        @"function getImages(){\
        var objs = document.getElementsByTagName(\"img\");\
        var imgScr = '';\
        for(var i=0;i<objs.length;i++){\
        imgScr = imgScr + objs[i].src + '+';\
        };\
        return imgScr;\
        };";
        
        [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
        NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
        mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
        if (mUrlArray.count >= 2) {
            [mUrlArray removeLastObject];
        }
        //urlResurlt 就是获取到得所有图片的url的拼接;mUrlArray就是所有Url的数组
        
        //添加图片可点击js
        [_webView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\
         var imgs=document.getElementsByTagName('img');\
         var length=imgs.length;\
         for(var i=0;i<length;i++){\
         img=imgs[i];\
         img.onclick=function(){\
         window.location.href='image-preview:'+this.src}\
         }\
         }"];
        [_webView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];  
    }
    

    点击img的时候拦截一下获取url

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
        
        //预览图片
        if ([request.URL.scheme isEqualToString:@"image-preview"]) {
            NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];
            path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            NSLog(@"path==%@",path);
            [self bigImg:path]; //这个是我自己添加的方法
            //path 就是被点击图片的url
            return NO;
        }
        return YES;
    }
    

    点击图片调用的方法

    -(void)bigImg:(NSString *)imgUrl
    {
        //背景view
        bigImgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];
        bigImgView.backgroundColor = [UIColor blackColor];
        [self.view addSubview:bigImgView];
        
        //图片本身
        UIImageView *bigimg = [[UIImageView alloc]init];
        bigimg.center = CGPointMake(kScreenWidth/2, kScreenHeight/2);
        
        [bigimg sd_setImageWithURL:[NSURL URLWithString:imgUrl]];
        
        //我这里设置的固定高度200;
        bigimg.frame = CGRectMake(0, (kScreenHeight-200)/2, kScreenWidth, 200);
       
        
        [bigImgView addSubview:bigimg];
        [bigimg setUserInteractionEnabled:YES];
        [bigimg setMultipleTouchEnabled:YES];
        
        // 缩放手势加到图片上
        UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchView:)];
        [bigimg addGestureRecognizer:pinchGestureRecognizer];
        
        //移动手势加到图片上
        UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panView:)];
        [bigimg addGestureRecognizer:panGestureRecognizer];
        
        
        //点击手势加达到大背景
        UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapView:)];
        [bigImgView addGestureRecognizer:tapGestureRecognizer];
        
    }
    
    
    //处理点击手势
    -(void) tapView:(UITapGestureRecognizer *)tapGestureRecognizer
    {
        [bigImgView removeFromSuperview];
    }
    
    
    
    // 处理缩放手势
    - (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;
        }
    }
    
    //处理拖拉手势
    - (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];
        }
    }
    
    
    

    相关文章

      网友评论

        本文标题:IOS H5页面图片点击捏合放大缩小

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