how to set cornerRadius of mask layer - iphone

I made a view. Then I added a mask layer like this.
UIView *dd = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 400)];
dd.backgroundColor = [UIColor redColor];
dd.layer.masksToBounds = YES;
dd.layer.cornerRadius = 30.0f;
[self.view addSubview:dd];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
CGRect maskRect = CGRectMake(100, 100, 200, 200);
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, nil, maskRect);
[maskLayer setPath:path];
CGPathRelease(path);
dd.layer.mask = maskLayer;
and how can I cornerRadius on maskLayer?
I tried to
dd.layer.masksToBounds = YES;
dd.layer.cornerRadius = 30.0f;
it doesn't work. and other things too.

Any way may be you want like this :
Add QuartzCore Framework in your Project
// Import in .m file
#import <QuartzCore/QuartzCore.h>
// Do this code
UIView *dd = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 460)];
dd.backgroundColor = [UIColor redColor];
dd.layer.masksToBounds = YES;
dd.layer.borderColor = [UIColor whiteColor].CGColor;
[self.view addSubview:dd];
CGFloat cornerRadius = 0;
CGFloat borderWidth = 2;
UIColor *lineColor = [UIColor orangeColor];
CGRect maskRect = CGRectMake(100, 100, 200, 200);
//drawing
CGRect frame =maskRect;
CAShapeLayer *_shapeLayer = [CAShapeLayer layer];
//creating a path
CGMutablePathRef path = CGPathCreateMutable();
//drawing a border around a view
CGPathMoveToPoint(path, NULL, 0, frame.size.height - cornerRadius);
CGPathAddLineToPoint(path, NULL, 0, cornerRadius);
CGPathAddArc(path, NULL, cornerRadius, cornerRadius, cornerRadius, M_PI, -M_PI_2, NO);
CGPathAddLineToPoint(path, NULL, frame.size.width - cornerRadius, 0);
CGPathAddArc(path, NULL, frame.size.width - cornerRadius, cornerRadius, cornerRadius, -M_PI_2, 0, NO);
CGPathAddLineToPoint(path, NULL, frame.size.width, frame.size.height - cornerRadius);
CGPathAddArc(path, NULL, frame.size.width - cornerRadius, frame.size.height - cornerRadius, cornerRadius, 0, M_PI_2, NO);
CGPathAddLineToPoint(path, NULL, cornerRadius, frame.size.height);
CGPathAddArc(path, NULL, cornerRadius, frame.size.height - cornerRadius, cornerRadius, M_PI_2, M_PI, NO);
//path is set as the _shapeLayer object's path
_shapeLayer.path = path;
CGPathRelease(path);
_shapeLayer.backgroundColor = [[UIColor clearColor] CGColor];
_shapeLayer.frame = frame;
_shapeLayer.masksToBounds = NO;
_shapeLayer.fillColor = [[UIColor grayColor] CGColor];
_shapeLayer.strokeColor = [lineColor CGColor];
_shapeLayer.lineWidth = borderWidth;
//_shapeLayer is added as a sublayer of the view, the border is visible
[dd.layer addSublayer:_shapeLayer];
dd.layer.cornerRadius = cornerRadius;
May be it will work.
happy coding.

You are making a layer from the path as I see. Therefore, rounder corners should be already in the path to take any effect. Try using not just rect but the Bezier curves.
Create a UIBezierPath with cornered radius from your rect like this:
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
and use it for your layer's path

Related

Draw Vertical line in UIView

UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight, dialogContainer.bounds.size.width, buttonSpacerHeight)];
lineView.backgroundColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:198.0/255.0 alpha:1.0f];
[dialogContainer addSubview:lineView];
I have used this code to draw horizontal line on UIView. How can I add Vertical line to UIView?
UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(dialogContainer.bounds.size.width/2, 0, buttonSpacerHeight, dialogContainer.bounds.size.height)];
lineView.backgroundColor = [UIColor colorWithRed:198.0/255.0 green:198.0/255.0 blue:198.0/255.0 alpha:1.0f];
[dialogContainer addSubview:lineView];
You can subclass UIView and override the drawRect: method. For example
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
//Horizontal Line
CGContextSetLineWidth(context, buttonSpacerHeight);
CGContextMoveToPoint(context,0,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight);
CGContextAddLineToPoint(context,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight + dialogContainer.bounds.size.width,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight);
//Vertical Line
CGContextAddLineToPoint(context,dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight + dialogContainer.bounds.size.width, dialogContainer.bounds.size.height);
CGContextStrokePath(context);
}
If you are adamant to use UIViews itself to draw vertical lines then reduce the width to a negligible value and increase the height of the UIView according to your wish.
Just exchange your height and width to draw vertical line simple :)
UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight,buttonSpacerHeight, dialogContainer.bounds.size.height)];
other example
UIView *horizontalLineView=[[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 2)];
[horizontalLineView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:horizontalLineView];
UIView *verticalLineView=[[UIView alloc] initWithFrame:CGRectMake(100, 100, 2, 100)];
[verticalLineView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:verticalLineView];
If you want to use coreGraphic then
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, self.frame);
CGContextMoveToPoint(context, XstartPoint, ystartPoint);
CGContextAddLineToPoint(context,XendPoint,YendPoint);
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
CGContextStrokePath(context);
}
If you want to draw using sprite kit then follow
taking Benny's answer to swift, you could do something like:
override func drawRect(rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
let spacerHeight = rect.size.height
CGContextSetLineWidth(context, 2.0)
CGContextMoveToPoint(context, 0, (spacerHeight / 4.0))
CGContextAddLineToPoint(context, 0, 3 * (spacerHeight / 4.0))
CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
CGContextStrokePath(context)
}
According to Apple's documentation CGRect Returns a rectangle with the specified coordinate and size values:
CGRect CGRectMake (
CGFloat x,
CGFloat y,
CGFloat width,
CGFloat height
);
So try inverting what you ised to have as the width with the height
Like you have draw horizontal line just increase the height of UIView and and decrease the width like the below,
UIView * lineView = [[UIView alloc] initWithFrame:CGRectMake(0, dialogContainer.bounds.size.height - buttonHeight - buttonSpacerHeight, 2, 200)];

Moving two shapes along path iOS?

I'm new to Objective-C, and I'm trying to create an iPhone application. I'm trying to move two rectangles (tagging along behind each other) along a path (specifically, an oblique straight oval).
With the below code, I am able to get both rectangles to show up, but the problem is that when I change the value of the starting point for their separate animations, one of the rectangles ends up catching up to the other one by the end of the animation.. How do I solve this?
Again, I want to move two shapes along a custom path (a track) and both objects / shapes must be separate from each other and at the same distance of separate distance apart throughout the animation.
My code is below:
#import "track.h"
#import <QuartzCore/QuartzCore.h>
#define degreesToRadian(x) (M_PI * x / 180.0)
#define radiansToDegrees(x) (x * 180 / M_PI);
#implementation track
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
//call three methods once class is istantiated
//pass parameters for UIView, width, color, size, points (start, end)
[self drawTrack];
[self animateFirstRunner];
[self animateSecondRunner];
}
- (void) animateFirstRunner
{
//create an animation and give it certain specs
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeBackwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 5;
pathAnimation.repeatCount = 1000;
//create a path for the object or layer to go on
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, 220, 10);
CGPathAddArc(curvedPath, NULL, 100, 100, 90, -M_PI_2, M_PI_2, 1);
CGPathAddArc(curvedPath, NULL, 220, 100, 90, M_PI_2, -M_PI_2, 1);
//set the path then release
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);
//set size of the layer and get the context
UIGraphicsBeginImageContext(CGSizeMake(20,20));
CGContextRef ctx = UIGraphicsGetCurrentContext();
//set line width and fill color
CGContextSetLineWidth(ctx, 1.5);
CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
//add the rectangle to the context (runner)
CGContextAddRect(ctx, CGRectMake(1, 1, 15, 15));
//draw the path
CGContextDrawPath(ctx, kCGPathFillStroke);
UIImage *runner = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *runnerView = [[UIImageView alloc] initWithImage:runner];
//add outline around runner
runnerView.frame = CGRectMake(1, 1, 20, 20);
[self addSubview:runnerView];
[runnerView.layer addAnimation:pathAnimation forKey:#"moveTheSquare"];
}
- (void) animateSecondRunner
{
//create an animation and give it certain specs
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeBackwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.duration = 5;
pathAnimation.repeatCount = 1000;
//create a path for the object or layer to go on
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, 220, 10);
CGPathAddArc(curvedPath, NULL, 100, 100, 90, -M_PI_2, M_PI_2, 1);
CGPathAddArc(curvedPath, NULL, 220, 100, 90, M_PI_2, -M_PI_2, 1);
//set the path then release
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);
//set size of the layer and get the context
UIGraphicsBeginImageContext(CGSizeMake(20,20));
CGContextRef ctx = UIGraphicsGetCurrentContext();
//set line width and fill color
CGContextSetLineWidth(ctx, 1.5);
CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
//add the rectangle to the context (runner)
CGContextAddRect(ctx, CGRectMake(1, 1, 15, 15));
//draw the path
CGContextDrawPath(ctx, kCGPathFillStroke);
UIImage *runner = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *runnerView = [[UIImageView alloc] initWithImage:runner];
//add outline around runner
runnerView.frame = CGRectMake(1, 1, 20, 20);
[self addSubview:runnerView];
[runnerView.layer addAnimation:pathAnimation forKey:#"moveTheSquare"];
}
- (void) drawTrack
{
UIGraphicsBeginImageContext(CGSizeMake(320,460));
CGContextRef currentContext = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(currentContext, 6);
CGContextSetStrokeColorWithColor(currentContext, [UIColor whiteColor].CGColor);
//choost starting point, then add arc (half circle)
//the second parameter of CGContextAddArc is the changes how long the line is (horizontal)
//draw from -PI to PI and the other way around
CGContextMoveToPoint(currentContext, 200, 10);
CGContextAddArc(currentContext, 100, 100, 90, -M_PI_2, M_PI_2, 1);
CGContextAddArc(currentContext, 220, 100, 90, M_PI_2, -M_PI_2, 1);
CGContextClosePath(currentContext);
//draw the path on the context
CGContextDrawPath(currentContext, kCGPathStroke);
//create track
UIImage *track = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//add track to view
UIImageView *trackView = [[UIImageView alloc] initWithImage:track];
trackView.frame = CGRectMake(1, 1, 320, 460);
trackView.backgroundColor = [UIColor clearColor];
[self addSubview:trackView];
}
#end
You should start by parameterising the one function rather than writing two almost identical functions. Then (at the very least) you won't have people scratching their heads, wondering how they differ.
I'm presenting this as an answer rather than just a comment because, in the process of figuring what parameters to pass and how to use them, you'll probably discover all by yourself what you're doing wrong.

