I have a couple of UIView classes all drawing the same thing but in different colors and alpha settings. I've tried to pass parameters but cannot figure out how to get the drawRect part where I need to be.
I draw like this:
CGRect positionFrame = CGRectMake(widthCoordinate,heightCoordinate,20.9f,16.5f);
DrawHexBlue *hex = [[DrawHexBlue alloc] initWithFrame:positionFrame];
[self.imageView addSubview:hex];
My DrawHexBlue class is this:
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self)
{
[self setOpaque:YES];
[self setBackgroundColor:[UIColor clearColor]];
}
return self;
}
- (void)drawRect:(CGRect)rect{
UIBezierPath *aPath = [UIBezierPath bezierPath];
[[UIColor whiteColor] setStroke];
[[UIColor blueColor] setFill];
// Set the starting point of the shape.
[aPath moveToPoint:CGPointMake(7, 0)];
// Draw the lines.
[aPath addLineToPoint:CGPointMake(16.2, 0)];
[aPath addLineToPoint:CGPointMake(20.9, 8.7)];
[aPath addLineToPoint:CGPointMake(16.2, 16.5)];
[aPath addLineToPoint:CGPointMake(6.7, 16.5)];
[aPath addLineToPoint:CGPointMake(2.1, 8.7)];
[aPath closePath];
[aPath setLineWidth:1.0f];
[aPath fillWithBlendMode:kCGBlendModeNormal alpha:0.75];
[aPath stroke];
}
I create a new class for every new color I need and new alpha value. Surely there has to be a better way to use one class and just change parameters/values...?
Create a single UIView subclass and add properties:
#interface YourView : UIView
#property (nonatomic, strong) UIColor *strokeColor;
#property (nonatomic, strong) UIColor *fillColor;
#end
Then in drawRect: you can access this property:
- (void)drawRect:(CGRect)rect{
UIBezierPath *aPath = [UIBezierPath bezierPath];
[self.strokeColor setStroke];
[self.fillColor setFill];
And you can set it on the view when you create it:
YourView *hex = [[YourView alloc] initWithFrame:positionFrame];
hex.strokeColor = [UIColor whiteColor];
hex.fillColor = [UIColor blueColor];
Yes.
Use properties.
The view that does the drawing should have these lines of code in its header file:
#property (nonatomic, strong) UIColor *colorToDraw;
- (id)initWithFrame:(CGRect)frame color:(UIColor *)color;
And your init method should look like:
- (id)initWithFrame:(CGRect)frame color:(UIColor *)color
{
self = [super initWithFrame:frame];
if (self)
{
[self setOpaque:YES];
[self setBackgroundColor:[UIColor clearColor]];
self.colorToDraw = color;
}
return self;
}
With a drawRect of:
- (void)drawRect:(CGRect)rect{
UIBezierPath *aPath = [UIBezierPath bezierPath];
[[UIColor whiteColor] setStroke];
[self.colorToDraw setFill];
// Set the starting point of the shape.
[aPath moveToPoint:CGPointMake(7, 0)];
// Draw the lines.
[aPath addLineToPoint:CGPointMake(16.2, 0)];
[aPath addLineToPoint:CGPointMake(20.9, 8.7)];
[aPath addLineToPoint:CGPointMake(16.2, 16.5)];
[aPath addLineToPoint:CGPointMake(6.7, 16.5)];
[aPath addLineToPoint:CGPointMake(2.1, 8.7)];
[aPath closePath];
[aPath setLineWidth:1.0f];
[aPath fillWithBlendMode:kCGBlendModeNormal alpha:0.75];
[aPath stroke];
}
Now, you can draw like this:
CGRect positionFrame = CGRectMake(widthCoordinate,heightCoordinate,20.9f,16.5f);
DrawHexBlue *hex = [[DrawHexBlue alloc] initWithFrame:positionFrame color:[UIColor orangeColor]]; //Or whatever.
[self.imageView addSubview:hex];
You might want to change your subclass's name to something that doesn't imply it draws blue, though.
Make properties to store color and alpha data.
#interface DrawHex : UIView
// ...
#property (nonatomic) CGFloat pathAlpha;
#property (nonatomic, strong) UIColor *strokeColor;
#property (nonatomic, strong) UIColor *fillColor;
#end
Set some default values for them in your init method of this class, for example:
self.fillColor = [UIColor blueColor];
self.strokeColor = [UIColor whiteColor];
self.pathAlpha = 0.75;
Then in drawRect use properties instead of hard-coded values:
[self.strokeColor setStroke];
[self.fillColor setFill];
//...
[aPath fillWithBlendMode:kCGBlendModeNormal alpha:self.pathAlpha];
Then in your view controller you can change them:
DrawHex *hex = [[DrawHex alloc] initWithFrame:positionFrame];
hex.fillColor = [UIColor redColor];
// you get the idea
Related
im learning CoreGraphic and want to make a simple game, but stuck on drawing thing with bezier path, i wanted to draw a triangle inside a subview, but it always come out wrong, i want it to fit 1/4 of the square view
My code:
UIBezierPath* trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(0, 0)];
[trianglePath addLineToPoint:CGPointMake(self.mainView.frame.size.width/2, self.mainView.frame.size.height/2)];
[trianglePath addLineToPoint:CGPointMake(self.mainView.frame.size.width, 0)];
[trianglePath closePath];
CAShapeLayer *triangleMaskLayer = [CAShapeLayer layer];
[triangleMaskLayer setPath:trianglePath.CGPath];
UIView *firstView = [[UIView alloc] initWithFrame:CGRectMake(0,0, self.mainView.frame.size.width, self.mainView.frame.size.height)];
firstView.backgroundColor = [UIColor colorWithWhite:.75 alpha:1];
firstView.layer.mask = triangleMaskLayer;
[self.mainView addSubview:firstView];
It look like this:
If the dimensions are incorrect, you probably are creating the triangle before AutoLayout has done its job.
To ensure your self.mainView has the correct size, create your triangle in your controller viewDidLayoutSubviews method.
Also mind that viewDidLayoutSubviews may be called multiple times.
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (void) viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
if (self.mainView.subviews.count == 0) {
UIBezierPath* trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(0, 0)];
[trianglePath addLineToPoint:CGPointMake(self.mainView.frame.size.width/2, self.mainView.frame.size.height/2)];
[trianglePath addLineToPoint:CGPointMake(self.mainView.frame.size.width, 0)];
[trianglePath closePath];
CAShapeLayer *triangleMaskLayer = [CAShapeLayer layer];
[triangleMaskLayer setPath:trianglePath.CGPath];
UIView *firstView = [[UIView alloc] initWithFrame:CGRectMake(0,0, self.mainView.frame.size.width, self.mainView.frame.size.height)];
firstView.backgroundColor = [UIColor colorWithWhite:.75 alpha:1];
firstView.layer.mask = triangleMaskLayer;
[self.mainView addSubview:firstView];
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#end
Inside my FirstView, I put a second view which I wanted to use for drawn content. The drawing works fine, but the problem is that the background of that second view is black. I tried to set the background color of the view to clear color using:
[self setBackgroundColor:[UIColor clearColor]];
but it's still black.
#import "CustomView.h"
#interface CustomView ()
#end
#implementation CustomView
-(void)drawRect:(CGRect)rect
{
UIBezierPath *aPath = [UIBezierPath bezierPath];
aPath.lineWidth = 15;
//set the stoke color
[[UIColor greenColor] setStroke];
// Set the starting point of the shape.
[aPath moveToPoint:CGPointMake(100.0, 0.0)];
// Draw the lines.
[aPath addLineToPoint:CGPointMake(200.0, 40.0)];
[aPath addLineToPoint:CGPointMake(160, 140)];
[aPath addLineToPoint:CGPointMake(40.0, 140)];
[aPath addLineToPoint:CGPointMake(0.0, 40.0)];
[aPath closePath];
//draw the path
[aPath stroke];
}
#end
are you setting both views to [UIColor clearColor]? I think you need to based upon this: iphone: make view transparent but subviews non transparent
I have a UIView that contains some subviews - drawn using UIBezierPath. Every subview contains a scrollview having image as mask. When I try to render image of whole view (overall), instead of making image from path, it draws image of individual rect of subviews. Let me make it clear by figure:
Original View:
What I am getting after rendering Image:
I don't know what am I missing. Please guide me. Thanks.
Code:
IrregularSquare
#interface IrregularSquare : UIView
{
UIScrollView *imageResizer;
CAShapeLayer *maskLayer;
}
#end
#implementation IrregularSquare
- (id)initWithFrame:(CGRect)frame index:(NSInteger) index
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
self.backgroundColor = [UIColor clearColor];
self.layer.backgroundColor = [UIColor clearColor].CGColor;
}
return self;
}
-(void) drawRect:(CGRect)rect
{
UIBezierPath *aPath = [UIBezierPath bezierPath];
[aPath moveToPoint:CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect))];
[aPath addLineToPoint:CGPointMake(CGRectGetMaxX(rect), CGRectGetMinY(rect))];
[aPath addLineToPoint:CGPointMake(CGRectGetMaxX(rect) - 20, CGRectGetMidY(rect) - 10)];
[aPath addLineToPoint:CGPointMake(CGRectGetMaxX(rect) - 5, CGRectGetMaxY(rect) - 10)];
[aPath addLineToPoint:CGPointMake(CGRectGetMidX(rect) + 10, CGRectGetMaxY(rect))];
[aPath addLineToPoint:CGPointMake(CGRectGetMidX(rect) - 20, CGRectGetMaxY(rect) - 20)];
[aPath addLineToPoint:CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect) - 20)];
[aPath closePath];
aPath.lineWidth = 2;
[[UIColor whiteColor] setStroke];
[aPath stroke];
[self initializeImageWithPath]; //this method adds scrollview to main view and assigns an image to scrollview with mask
}
-(void) initializeImageWithPath
{
CGRect aFrame = somevalue;
self.backImage = [[UIImageView alloc] initWithFrame:aFrame];
self.backImage.contentMode = UIViewContentModeScaleAspectFill;
self.backImage.clipsToBounds = YES;
imageResizer = [[UIScrollView alloc] initWithFrame:self.bounds];
imageResizer.showsHorizontalScrollIndicator = imageResizer.showsVerticalScrollIndicator = NO;
imageResizer.scrollEnabled = YES;
imageResizer.backgroundColor = [UIColor clearColor];
imageResizer.zoomScale = 1.0;
imageResizer.delegate = self;
imageResizer.clipsToBounds = YES;
[imageResizer addSubview:self.backImage];
[self addSubview: imageResizer];
maskLayer = [CAShapeLayer layer];
maskLayer.path = [aPath CGPath];
self.layer.mask = maskLayer;
}
IrregularShapesContainer.m
#implementation IrregularShapesContainer
-(void) drawSubviews
{
for(UIView *aView in self.subviews)
[aView removeFromSuperview];
IrregularSquare *sq1 = [[IrregularSquare alloc] initWithFrame:CGRectMake(HORIPADDING, VERTICALPADDING, (self.frame.size.width - (HORIPADDING * 2) - (SPACING * 2)) * .5, (self.frame.size.height - (VERTICALPADDING) - SPACING) * .5) index:1];
[self addSubview:sq1];
[sq1.layer display];
[self randomlyPlaceImage:sq1];
sq1.irrViewDelegate = self;
//many similar instances are added in following code
}
#end
I hope my Question is clear.. Any help is appreciated.
I am trying to create a triangle using UIBezierPath in a category of UIView. but the triangle is not being shown. also getting an : CGContextSetFillColorWithColor. So my question is how to make triangle or any path using a category of UIView. Demo Project
#import "UIView+Bubble.h"
#import <QuartzCore/QuartzCore.h>
#implementation UIView (Bubble)
+(UIView *)makeBubble{
UIView *customView = [[UIView alloc] init];
customView.frame=CGRectMake(0, 0, 320, 500);
UIBezierPath *triangle = [UIBezierPath bezierPath];
[triangle moveToPoint:CGPointMake(100, 0)];
[triangle addLineToPoint:CGPointMake(0, 100)];
[triangle addLineToPoint:CGPointMake(200, 100)];
[triangle closePath];
[[UIColor blackColor] setFill];
[triangle fill];
customView.layer.shadowPath = [triangle CGPath];
return customView;
}
#end
In ViewController.m using it like:-
- (void)viewDidLoad
{
UIView *helpBubble=[UIView makeBubble];
[self.view addSubview:helpBubble];
}
In your UIView+Bubble.h category UIBezierPath tries to draw triangle on a null context. If you want to draw shape using UIBezierPath like above, you have to put this code inside drawRectmethod of a View class.
On the other hand, you could create a new context to draw. You may modify your makeBubble method as follow:
+(UIView *)makeBubble{
// declare UIimageView, not UIView
UIImageView *customView = [[UIImageView alloc] init];
customView.frame=CGRectMake(0, 0, 320, 500);
// create a new contex to draw
UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 200), NO, 0);
UIBezierPath *triangle = [UIBezierPath bezierPath];
[triangle moveToPoint:CGPointMake(100, 0)];
[triangle addLineToPoint:CGPointMake(0, 100)];
[triangle addLineToPoint:CGPointMake(200, 100)];
[triangle closePath];
[[UIColor blackColor] setFill];
[triangle fill];
customView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return customView;
}
EDIT:
to make it dynamic you could pass a cgRect argument, like
+(UIView *)makeBubble:(CGRect)rect
also change to customView.frame=rect; and UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0); inside this method. And call makeBubble:(CGRect)rect method as
UIView *helpBubble=[UIView makeBubble:/*your desire rect*/];
P.S. it will be great if you calculate the points depending on the rect too.
I have to draw a black line on a transparent UIView, but despite having set the alpha of the line equal to 1, however this takes the degree of transparency of UIView. how can I do?
#import <UIKit/UIKit.h>
#interface FinalAlgView : UIView{
#private
//....
CGFloat lineWidth;
UIColor *lineColor;
UIImage *curImage;
CGMutablePathRef path;
}
#property (nonatomic, retain) UIColor *lineColor;
#property (readwrite) CGFloat lineWidth;
#property (assign, nonatomic) BOOL empty;
in implementation
#define DEFAULT_COLOR [UIColor colorWithRed:127.0/255.0 green:255.0/255.0 blue:0/255.0 alpha:0.6];
#define DEFAULT_WIDTH 20.0f
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.frame = CGRectMake(0, 0, 1024, 768);
self.lineWidth = DEFAULT_WIDTH;
self.lineColor = DEFAULT_COLOR;
self.empty = YES;
path = CGPathCreateMutable();
self.alpha=0.3;
self.opaque = NO;
}
return self;
}
- (void)drawRect:(CGRect)rect {
[[UIColor grayColor] set];
UIRectFill(rect);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddPath(context, path);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
CGContextStrokePath(context);
self.empty = NO;
}
you have to put the setting the alpha of UIView in drawRect and not in initWithFrame
NO
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.alpha=0.3;
}
return self;
}
YES
- (void)drawRect:(CGRect)rect {
[[UIColor colorWithRed:200.0/225.0 green:200.0/255.0 blue:200.0/255.0 alpha:0.0]set];
}