Objective c - transparent draw on view (UIVisualEffectView) - ios

I want to create a transparent draw on a view (like the red draw inside the yellow view).
I have some view (UIVisualEffectView - the yellow view) and i want to draw with the finger, and it will looks like we "erase" it.
I created a subclass of UIVisualEffectView and tried to draw, but its not working so well..
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
for (UITouch *touch in touches)
{
CGPoint location = [touch locationInView:self];
CGFloat drawSize = 45;
CGRect rect = CGRectMake(location.x, location.y, drawSize, drawSize);
[self test:rect];
}
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
for (UITouch *touch in touches)
{
CGPoint location = [touch locationInView:self];
CGFloat drawSize = 45;
[self test:CGRectMake(location.x, location.y, drawSize, drawSize)];
}
}
-(void)test:(CGRect)rect
{
if (!self.mask)
{
self.mask = [[UIView alloc]initWithFrame:self.bounds];
self.mask.clipsToBounds = YES;
self.mask.backgroundColor = [UIColor clearColor];
}
if (!self.fillLayer)
{
self.fillLayer = [CAShapeLayer layer];
self.fillLayer.fillRule = kCAFillRuleEvenOdd;
self.fillLayer.fillColor = [UIColor greenColor].CGColor;
}
if (!self.outerbezierPath)
{
self.outerbezierPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:0];
self.outerbezierPath.usesEvenOddFillRule = NO;
}
self.innerCirclepath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:rect.size.height * 0.5];
[self.outerbezierPath appendPath:self.innerCirclepath];
[self.fillLayer removeFromSuperlayer];
self.fillLayer.path = self.outerbezierPath.CGPath;
[self.mask.layer addSublayer:self.fillLayer];
self.maskView = self.mask;
}

Related

Why touchesbegan: never gets called on a UIView after UIPinchGestureRecognizer is used?

I'm developing a drawing app which lets user to draw a UIbezierpath on a UIView (InsideView) subviewed by it's superView (self.view). I'm using conventional drawing codes in the InsideView like touchesBegan:, touchesMoved:, touchesEnded:and I'm handling pinch zoom code handlePinch:(UIPinchGestureRecognizer *)recognizer: inside the viewController class (which is InsideView's superView).
When I draw first, I can do the pinch zoom after it but when I do the pinch zoom first, the drawing code (touchesBegan etc) doesn't get called after UIPinchGestureRecognizer is fired and it doesnt draw anything on InsideView. What am I doing wrong? Thanks in advance.
//Code in the InsideView (which is a UIView subclass and is a subview for self.view)
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
path = [UIBezierPath bezierPath];
[path setLineWidth:7.0];
pointsArray = [NSMutableArray array];
finish = NO;
}
return self;
}
-(void)drawRect:(CGRect)rect{
[[UIColor redColor] setStroke];
[path stroke];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint p = [touch locationInView:self];
[path moveToPoint:p];
[pointsArray addObject:[NSValue valueWithCGPoint:p]];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint p = [touch locationInView:self];
[path addLineToPoint:p];
[self setNeedsDisplay];
[pointsArray addObject:[NSValue valueWithCGPoint:p]];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
[path closePath];
//Smoothing the path.
path.miterLimit=-10;
[self setNeedsDisplay];
finish = YES;
}
//Code in the viewController (InsideView's superView)
- (void)viewDidLoad {
[super viewDidLoad];
InsideView* sV = [InsideView new];
[sV setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[self.view addSubview:sV];
//Pinch
UIPinchGestureRecognizer*pinch = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:#selector(handlePinch:)];
pinch.delegate =self;
[sV addGestureRecognizer:pinch];
}
- (void)handlePinch:(UIPinchGestureRecognizer *)recognizer{
if ([recognizer numberOfTouches] < 2)
return;
if (recognizer.state == UIGestureRecognizerStateBegan) {
lastScale = 1.0;
lastPoint = [recognizer locationInView:self.view];
}
// Scale
CGFloat scale = 1.0 - (lastScale - recognizer.scale);
[sV.layer setAffineTransform:
CGAffineTransformScale([sV.layer affineTransform],
scale,
scale)];
lastScale = recognizer.scale;
// Translate
CGPoint point = [recognizer locationInView:self.view];
[sV.layer setAffineTransform:
CGAffineTransformTranslate([sV.layer affineTransform],
point.x - lastPoint.x,
point.y - lastPoint.y)];
lastPoint = [recognizer locationInView:self.view];
}
-(void)handlePinchWithGestureRecognizer:(UIPinchGestureRecognizer *)pinchGestureRecognizer{
sV.transform = CGAffineTransformScale(sV.transform, pinchGestureRecognizer.scale, pinchGestureRecognizer.scale);
pinchGestureRecognizer.scale = 1.0;
}
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
return YES;
}
I've developed a UIViewController where I used them together without any problem,s maybe a solution could be to move this logic from UIView to the UIViewController. So at viewDidLoad you can define the pinch recognizer like this
UIPinchGestureRecognizer* pinch = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:#selector(handlePinch:)];
[self.view addGestureRecognizer:pinch];
of course also the method handlePinch: should be moved to the UIViewController, together with touchesBegan:withEvent:,
touchesMoved:withEvent:, touchesEnded:withEvent: methods
what you should change in these methods is that you should change
self
to
self.yourSpecificCurrentUIView