adding border color and rounded corner to CGMutableRefPath

I have the following code on my drawRect:
CGMutablePathRef pathRef = CGPathCreateMutable();
CGPathMoveToPoint(pathRef, NULL, 0, 220);
CGPathAddLineToPoint(pathRef, NULL, rect.size.width, 220);
CGPathAddLineToPoint(pathRef, NULL, rect.size.width, rect.size.height);
CGPathAddLineToPoint(pathRef, NULL, 0, rect.size.height);
CGPathCloseSubpath(pathRef);
how do I add a black border to this?
Make sure you have a context:
CGContextRef context = UIGraphicsGetCurrentContext();
and then:
aColor = [UIColor blackColor];
[aColor setStroke];
CGContextSetLineWidth(context, 2.0f);
CGContextAddPath(context, pathRef);
CGContextStrokePath(context);

How to draw the speech bubble as UITextview ContentSize

I draw the speech bubble using UIBezierpath in a UIView class. In the view class contain the UITextView. I am using the following code to used to draw the speech bubble.
//BezierPathView.h
#interface BezierpathView : UIView<UITextViewDelegate>{
CGFloat animatedDistance;
UITextView *LXVolabel;
UIView *view;
UIBezierPath* speechBubbleTopPath;
UIBezierPath* rectanglePath;
UIBezierPath* speechBubbleBottomPath;
UIColor* darkGray;
UIColor* shadow;
CGSize shadowOffset;
CGFloat shadowBlurRadius;
NSString* textContent;
}
#property(nonatomic,strong)UIView *view;
#property(nonatomic,strong)UITextView *LXVolabel;
//BezierPath.m
#implementation BezierpathView
#synthesize LXVolabel,view;
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.LXVolabel = [[UITextView alloc]initWithFrame:CGRectMake(0, 0,self.frame.size.width , self.frame.size.height-10)];
self.LXVolabel.backgroundColor = [UIColor clearColor];
self.LXVolabel.delegate = self;
self.LXVolabel.font = [UIFont systemFontOfSize:20];
[self addSubview:self.LXVolabel];
CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame];
view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, applicationFrame.size.width, applicationFrame.size.height)];
// Color Declarations
darkGray = [UIColor grayColor];
// Shadow Declarations
shadow= [UIColor blackColor];
shadowOffset= CGSizeMake(0, 1);
shadowBlurRadius= 1;
// Abstracted Graphic Attributes
textContent= LXVolabel.text;
}
return self;
}
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
// Drawing code
//// General Declarations
// speechBubbleTop Drawing
speechBubbleTopPath = [UIBezierPath bezierPath];
[speechBubbleTopPath moveToPoint: CGPointMake(294, 7)];
[speechBubbleTopPath addCurveToPoint: CGPointMake(288, -0) controlPoint1: CGPointMake(294, 3.13) controlPoint2: CGPointMake(291.31, -0)];
[speechBubbleTopPath addLineToPoint: CGPointMake(8, -0)];
[speechBubbleTopPath addCurveToPoint: CGPointMake(2, 7) controlPoint1: CGPointMake(4.69, -0) controlPoint2: CGPointMake(2, 3.13)];
[speechBubbleTopPath addLineToPoint: CGPointMake(294, 7)];
[speechBubbleTopPath closePath];
[darkGray setFill];
[speechBubbleTopPath fill];
// Rectangle Drawing
rectanglePath = [UIBezierPath bezierPathWithRect: CGRectMake(2, 6, 292,self.frame.size.height-15)];
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, shadow.CGColor);
[darkGray setFill];
[rectanglePath fill];
CGContextRestoreGState(context);
// Text Drawing
CGRect textRect = CGRectMake(7, 6, 292, self.frame.size.height-15);
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, shadow.CGColor);
[[UIColor whiteColor] setFill];
[textContent drawInRect: textRect withFont: [UIFont fontWithName: #"Helvetica-Light" size: 14] lineBreakMode: NSLineBreakByWordWrapping alignment: NSTextAlignmentLeft];
//CGContextRestoreGState(context);
float addedHeight = 100 -38;
[self drawPath:addedHeight contextValue:context];
//speechBubbleBottom Drawing
speechBubbleBottomPath = [UIBezierPath bezierPath];
[speechBubbleBottomPath moveToPoint: CGPointMake(2, 24+addedHeight)];
[speechBubbleBottomPath addCurveToPoint: CGPointMake(8, 30+addedHeight) controlPoint1: CGPointMake(2, 27.31+addedHeight) controlPoint2: CGPointMake(4.69, 30+addedHeight)];
[speechBubbleBottomPath addLineToPoint: CGPointMake(13, 30+addedHeight)];
[speechBubbleBottomPath addLineToPoint: CGPointMake(8, 42+addedHeight)];
[speechBubbleBottomPath addLineToPoint: CGPointMake(25, 30+addedHeight)];
[speechBubbleBottomPath addLineToPoint: CGPointMake(288, 30+addedHeight)];
[speechBubbleBottomPath addCurveToPoint: CGPointMake(294, 24+addedHeight) controlPoint1: CGPointMake(291.31, 30+addedHeight) controlPoint2: CGPointMake(294, 27.31+addedHeight)];
[speechBubbleBottomPath addLineToPoint: CGPointMake(2, 24+addedHeight)];
[speechBubbleBottomPath closePath];
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, shadow.CGColor);
[darkGray setFill];
[speechBubbleBottomPath fill];
CGContextRestoreGState(context);
}
-(void)textViewDidChange:(UITextView *)textView{
CGRect rect = textView.frame;
rect.size.height = textView.contentSize.height;// Adding.size Since height is not a member of CGRect
self.frame = CGRectMake(10, 20, textView.frame.size.width, textView.contentSize.height+20);
textView.frame = rect;
}
My thought is that when I have entered the text in the text view I want to increase the speech bubble size based on the text of the text view. But my speech bubble size does not increased correctly. How do I solve this issue?
Are you triggering the redraw when the text is changed?
In the textViewDidChange method add...
[self setNeedsDisplay];
... as the last line.
This will trigger the drawRect method again.

