title: Pixels to points on iPhone screen
body: <p>I'm using an online OCR service that gives me each recognized word and its top/left point, width and height in pixels.</p>
  
  <p>I'm having a hard time to convert them to points and draw a rectangle around the recognized words, because (I think) besides the conversion from pixels to points itself, the imageView that contains the image (and on which I want to draw the rectangles) has a "scale aspect fit" content mode.</p>
  
  <p>This is how I get the image and send it to the web service:</p>
  
  <pre><code>__weak typeof(self) weakSelf = self;
  
  [self.cameraView captureImageWithCompletionHander:^(id image)
   {
       self.cameraView.enableTorch = NO;
       self.captureImageView = [[UIImageView alloc] initWithImage:image];
       self.captureImageView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.7];
       self.captureImageView.frame = CGRectOffset(weakSelf.view.bounds, 0, -weakSelf.view.bounds.size.height);
       self.captureImageView.alpha = 1.0;
       self.captureImageView.contentMode = UIViewContentModeScaleAspectFit;
       self.captureImageView.userInteractionEnabled = YES;
       [self.cameraView addSubview:self.captureImageView];
       NSData *imageData = UIImagePNGRepresentation(image);
       NSURL *urlSave = [[self getDocumentsPathURL] URLByAppendingPathComponent:k_IMAGE_NAME];
       [imageData writeToFile:urlSave.path atomically:NO];
       OCRController *ocrController = [OCRController sharedInstance];
       [ocrController callOCRSpace:(UIImage*)image
                        completion:^(NSArray *responseObject) {
                            [ProgressHUD dismiss];
                            NSLog(@"Results: %@", responseObject);
                            dispatch_async(dispatch_get_main_queue(), ^{
                                [self drawRectangleOnImage:self.scannedImage rect:responseObject];
                            });
                        } error:^(NSError *error) {
                            [ProgressHUD dismiss];
                            NSLog(@"Error OCR: %@", error.localizedDescription);
                        }];
  </code></pre>
  
  <p>And this is the method that draws the rectangles (I'm trying with just the first one for now):</p>
  
  <pre><code>- (void)drawRectangles:(NSArray*)objects {
      Words *firstObj = objects[0];
      NSLog(@"Word: %@", firstObj.wordText);
      UIView *rectView = [[UIView alloc] initWithFrame:CGRectMake([firstObj.left floatValue] / 4, [firstObj.top floatValue] / 4, [firstObj.width floatValue] / 4, [firstObj.height floatValue] / 4)];
      rectView.layer.borderColor = [UIColor redColor].CGColor;
      rectView.layer.borderWidth = 2.0;
      NSLog(@"Rect.:\nTop: %.2f - Left: %.2f\nWidth: %.2f - Height: %.2f", [firstObj.top floatValue] / 4, [firstObj.left floatValue] / 4, [firstObj.width floatValue] / 4, [firstObj.height floatValue] / 4);
      [self.captureImageView addSubview:rectView];
  }
  </code></pre>
  
  <p>And this is the result for the first detected word "Gracias" on the top-left of the image:</p>
  
  <p><a href="https://i.stack.imgur.com/XsnaP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XsnaP.jpg" alt="example"></a></p>
  
  <p><strong>Edit</strong> after Prashant Tukadiya's answer:</p>
  
  <pre><code>- (void)drawRectangles:(NSArray*)objects {
      Words *firstObj = objects[0];
      CGPoint imagePoints = CGPointMake([firstObj.left doubleValue], [firstObj.top doubleValue]);
      float percentX = imagePoints.x / self.scannedImage.size.width;
      float percentY = imagePoints.y / self.scannedImage.size.height;
      CGPoint imageViewPoints = CGPointMake(self.captureImageView.frame.size.width * percentX, self.captureImageView.frame.size.height * percentY);
  
      UIView *rectView = [[UIView alloc] initWithFrame:CGRectMake(imageViewPoints.x, imageViewPoints.y, [firstObj.width floatValue], [firstObj.height floatValue])];
      rectView.layer.borderColor = [UIColor redColor].CGColor;
      rectView.layer.borderWidth = 2.0;
      [self.captureImageView addSubview:rectView];
  }
  </code></pre>
  
  <p>I've also added the category UIImageView+GeometryConversion from the linked answer, but I really don't know how to use it.</p>
  
  <p>I'm pretty new to all this coordinates thing and I'm really lost.</p>
  
  <p>This is the result so far, looks like the I've got the X right, at least:</p>
  
  <p><a href="https://i.stack.imgur.com/WbGTF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WbGTF.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Second Edit</strong>: I'm very near</p>
  
  <p>So, I've found another example and created a new method:</p>
  
  <pre><code>-(void)drawRectangleOnImage:(UIImage *)img rect:(NSArray *)objects {
      CGSize imgSize = img.size;
      CGFloat scale = 0;
      UIGraphicsBeginImageContextWithOptions(imgSize, NO, scale);
      [img drawAtPoint:CGPointZero];
  
      for (Words *item in objects) {
          CGRect rect = [self.captureImageView convertRect:CGRectMake([item.left doubleValue], [item.top doubleValue], [item.width floatValue], [item.height floatValue]) toView:self.captureImageView];
          [[UIColor greenColor] setFill];
          UIRectFill(rect);
          NSLog(@"Palabra: %@\nRect: %@\n\n", item.wordText, NSStringFromCGRect(rect));
      }
  
      UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();
      self.captureImageView.image = newImage;
  }
  </code></pre>
  
  <p>This time I've been able to draw a rectangle on each recognized word. The problems now are:</p>
  
  <ol>
  <li><p>draw an empty rectangle (I haven't been able to do it yet and, yes, I feel stupid)</p></li>
  <li><p>give the user the possibility to zoom the image, touch a word on the image and only then, draw the rectangle around that word</p></li>
  </ol>
  
  <p>This is my last result:</p>
  
  <p><a href="https://i.stack.imgur.com/iIOaO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iIOaO.jpg" alt="enter image description here"></a></p>