How will i remove UIBezierPath from the uiview on button click.?

I am working on digital signature on uiview. i create it normaly by this code, but i am not able to remove bezier path on button click.i am sharing my code PLease look at my code.
#import "Signature.h"
#implementation Signature {
UIBezierPath *path;
UIImage *incrementalImage;
CGPoint pts[5]; // we now need to keep track of the four points of a Bezier segment and the first control point of the next segment
uint ctr;
}
- (id)initWithCoder:(NSCoder *)aDecoder
{
if (self = [super initWithCoder:aDecoder])
{
[self setMultipleTouchEnabled:NO];
[self setBackgroundColor:[UIColor greenColor]];
path = [UIBezierPath bezierPath];
[path setLineWidth:2.0];
}
return self;
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setMultipleTouchEnabled:NO];
path = [UIBezierPath bezierPath];
[path setLineWidth:2.0];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
[incrementalImage drawInRect:rect];
[path stroke];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
ctr = 0;
UITouch *touch = [touches anyObject];
pts[0] = [touch locationInView:self];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint p = [touch locationInView:self];
ctr++;
pts[ctr] = p;
if (ctr == 4)
{
pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0); // move the endpoint to the middle of the line joining the second control point of the first Bezier segment and the first control point of the second Bezier segment
[path moveToPoint:pts[0]];
[path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]]; // add a cubic Bezier from pt[0] to pt[3], with control points pt[1] and pt[2]
[self setNeedsDisplay];
// replace points and get ready to handle the next segment
pts[0] = pts[3];
pts[1] = pts[4];
ctr = 1;
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[self drawBitmap];
[self setNeedsDisplay];
[path removeAllPoints];
ctr = 0;
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
NSLog(#"hello");
[self touchesEnded:touches withEvent:event];
}
- (void)drawBitmap
{
UIGraphicsBeginImageContextWithOptions(self.bounds.size, YES, 0.0);
if (!incrementalImage) // first time; paint background white
{
UIBezierPath *rectpath = [UIBezierPath bezierPathWithRect:self.bounds];
[[UIColor greenColor] setFill];
[rectpath fill];
}
[incrementalImage drawAtPoint:CGPointZero];
[[UIColor blackColor] setStroke];
[path stroke];
incrementalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
- (void)erase {
NSLog(#"Erase Testing...");
// self->path = nil; //Set current path nil
//path = [UIBezierPath bezierPath];
// [self setNeedsDisplay];
}
I call erase method on unbutton click from another class, but I am not able to remove uibezeripath.
Try using this to remove the UIBezierPath,
[path removeAllPoints];
If you use CAShapeLayer *rectLayer = [[CAShapeLayer alloc] init]; aswell then call this line too,
[rectLayer removeFromSuperlayer];
Check how i am using this in one of my project if it can help,
- (void)drawRect:(CGRect)rect {
[_path stroke];
}
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame: frame];
if (self) {
// set Multiple touches Enabled to false for allow only single touch.
[self setMultipleTouchEnabled: NO];
_path = [UIBezierPath bezierPath];
// set Line width.
[_path setLineWidth:2.0];
}
return self;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
isMouseswipped = NO; //for touches eneded to make dot
ctr = 0;
UITouch *myTouch = [touches anyObject];
pts[0] = [myTouch locationInView: self];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
isMouseswipped = YES; //for touches eneded to make dot
CustomSignatureViewController *csvc = [[CustomSignatureViewController alloc]init];
UITouch *touch = [touches anyObject];
CGPoint p = [touch locationInView: self];
ctr++;
pts[ctr] = p;
if (ctr == 4) {
pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0);
[_path moveToPoint: pts[0]];
[_path addCurveToPoint: pts[3] controlPoint1:pts[1] controlPoint2:pts[2]];
[self setNeedsDisplay];
pts[0] = pts[3];
pts[1] = pts[4];
ctr = 1;
csvc.status = 1;
self.status = 1;
}
}
- (void)erase {
_path = nil;
_path = [UIBezierPath bezierPath];
[_path setLineWidth:2.0];
[self setNeedsDisplay];
}
This is custom class which returns uiview to fraw signature. It is subclass of UIView.
So when required signature, i import this class and instantiate it and got uiview object on which i can draw. then capture that view as image using graphics beginimage context!
Update :
In viewcontroller i am calling method like,
-(void)clear : (id)sender{
[signView erase];
signView.status = 0;
}
signView is signature class(as mentioned above)'s object. and erase is public method declared in .h file of signature class. (note : signature class is subclass of uiview so intance of it returns view onject so signView is uiview object)
Hope this will help :)
use this code it will help you
- (void)resetPath {
path = nil;
path = [UIBezierPath bezierPath];
[self setNeedsDisplay];
}
create this method in .h file of your subclass. From your UIViewController class you call this method whenever you need it
- (IBAction)youraction:(id)sender
{
[self.subclassedView resetPath];
}

