UIScrollView with drawable view as subview - objective-c

Question

i have an app which is composed by a main UIScrollView and a variable number of "pages" subviews.
Each one of this pages contains an imageView, some buttons and an UIView subclass, called drawView, that is responsible to draw over the UIImageView ( using touchesBegin , touchesMoved and tochesEnded) allowing users to take notes over the page.
Unfortunately as all pages are subviews of uiscrollview, so no touch reaches my drawView.
I have a button on the main interface to enable highlight mode and once tapped i'd like to disable all UIScrollView events so all events goes to my drawView.
I've tried to set userInteractionEnabled to the main ScrollView but, as my view is a subview of the UIScrollView, also my drawView receives no touch, same if i disable scroll.
Does anyone have a suggestion on how to solve my issue and achive it ?

Answer 1

Dont worry, make it simple.
Create a custom UIView Class that will allocate a CALayer to place your UIImage and a second CALayer to show the future drawing on top of it. Both CALayers can be placed on top of each other. Assuming you know how to handle transparency of the drawing CALayer.
As both visible parts are in one UIView you can keep on going with
-touchesBegin: -touchesMoved: -touchesEnded:
and handle your BezierPath or how ever you want to catch the fingers/pen.
Now take care and reduce the CGRect size that is repainted with -drawRect: so it still looks nice and does not paint the whole image buffer again, which will make it a little bit faster.
As you handle both Layers in one View you can keep on going as is with your UIScrollView but you will use the new CustomViewClass instead of the UIViews. Well - you don't need the UIImageView then.
something like.
#import UIKit;
#interface ImageDrawingUIView : UIView
-(instancetype)initWithFrame:(CGRect)frame andImage:(UIImage*)img;
#property (nonatomic) UIImage *image;
#property (nonatomic) CALayer *drawLayer;
#end
and
#import "ImageDrawingUIView.h"
#implementation ImageDrawingUIView {
UIImage* _painting;
NSMutableArray<NSValue *> *points;
NSUInteger strokes;
}
-(instancetype)initWithFrame:(CGRect)frame andImage:(UIImage *)img {
if (!(self=[super initWithFrame:frame])) return nil;
_image = img;
CALayer *imgLayer = [CALayer layer];
imgLayer.drawsAsynchronously = YES;
imgLayer.frame = frame;
imgLayer.contents = img;
[self.layer addSublayer:imgLayer];
_drawLayer = [CALayer layer];
_drawLayer.drawsAsynchronously = YES;
_drawLayer.frame = frame;
[self.layer addSublayer:_drawLayer];
_drawLayer.contents = (__bridge id _Nullable)[self paintingImage].CGImage;
points = [NSMutableArray new];
return self;
}
-(UIImage*)imageFromPoints {
// do the CGContext image creation from array of points here
CGSize size = CGSizeMake(66, 66);
const CGFloat mid = size.width * 0.5;
CGFloat f = 1.4;
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetLineWidth(context, 1.5);
CGContextSetLineCap(context, kCGLineCapSquare);
int strokeNum = 0;
for (int p = 0; p < [points count]; p++) {
// NSValues can store CGPoints, the points Array contains NSValues.
NSValue *value = points[p];
CGPoint dot = [value CGPointValue];
CGPoint point = CGPointMake(mid + (dot.x*f) * mid, mid + (dot.y*f) * mid);
if (strokes > strokeNum) {
CGContextMoveToPoint(context, point.x, point.y);
CGContextAddRect(context, CGRectMake(point.x - 1.5, point.y - 1.5, 3, 3));
strokeNum++;
} else {
CGContextAddLineToPoint(context, point.x, point.y);
}
}
CGContextStrokePath(context);
CGContextRestoreGState(context);
UIImage *i = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return i;
}
-(UIImage*)paintingImage {
if (!_painting) {
_painting = [self imageFromPoints];
}
return _painting;
}
// following code is not complete, just showing the methods
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// capture first finger, store first point in a array of CGPoints
[points addObject:[NSValue valueWithCGPoint: /*touches*/ CGPointMake(0, 0)]];
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// capture first finger, store in array of CGPoints
[points addObject:[NSValue valueWithCGPoint: /*touches*/ CGPointMake(0, 0)]];
_painting = [self imageFromPoints]; // update painted image
}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
// capture first finger, store in array and arrange the next finger is another array
[points addObject:[NSValue valueWithCGPoint: /*touches*/ CGPointMake(0, 0)]];
// apply new painting to CALayer again
_drawLayer.contents = (__bridge id _Nullable)(_painting.CGImage);
}
#end
You can allocate it in your UIScrollView like
NSUInteger pages = 0;
ImageDrawingUIView *page = [[ImageDrawingUIView alloc] initWithFrame:CGRectMake(0,pages*pageHeight,width,height) andImage:[UIImage imageWithContentsOfFile:#"filename"]];
pages++;
[self addSubView:page];
ooops , did'nt want to take all the joy to code it youself from ya. :)
PS: in -initWithFrame:andImage: there is still space to allocate the Buttons and stuff you need on top and interact with the content of the CustomUIView.