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.
Related
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
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)];
I am trying to draw an image like below with libraries in iOS; but i couldn't.
I think it is very easy to draw but i couldn't achieve.
After i accomplish to draw i will place a label over it.
Use this as your drawRect method:
- (void)drawRect:(CGRect)rect
//// General Declarations
CGContextRef context = UIGraphicsGetCurrentContext();
//// Shadow Declarations
UIColor* shadow = [UIColor blackColor];
CGSize shadowOffset = CGSizeMake(1, 1);
CGFloat shadowBlurRadius = 2;
//// Frames
CGRect frame = rect;
//// Abstracted Graphic Attributes
CGRect shadowBoxRect = CGRectMake(CGRectGetMinX(frame) + 0, CGRectGetMinY(frame) + 0, 40, 40);
CGFloat shadowBoxCornerRadius = 4;
//// ShadowBox Drawing
UIBezierPath* shadowBoxPath = [UIBezierPath bezierPathWithRoundedRect: shadowBoxRect cornerRadius: shadowBoxCornerRadius];
[[UIColor lightGrayColor] setFill];
[shadowBoxPath fill];
////// ShadowBox Inner Shadow
CGRect shadowBoxBorderRect = CGRectInset([shadowBoxPath bounds], -shadowBlurRadius, -shadowBlurRadius);
shadowBoxBorderRect = CGRectOffset(shadowBoxBorderRect, -shadowOffset.width, -shadowOffset.height);
shadowBoxBorderRect = CGRectInset(CGRectUnion(shadowBoxBorderRect, [shadowBoxPath bounds]), -1, -1);
UIBezierPath* shadowBoxNegativePath = [UIBezierPath bezierPathWithRect: shadowBoxBorderRect];
[shadowBoxNegativePath appendPath: shadowBoxPath];
shadowBoxNegativePath.usesEvenOddFillRule = YES;
CGContextSaveGState(context);
{
CGFloat xOffset = shadowOffset.width + round(shadowBoxBorderRect.size.width);
CGFloat yOffset = shadowOffset.height;
CGContextSetShadowWithColor(context,
CGSizeMake(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset)),
shadowBlurRadius,
shadow.CGColor);
[shadowBoxPath addClip];
CGAffineTransform transform = CGAffineTransformMakeTranslation(-round(shadowBoxBorderRect.size.width), 0);
[shadowBoxNegativePath applyTransform: transform];
[[UIColor grayColor] setFill];
[shadowBoxNegativePath fill];
}
CGContextRestoreGState(context);
}
Inner shadows are hard to do with CoreGraphics -- basically, you need to negate your path and draw a drop shadow below it, clipped to your original path.
You can take a look at PaintCode and it will show you the code. It has a 15-min demo mode if you don't want to purchase it, that should be enough for your needs.
You could try this:
#import <QuartzCore/QuartzCore.h>
and in your code , after making the your view set these:
self.layer.cornerRadius = x;
self.layer.masksToBounds = TRUE;
This allows you to have rounded corners on your view. And if you calculate the radius to match your view , you should get the desired look.
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor grayColor];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context =UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
// And draw with a blue fill color
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
// Draw them with a 2.0 stroke width so they are a bit more visible.
CGContextSetLineWidth(context, 2.0);
CGContextAddRect(context, self.bounds);
CGContextStrokePath(context);
// Close the path
CGContextClosePath(context);
// Fill & stroke the path
CGContextDrawPath(context, kCGPathFillStroke);
self.layer.cornerRadius = self.bounds.size.width/12;
self.layer.masksToBounds = TRUE;
}
I think it will be helpful to you.
Try the below code where myView is the UIView to which you want to set the shadow.
myView.layer.cornerRadius = 5.0f;
myView.layer.masksToBounds = YES;
[myView.layer setShadowColor:[[UIColor blackColor] colorWithAlphaComponent: 0.5]];
[myView.layer setShadowOffset:CGSizeMake(0, -1)];
Hope this helps.-
I have been trying desperately to draw some images into a view. The view should be inside a scrollview. For that I subclassed UIScrollview and override the drawRect method in it. And added this as my UIView's subview.
#interface DrawAnotherViewClass : UIScrollView<UIScrollViewDelegate> {
}
#end
#implementation DrawAnotherViewClass
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
CGRect fullScreenRect=[[UIScreen mainScreen] applicationFrame];
self.frame = fullScreenRect;
self.contentSize = CGSizeMake(600, 600);
self.showsHorizontalScrollIndicator = YES;
self.showsVerticalScrollIndicator = NO;
self.pagingEnabled = YES;
}
return self;
}
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextMoveToPoint(context, 10.0f, 50.0f);
CGContextAddLineToPoint(context, 10.0f, 200.0f);
CGContextStrokePath(context);
CGContextMoveToPoint(context, 8.0f, 77.0f);
CGContextAddLineToPoint(context, 300.0f, 77.0f);
CGContextStrokePath(context);
CGContextSetRGBFillColor(context, 0, 0, 255, 0.1);
CGContextSetRGBStrokeColor(context, 0, 0, 255, 1);
CGContextStrokeEllipseInRect(context, CGRectMake(65.0, 33.5, 25, 25));
UIImage *image1 = [UIImage imageNamed:#"PinDown1.png"];
UIImage *image2 = [UIImage imageNamed:#"pinGreen_v1.png"];
CGPoint drawPoint = CGPointMake(0.0f, 10.0f);
[image2 drawAtPoint:drawPoint];
for(int i =1; i<20; i++){
CGPoint drawPointOne = CGPointMake(40.0f * i, 40.0f);
[image1 drawAtPoint:drawPointOne];
}
}
Am I missing something here. Is this the right way to go.
If the view that should perform the drawing resides in that UIScrollView, you have to put the - (void)drawRect:(CGRect)rect method into that view's class method and not into the UIScrollView subclass.
I have a UITableViewCell with a UIImage that I'm drawing. As I scroll, I get a ton of sublayers getting added which makes performance really jerky. How can I make sure my CALayer only gets added once?
- (void) drawContentView:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor whiteColor] set];
CGContextFillRect(context, rect);
NSString* caption = [NSString stringWithFormat:#"%#",[info objectForKey:#"caption"]];
NSString* text = [info stringForKey:#"text"];
CGFloat widthr = self.frame.size.width - 70;
[[UIColor grayColor] set];
[text drawInRect:CGRectMake(63.0, 25.0, widthr, 20.0) withFont:system14 lineBreakMode:UILineBreakModeTailTruncation];
if (self.image) {
UIImage *imageToDisplay;
imageToDisplay = self.image;
imageToDisplay = [self imageWithImage:imageToDisplay scaledToSize:CGSizeMake(imageToDisplay.size.width / 1.5, imageToDisplay.size.height / 1.5)];
CGFloat width;
CGFloat height;
CGRect r;
if (imageToDisplay.size.width < 310 && imageToDisplay.size.height > 290) {
imageToDisplay = [self imageByCropping:imageToDisplay toRect:CGRectMake(0, 20, imageToDisplay.size.width, 270)];
}
else if (imageToDisplay.size.width > 310 && imageToDisplay.size.height < 20) {
imageToDisplay = [self imageByCropping:imageToDisplay toRect:CGRectMake(30, 0, 290, imageToDisplay.size.height)];
}
else {
if (![caption isEqualToString:#""]) {
imageToDisplay = [self imageByCropping:imageToDisplay toRect:CGRectMake(30, 0, 290, 230)];
}
else {
imageToDisplay = [self imageByCropping:imageToDisplay toRect:CGRectMake(30, 0, 290, 270)];
}
}
width = imageToDisplay.size.width;
height = imageToDisplay.size.height;
r = CGRectMake(5.0, 5.0, width, height);
//[imageToDisplay drawInRect:r];
CALayer *sublayer = [CALayer layer];
sublayer.contents = (id)imageToDisplay.CGImage;
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(5.0, 5.0, imageToDisplay.size.width, imageToDisplay.size.height);
[self.layer addSublayer:sublayer];
//Experimental shadow stuff with images
/*CALayer *layer = [CALayer layer];
layer = [CALayer layer];
layer.bounds = CGRectMake(5.0, 5.0, imageToDisplay.size.width, imageToDisplay.size.height);
layer.position = CGPointMake(150, 140);
layer.contents = (id)imageToDisplay.CGImage;
layer.shadowOffset = CGSizeMake(0, 2);
layer.shadowOpacity = 0.70;
[self.layer addSublayer:layer];
[self bezierPathWithCurvedShadowForRect:layer.bounds];*/
[[UIColor blackColor] set];
[caption drawInRect:CGRectMake(10.0, height + 20 , widthr, 20.0) withFont:system14 lineBreakMode:UILineBreakModeWordWrap alignment:UITextAlignmentCenter];
}
}
drawContentView: is not the right method from which to call addSublayer:. You should add that layer at the point when you construct your object with an image, or when you set an image on an existing object. Alternatively, you can draw the image yourself in the drawContentView:, but it is probably not going to be as fast.