Touch coordinates/location distorted

Hi all I have a spritekit scene "Menu"
that I am loading a UIView as a subview (CGScratchViewController.xib)
-(void)addscratchView:(SKView*)view
{
CGRect viewFrame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width);
//ScratchableView : UIView
myScratchView = [[ScratchView alloc]initWithFrame:viewFrame ];
self.name = #"menuScene";
[self.view addSubview:myScratchView];
}
ScratchableView class loads a layer that i can erase with my finger an overlay drawing revealing a drawing below
the code seems to be working however the touches are off and seem to be "scaled" somehow, meaning that if I draw in the top left corner the touch is in the correct place, but dragging the finger outward and the touch becomes more and more distorted
- any thoughts on what to look for to correct this
(am a newbie making newbie mistakes)
Scratchableview.h
// Created by Olivier Yiptong on 11-01-11.
//
#import "ScratchableView.h"
#implementation ScratchableView
#synthesize contentScale;
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
scratchable = [UIImage imageNamed:#"scratchable.jpg"].CGImage;
width = CGImageGetWidth(scratchable);
height = CGImageGetHeight(scratchable);
self.opaque = NO;
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceGray();
CFMutableDataRef pixels = CFDataCreateMutable( NULL , width * height );
alphaPixels = CGBitmapContextCreate( CFDataGetMutableBytePtr( pixels ) , width , height , 8 , width , colorspace , kCGImageAlphaNone );
provider = CGDataProviderCreateWithCFData(pixels);
CGContextSetFillColorWithColor(alphaPixels, [UIColor blackColor].CGColor);
CGContextFillRect(alphaPixels, frame);
CGContextSetStrokeColorWithColor(alphaPixels, [UIColor whiteColor].CGColor);
CGContextSetLineWidth(alphaPixels, 20.0);
CGContextSetLineCap(alphaPixels, kCGLineCapRound);
CGImageRef mask = CGImageMaskCreate(width, height, 8, 8, width, provider, nil, NO);
scratched = CGImageCreateWithMask(scratchable, mask);
CGImageRelease(mask);
CGColorSpaceRelease(colorspace);
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGContextDrawImage(UIGraphicsGetCurrentContext() , [self bounds] , scratched);
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event allTouches] anyObject];
if([[touch view] isKindOfClass:[UIImageView class]]){
CGPoint point= [touch locationInView:touch.view];
NSLog(#"%f%f",point.x,point.y);
location = point;
}
firstTouch = YES;
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event touchesForView:self] anyObject];
if (firstTouch) {
firstTouch = NO;
previousLocation = [touch previousLocationInView:self];
} else {
location = [touch locationInView:self];
previousLocation = [touch previousLocationInView:self];
}
// Render the stroke
[self renderLineFromPoint:previousLocation toPoint:location];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event touchesForView:self] anyObject];
if (firstTouch) {
firstTouch = NO;
previousLocation = [touch previousLocationInView:self];
[self renderLineFromPoint:previousLocation toPoint:location];
}
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
}
- (void) renderLineFromPoint:(CGPoint)start toPoint:(CGPoint)end {
CGContextMoveToPoint(alphaPixels, start.x, start.y);
CGContextAddLineToPoint(alphaPixels, end.x, end.y);
CGContextStrokePath(alphaPixels);
[self setNeedsDisplay];
}
- (void)dealloc {
CGContextRelease(alphaPixels);
CGImageRelease(scratchable);
CGDataProviderRelease(provider);
}
and Menuscene
-(void)didMoveToView:(SKView *)view {
self.userInteractionEnabled = YES;
SKView * skView = (SKView *)self.view;
skView.showsFPS = YES;
skView.showsNodeCount = YES;
// [self createButtons ];
[self addscratchView:view]; //for testing
}
-(void)addscratchView:(SKView*)view
{
CGRect viewFrame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width);
myScratchView = [[ScratchView alloc]initWithFrame:viewFrame ];
self.name = #"menuScene";
[self.view addSubview:myScratchView];
}
I've tried to convert the coordinates...still not much luck (maybe its not the right thing to do anyways ..
//convert between view coordinates and scene coordinates
//coordinate system is not the same in a Sprite Kit scene as they are in a UIView
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchlocation = [touch locationInView:touch.view];
spriteView = (Menu *) spriteView.scene.view;
CGPoint positionInScene = [self convertPoint:touchlocation fromCoordinateSpace:spriteView.scene.view];
Video of the effect/distorted touches
https://www.youtube.com/watch?v=dMrcufcKpao
It looks like you are not layering your views the way you are thinking you are laying them in your head.
Right now you have it layered like this
Back of the screen
SKView
--SKScene
ScratchView
Now when this is happening, here is how your views are probably laid out size wise.
SKView->UIBuilder Default (600x600 I think)
--SKScene-> SceneBuilder Default (600x600)
ScratchView->ScreenSize
Your SKView will then resize to the screen size with AutoConstraints, but your scene will stay at 600x600 because you do not set the scaleMode to .ResizeFill, so now you have 2 different coordinate systems, with scaling all off.
I think the best option for you right now is to just set your scaleMode to .ResizeFill (skView.scaleMode = .ResizeFill) so that all your coordinates line up, and as you learn more about what SpriteKit has to offer, you can refactor your code better to suit your needs.

