I have a UIImageView inside a UIScrollView. The image should be zoomable so I return it in the scrollview's viewForZoomingInScrollView method:
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
return _imageView;
}
The goal is to draw a 1-pixel-wide box around this image. The box should resize to be around the UIIMageView without scaling the thickness of its lines. Think of it as the guidelines/boxes around an image inside PowerPoint or any image editing program.
I created a CALayer called borderBoxLayer that contains a UIBiezerPath drawn around the image.
I tried the following 4 methods:
1- Adding this layer to the UIImageView won't work because it will scale the box lines too (because they're part of the UIImageView). The box lines should be always 1 pixel wide.
2- I used a CADisplayLink to REDRAW the layer every frame
CADisplayLink *displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateLayers)];
[displayLink setPreferredFramesPerSecond:60];
[displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
inside updateLayers, I get the current frame of the imageView to be able to change the frame of the borderBoxLayer. This method works "partially". The location and size of the box work as expected, but there's a lag that makes it "flashy" when zooming in/out. I also tried removing the layer and re-adding it with the updated frame, but it's the same result.
3- I created a fake UIView that sits on top of the ScrollView and I added the borderBoxLayer to this fakeView, using the same display link. It reduced the lag but it's still there.
4- Also tried to call updateLayers in the UIScrollViewDelegate methods like scrollViewWillBeginDragging, scrollViewDidEndZooming, etc. And also add my own UIPinchGestureRecognizer to the scrollview and call updateLayer in the handler but was much slower than methods #2 and #3.
The best results I got were from #2 and #3. However, the scrollview zooming is refreshing at a rate higher than my CADisplayLink.
Any idea how I can call updateLayers at a higher rate or achieve the result I want?
Thanks.
image caption: on left: original image size. on right: zoomed in but box thickness is the same.
imageView.layer.borderWidth? – Malik