TableView oval button for Index/counts

Can someone help me create an index/count button for a UITableView, like this one?
iTunes http://img.skitch.com/20091107-nwyci84114dxg76wshqwgtauwn.preview.jpg
Is there an Apple example, or other tutorial? Thanks, Jordan
Wow... aaa... ok... I've got an easier way:
#import <QuartzCore/QuartzCore.h>
.....
UILabel *label = [[UILabel alloc] initWithFrame:
CGRectMake(cell.contentView.frame.size.width - 50, 0, 35, 35)];
label.layer.cornerRadius = 5;
label.backgroundColor = [UIColor blueColor]; //feel free to be creative
label.clipToBounds = YES;
label.text = #"7"; //Your text here
[cell.contentView addSubview: label];
[label release];
Basically, you're making a UILabel with rounded corners using the QuartzCore framework - don't forget to include it. Extra note: it only works on OS > 3.0.
You need to create a custom view, and then draw the oval and number in manually. Finally, assign that custom view as the accessory view of the cell. Here's the drawing code, using Core Graphics. It's not too tricky:
CGRect bounds = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();
float radius = bounds.size.height / 2.0;
NSString *countString = [NSString stringWithFormat: #"%d", _count];
if (_count < 100) bounds = CGRectMake(5, 0, bounds.size.width - 10, bounds.size.height);
CGContextClearRect(context, bounds);
CGContextSetFillColorWithColor(context, _color.CGColor);
CGContextBeginPath(context);
CGContextAddArc(context, radius + bounds.origin.x, radius, radius, M_PI / 2 , 3 * M_PI / 2, NO);
CGContextAddArc(context, (bounds.size.width + bounds.origin.x) - radius, radius, radius, 3 * M_PI / 2, M_PI / 2, NO);
CGContextClosePath(context);
CGContextFillPath(context);
[[UIColor whiteColor] set];
UIFont *font = [UIFont boldSystemFontOfSize: 14];
CGSize numberSize = [countString sizeWithFont: font];
bounds.origin.x += (bounds.size.width - numberSize.width) / 2;
[countString drawInRect: bounds withFont: font];