| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
gf67
10年前发布

iOS开发 之 WebView点击图片看大图效果

项目里面需要实现,点击webView里面的图片,看大图并且能够放大缩小效果,在此记录下实现过程。

  • 在webViewDelegate里面添加如下代码:

  • - (void)webViewDidFinishLoad:(UIWebView *)aWebView {        //调整字号      NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";      [webView stringByEvaluatingJavaScriptFromString:str];            //js方法遍历图片添加点击事件 返回图片个数      static  NSString * const jsGetImages =      @"function getImages(){\      var objs = document.getElementsByTagName(\"img\");\                                               for(var i=0;i<objs.length;i++){\                                                   objs[i].onclick=function(){\                                                       document.location=\"myweb:imageClick:\"+this.src;\                                                   };\                                               };\                                               return objs.length;\                                               };";            [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法            //注入自定义的js方法后别忘了调用 否则不会生效(不调用也一样生效了,,,不明白)      NSString *resurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];      //调用js方法  //    NSLog(@"---调用js方法--%@  %s  jsMehtods_result = %@",self.class,__func__,resurlt);  }
  • - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{      //将url转换为string      NSString *requestString = [[request URL] absoluteString];  //    NSLog(@"requestString is %@",requestString);            //hasPrefix 判断创建的字符串内容是否以pic:字符开始      if ([requestString hasPrefix:@"myweb:imageClick:"]) {          NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];  //        NSLog(@"image url------%@", imageUrl);                    if (bgView) {              //设置不隐藏,还原放大缩小,显示图片              bgView.hidden = NO;              imgView.frame = CGRectMake(10, 10, SCREEN_WIDTH-40, 220);              [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];          }          else              [self showBigImage:imageUrl];//创建视图并显示图片                    return NO;      }      return YES;  }
  • 创建放大图片的视图

  • #pragma mark 显示大图片  -(void)showBigImage:(NSString *)imageUrl{      //创建灰色透明背景,使其背后内容不可操作      bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];      [bgView setBackgroundColor:[UIColor colorWithRed:0.3                                                 green:0.3                                                  blue:0.3                                                 alpha:0.7]];      [self.view addSubview:bgView];            //创建边框视图      UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH-20, 240)];      //将图层的边框设置为圆脚      borderView.layer.cornerRadius = 8;      borderView.layer.masksToBounds = YES;      //给图层添加一个有色边框      borderView.layer.borderWidth = 8;      borderView.layer.borderColor = [[UIColor colorWithRed:0.9                                                      green:0.9                                                       blue:0.9                                                      alpha:0.7] CGColor];      [borderView setCenter:bgView.center];      [bgView addSubview:borderView];            //创建关闭按钮      UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom];  //    [closeBtn setImage:[UIImage imageNamed:@"close.png"] forState:UIControlStateNormal];      closeBtn.backgroundColor = [UIColor redColor];      [closeBtn addTarget:self action:@selector(removeBigImage) forControlEvents:UIControlEventTouchUpInside];      [closeBtn setFrame:CGRectMake(borderView.frame.origin.x+borderView.frame.size.width-20, borderView.frame.origin.y-6, 26, 27)];      [bgView addSubview:closeBtn];            //创建显示图像视图      imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, CGRectGetWidth(borderView.frame)-20, CGRectGetHeight(borderView.frame)-20)];      imgView.userInteractionEnabled = YES;      [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")];      [borderView addSubview:imgView];            //添加捏合手势      [imgView addGestureRecognizer:[[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)]];        }
  • 实现关闭和捏合手势的方法

  • //关闭按钮  -(void)removeBigImage  {      bgView.hidden = YES;  }    - (void) handlePinch:(UIPinchGestureRecognizer*) recognizer  {      //缩放:设置缩放比例      recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);      recognizer.scale = 1;  }

效果图如下