how to space apart circle dots after drawing

user touch and drag on top of image
i had this code that will give me circle after drawing but how do i space apart them ?
//UIView CircleView
- (void) touchesBegan:(NSSet *) touches withEvent:(UIEvent *) event
{
NSLog(#"started");
// Initialize a new path for the user gesture
self.path = [UIBezierPath bezierPath];
self.path.lineWidth = 4.0f;
self.whiteCircleArray = [[NSMutableArray alloc]init];
UITouch *touch = [touches anyObject];
[self.path moveToPoint:[touch locationInView:self]];
self.touchedEnded = FALSE;
}
- (void) touchesMoved:(NSSet *) touches withEvent:(UIEvent *) event
{
// Add new points to the path
NSLog(#"Moved");
UITouch *touch = [touches anyObject];
//NSLog(#"[touch locationInView:self] %#",NSStringFromCGPoint([touch locationInView:self]));
[self.whiteCircleArray addObject: NSStringFromCGPoint([touch locationInView:self])];
[self.path addLineToPoint:[touch locationInView:self]];
//double startAngle = RADIANS(0);
//double endAngle = RADIANS(360);
// if ([touch locationInView:self].x <=200 )
// {
// [self.path addArcWithCenter:[touch locationInView:self] radius:LARGE_RADIUS startAngle:startAngle endAngle:endAngle clockwise:NO];
// }
// else if ([touch locationInView:self].x >=120 )
// {
// [self.path addArcWithCenter:[touch locationInView:self] radius:SMALL_RADIUS startAngle:startAngle endAngle:endAngle clockwise:NO];
// }
//[self.path addArcWithCenter:[touch locationInView:self] radius:BIG_RADIUS startAngle:startAngle endAngle:endAngle clockwise:NO];
//[self.path addArcWithCenter:[touch locationInView:self] radius:MIDDIUM_RADIUS startAngle:startAngle endAngle:endAngle clockwise:NO];
[self setNeedsDisplay];
}
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
NSLog(#"ended");
UITouch *touch = [touches anyObject];
//[self.path addLineToPoint:[touch locationInView:self]];
self.locationOfTouch =[touch locationInView:self];
self.touchedEnded = TRUE;
//NSLog(#"white circle pos %#",self.whiteCircleArray);
for(NSString *p in self.whiteCircleArray)
{
CGPoint point = CGPointFromString(p);
NSLog(#"X=%0.1f Y=%0.1f",point.x,point.x);
}
[self setNeedsDisplay];
}
- (void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
NSLog(#"cancelled");
[self touchesEnded:touches withEvent:event];
}
-(void)drawTouchCircle
{
CGContextRef ctx= UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGContextSetLineWidth(ctx,1);
CGContextSetRGBFillColor(ctx, 55.0/255, 255.0/255.0, 5.0/255.0, 1.0);
CGContextSetRGBStrokeColor(ctx,0.0/255,0.0/255,0.0/255,1.0);
for(NSString *p in self.whiteCircleArray)
{
CGPoint point = CGPointFromString(p);
NSLog(#"X=%0.1f Y=%0.1f",point.x,point.x);
CGContextAddArc(ctx, point.x, point.y, LARGE_RADIUS, 0, M_PI*2, YES);
CGContextFillPath(ctx);
CGContextStrokePath(ctx);
}
}
- (void) drawRect:(CGRect)rect
{
// Draw the path
NSLog(#"drawRect");
if (self.touchedEnded)
{
[self drawTouchCircle];
}
else
{
UIColor *strokeColor = [UIColor redColor];
[strokeColor setStroke];
[self.path stroke];
}
// [self.path fill];
//[self.path closePath];
}
Put a distance check in your algo... CGPoint diff = {p2.x - p1.x, p2.y - p1.y} If the diff is greater than , add a new point.

How can I draw a dot on the screen on touchesEnded using UIBezierpath

Can someone here please show me how to draw a single dot using UIBezierpath? I am able to draw a line using the UIBezierpath but if I remove my finger and put it back and then remove nothing get drawn on the screen.
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint p = [touch locationInView:self];
[pPath moveToPoint:p];
[pPath stroke];
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
[pPath stroke];
}
Your path doesn't include any line or curve segments to be stroked.
Try this instead:
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
CGPoint p = [touches.anyObject locationInView:self];
static CGFloat const kRadius = 3;
CGRect rect = CGRectMake(p.x - kRadius, p.y - kRadius, 2 * kRadius, 2 * kRadius);
pPath = [UIBezierPath bezierPathWithOvalInRect:rect];
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
[[UIColor blackColor] setFill];
[pPath fill];
}
I used this code:
-(void)handleTap:(UITapGestureRecognizer*)singleTap {
//draw dot on screen
CGPoint tapPoint = [singleTap locationInView:self];
[bezierPath_ moveToPoint:tapPoint];
[bezierPath_ addLineToPoint:tapPoint];
[self setNeedsDisplay];
}

Resources