I draw a wave layer by override drawInContext:(CGContextRef)ctx method,since the wave line is sine-wave ,so I cut it into segments by calculate wave value and join them into CGMutablePathRef
Here is what I have done in -(void)drawInContext:(CGContextRef)ctx
//join style
CGContextSetLineJoin(ctx, kCGLineJoinRound);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetAllowsAntialiasing(ctx, true);
CGContextSetShouldAntialias(ctx, true);
CGContextSetFillColorWithColor(ctx, [UIColor themeColor].CGColor);
CGContextSetStrokeColorWithColor(ctx, [UIColor themeColor].CGColor);
CGContextSaveGState(ctx);
CGMutablePathRef mutablePath = CGPathCreateMutable();
CGPathMoveToPoint(mutablePath, NULL, 0, 0);
CGPathAddLineToPoint(mutablePath, NULL, 0, [self getSinPoint:0 WaveHeight:self.waveHeight]);
//Calculate the Sin funciton value to draw lines and join them into path
for (float i = 0; i <= self.bounds.size.width; i+= 1) {
NSInteger pointY = [self getSinPoint:i WaveHeight:self.waveHeight];
CGPathAddLineToPoint(mutablePath, NULL, i, pointY);
}
CGPathAddLineToPoint(mutablePath, NULL, self.bounds.size.width, 0);
CGPathCloseSubpath(mutablePath);
[[UIColor themeColor]set];
CGContextAddPath(ctx, mutablePath);
CGContextFillPath(ctx);
CGContextRestoreGState(ctx);
One solution is using BezierPath to draw the wave,
1.cut the line into segment such as 20
2.if current line index is event, get the control point below the center of the current segment
3.if current line index is odd,then get the control point up the center of the line
...
for (NSInteger i = 0; i <= self.waveCount; i++) {
CGPoint beginPoint = CGPointMake(i * self.waveWidth, pointY);
CGPoint endPoint = CGPointMake((i + 1) * self.waveWidth, pointY);
if (i%2 == 0) {
CGPoint controlPoint = [self getCenterControlPointUp:beginPoint End:endPoint];
CGPathAddQuadCurveToPoint(mutablePath, NULL, controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
}else{
CGPoint controlPoint = [self getCenterControlPointDown:beginPoint End:endPoint];
CGPathAddQuadCurveToPoint(mutablePath, NULL, controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
}
}
...
method to get the control point of a segment line
//Below
-(CGPoint)getCenterControlPointDown:(CGPoint)begin End:(CGPoint)end{
return CGPointMake((begin.x + end.x)/2, (begin.y + end.y)/2 + self.waveHeight * 2);
}
//Above
-(CGPoint)getCenterControlPointUp:(CGPoint)begin End:(CGPoint)end{
return CGPointMake((begin.x + end.x)/2, (begin.y + end.y)/2 - self.waveHeight * 2);
}
Related
In this code I use CGContextRef to create next picture on my UIView:
CGMutablePathRef arc = CGPathCreateMutable();
CGFloat lineWidth = 16.0;
CGContextRef cont = UIGraphicsGetCurrentContext();
CGContextFlush(cont);
CGContextSetStrokeColorWithColor(cont, [UIColor grayColor].CGColor);
CGContextSetFillColorWithColor(cont, [UIColor clearColor].CGColor);
for (int i = 0; i < 16; i++) {
CGPathAddArc(arc, NULL, cenPoint.x, cenPoint.y, halfWidthInc(-8.0f), DEG_TO_RAD(_deg1*i), DEG_TO_RAD(_deg1*(i+1)), NO);
CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, lineWidth, kCGLineCapButt, kCGLineJoinMiter, 10);
CGContextAddPath(cont, strokedArc);
}
for (int i = 0; i < 8; i++) {
arc = CGPathCreateMutable();
CGPathAddArc(arc, NULL, cenPoint.x, cenPoint.y, halfWidthInc(-24.0f), DEG_TO_RAD(_deg2*i), DEG_TO_RAD(_deg2*(i+1)), NO);
CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, lineWidth, kCGLineCapButt, kCGLineJoinMiter, 10);
CGContextAddPath(cont, strokedArc);
}
for (int i = 0; i < 4; i++) {
arc = CGPathCreateMutable();
CGPathAddArc(arc, NULL, cenPoint.x, cenPoint.y, halfWidthInc(-40.0f), DEG_TO_RAD(_deg3*i), DEG_TO_RAD(_deg3*(i+1)), NO);
CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, lineWidth, kCGLineCapButt, kCGLineJoinMiter, 10);
CGContextAddPath(cont, strokedArc);
}
for (int i = 0; i < 2; i++) {
arc = CGPathCreateMutable();
CGPathAddArc(arc, NULL, cenPoint.x, cenPoint.y, halfWidthInc(-56.0f), DEG_TO_RAD(_deg4*i), DEG_TO_RAD(_deg4*(i+1)), NO);
CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, lineWidth, kCGLineCapButt, kCGLineJoinMiter, 10);
CGContextAddPath(cont, strokedArc);
}
CGContextDrawPath(cont, kCGPathFillStroke);
But I want to transform in with CATransform3D. For it I must draw this context in sublayer of my UIView (because I want to draw more sublayers on it UIView).
How can I draw this CGContextRef path in separate sublayer of UIView?
I fix it with next construction:
CGPathRef *board = CGContextCopyPath(cont);
_indi1 = [CAShapeLayer layer];
_indi1.frame = self.layer.bounds;
_indi1.bounds = CGRectInset(pathCont, 0, 0);
_indi1.geometryFlipped = YES;
_indi1.path = board;
_indi1.strokeColor = [[UIColor colorWithRed:125.0f/255.0f green:251.0f/255.0f blue:181.0f/255.0f alpha:1] CGColor];
_indi1.fillColor = nil;
_indi1.lineWidth = 1.0f;
_indi1.fillRule = kCAFillRuleEvenOdd;
_indi1.lineJoin = kCALineJoinRound;
[self.layer insertSublayer:_indi1 atIndex:0];
_indi1 - property of superclass with CAShapeLayer type.
It's works, but result looks without smoothing (with raw pixilation).
Like this:
How can i fix it and make picture more smooth?
P.S.: this problem popup when i try to convert CGContext to CAShapeLayer. In first example, when I make it with CGContext this problem has not been. (You can look it in first example on top post)
First of all, i've looked for and found this:
Cut transparent hole in UIView
Putting multiple transparent rectangles on my view, but now I need these rectangles to be rounded, like this:
http://postimg.org/image/ozxr0m5sh/
So I mixed some codes I found and did that, but for some reason it only works for the first rectangle, here is the full code for the custom view:
(if you take off the method "addRoundedRect..." call, it works for all the rects).
- (void)drawRect:(CGRect)rect{
[backgroundColor setFill];
UIRectFill(rect);
// clear the background in the given rectangles
for (NSValue *holeRectValue in rectsArray) {
CGRect holeRect = [holeRectValue CGRectValue];
CGRect holeRectIntersection = CGRectIntersection( holeRect, rect );
CGContextRef context = UIGraphicsGetCurrentContext();
if( CGRectIntersectsRect( holeRectIntersection, rect ) )
{
addRoundedRectToPath(context, holeRectIntersection, 6, 6);
CGContextClosePath(context);
CGContextClip(context);
CGContextClearRect(context, holeRectIntersection);
CGContextSetFillColorWithColor( context, [UIColor clearColor].CGColor );
CGContextFillRect( context, holeRectIntersection);
}
}
static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight){
float fw, fh;
if (ovalWidth == 0 || ovalHeight == 0) {
CGContextAddRect(context, rect);
return;
}
CGContextSaveGState(context);
CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
CGContextScaleCTM (context, ovalWidth, ovalHeight);
fw = CGRectGetWidth (rect) / ovalWidth;
fh = CGRectGetHeight (rect) / ovalHeight;
CGContextMoveToPoint(context, fw, fh/2);
CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);
CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);
CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);
CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1);
CGContextClosePath(context);
CGContextRestoreGState(context);
}
In iOS it's generally better not to use drawRect. It tends to be slower than other methods of rendering your content.
I don't know the specific answer to your question about why you can't punch multiple round-edged holes in your view, but I would suggest a different approach. than mucking around with CGContexts in your drawRect method.
Set up your view with whatever content you need. Then create a CAShapeLayer the same size as your view and fill it with a path (shape layers want a CGPath, but you can create a UIBezierPath and get a CGPath from that.) Attach the shape layer as the mask of your view's layer. (The shape you put in your mask layer defines the opaque parts of your view, though, so you have to create a shape that fills the mask and then punch holes in it with other shapes.
here I had a crack. UserInteraction must be turned off on this view in order to pass touch events through, so don't add any subviews here unless you want them to ignore touch as well..
interface:
#import "AslottedView.h"
//header is empty but for #import <UIKit/UIKit.h>
//this is a subclass on UIView
#interface AslottedView ()
//helper function, nb resultantPath will rerquire releasing(create in func name)
CGMutablePathRef CGPathCreateRoundedRect(CGRect rect, CGFloat cornerRadius);
#end
implementation:
#implementation AslottedView
{
CGRect slots[4];
}
CGMutablePathRef CGPathCreateRoundedRect(CGRect rect, CGFloat cornerRadius){
CGMutablePathRef result = CGPathCreateMutable();
CGPathMoveToPoint(result, nil, CGRectGetMinX(rect)+cornerRadius, (CGRectGetMinY(rect)) );
CGPathAddArc(result, nil, (CGRectGetMinX(rect)+cornerRadius), (CGRectGetMinY(rect)+cornerRadius), cornerRadius, M_PI*1.5, M_PI*1.0, 1);//topLeft
CGPathAddArc(result, nil, (CGRectGetMinX(rect)+cornerRadius), (CGRectGetMaxY(rect)-cornerRadius), cornerRadius, M_PI*1.0, M_PI*0.5, 1);//bottomLeft
CGPathAddArc(result, nil, (CGRectGetMaxX(rect)-cornerRadius), (CGRectGetMaxY(rect)-cornerRadius), cornerRadius, M_PI*0.5, 0.0, 1);//bottomRight
CGPathAddArc(result, nil, (CGRectGetMaxX(rect)-cornerRadius), (CGRectGetMinY(rect)+cornerRadius), cornerRadius, 0.0, M_PI*1.5, 1);//topRight
CGPathCloseSubpath(result);
return result;
}
CGColorRef fillColor(){
return [UIColor whiteColor].CGColor;
//or whatever..
}
-(instancetype )initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
self.userInteractionEnabled = NO;
self.backgroundColor = [UIColor clearColor];
//quick loop to make some rects
CGRect rct = CGRectMake(10.0, 10.0, 40.0, 40.0);
CGFloat margin = 30.0;
for (NSInteger i = 0; i < 4; i ++) {
slots[i] = CGRectOffset(rct, ((rct.size.width+margin) * ((i%2==0)? 1.0 : 0.0)) , ((rct.size.height+margin) * ((i>1)? 1.0:0.0) )) ;
}
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(ctx, fillColor() );
CGContextAddRect(ctx, self.bounds);
for (NSInteger i = 0; i < 4; i ++) {
CGMutablePathRef roundRect = CGPathCreateRoundedRect(slots[i], 5.0);
CGContextAddPath(ctx, roundRect);
CGPathRelease(roundRect);
}
CGContextEOFillPath(ctx);
}
#end
i want to make the border of a UIView to be like a wave and i just can't get it out how.
I have tried just to draw a wave line with a code found here, but it just don't work
CGRect rect = CGRectMake(100, 100, 500, 500);
self.heightCrest = 30;
float w = 0; // starting position
float y = rect.size.height;
float width = rect.size.width;
int cycles = 7;//number of waves
self.x = width/cycles;
CGContextRef context = UIGraphicsGetCurrentContext();
CGMutablePathRef path = CGPathCreateMutable();
while (w<width) {
CGPathMoveToPoint(path, NULL, w,y/2);
CGPathAddQuadCurveToPoint(path, NULL, w+self.x/4, y/2 - self.heightCrest, w+self.x/2, y/2);
CGPathAddQuadCurveToPoint(path, NULL, w+3*self.x/4, y/2 + self.heightCrest, w+self.x, y/2);
w+=self.x;
}
CGContextAddPath(context, path);
CGContextDrawPath(context, kCGPathStroke);
try like this:
- (void)addHorizontalDownwardCurveToPath:(UIBezierPath *)path toPoint:(CGPoint)point withAmplitude:(CGFloat)amplitude {
CGFloat middle = (point.x + path.currentPoint.x) / 2;
[path addQuadCurveToPoint:point
controlPoint:CGPointMake(middle, point.y + amplitude)];
}
I am drawing the curve and line by giving 11 points.Is it possible to detect the point of intersection of two lines (or) two curves (or) one line and one curve.
I am drawing line using
CGMutablePathRef path = CGPathCreateMutable();
for (int i = 0; i < [_points count]; i++)
{
CGPoint pt = [[_points objectAtIndex:i] CGPointValue];
if (i == 0)
{
CGPathMoveToPoint(path, NULL, pt.x+1, pt.y+1);
}
else
{
CGPathAddLineToPoint(path, NULL, pt.x+1, pt.y+1);
}
}
CGContextSetLineWidth(context, 1.0f);
CGContextSetStrokeColorWithColor(context, curveColor.CGColor);
CGContextAddPath(context, path);
CGContextStrokePath(context);
CGPathRelease(path);
Curve Draw
CGMutablePathRef path = CGPathCreateMutable();
for (int i = 0; i < [_points count]; i++)
{
CGPoint pt = [[_points objectAtIndex:i] CGPointValue];
NSLog(#"%#",NSStringFromCGPoint(pt));
if (i == 0)
{
CGPathMoveToPoint(path, NULL, pt.x, pt.y);
}
else
{
CGPoint curP = [[_points objectAtIndex:i-1] CGPointValue];
float delta = 1.0f;
for (float pointX = curP.x; fabs(pointX - pt.x) > 1e-5f; pointX += delta)
{
float pointY = func(i-1, pointX);
CGPathAddLineToPoint(path, NULL, pointX, pointY);
}
}
CGContextSetLineWidth(context, 1.0f);
CGContextSetStrokeColorWithColor(context, curveColor.CGColor);
CGContextAddPath(context, path);
CGContextStrokePath(context);
CGPathRelease(path);
By using these codes how to find the intersection points.
To find the intersection point of two lines, see this answer.
To intersect a line and a curve - well your curve is just a set of lines, so the line intersects the set of lines if the line intersects any one of the lines in the set.
To intersect a curve and a curve - check each line in one curve against each line in the other.
And there are various ways to optimize like colliding the bounding rectangles of the curves or lines first.
I draw a table "by hand", by using primitives of Core Graphics.
The view is re-draw when I click a button.
The problem is that when I profile the code in Instruments, the VM Regions keep increase, while Heap and Anonymous VM oscillate (and I would expect it).
And the details about CoreAnimation:
An excerpt of my drawRect:
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect paperRect = CGRectMake(self.bounds.origin.x+hourLabelSize+self.marginX,
10 +self.cellBorder ,
self.bounds.size.width,
self.cellHeight * 48
);
// custom shadow
drawLinearGradient(context, paperRect, whiteColor.CGColor, lightGrayColor.CGColor);
CGContextSaveGState(context);
CGFloat outerMargin = 5.0f;
CGFloat eventSize;
// Draw table
CGRect hourRect;
CGRect outerRect;
CGMutablePathRef outerPath;
CGRect strokeRect;
CGRect rowRect;
for (int j=0; j < 7;j++)
{
for (int i=0; i < numberOfRows; i++)
{
// Odd index means we are in the half of an hour
if ( (i%2) == 0)
{
[hour setString:[NSString stringWithFormat:#"%d:00",(int)floor(i/2)]];
// Draw box around hours //
if (j == 0 && i >0)
{
CGContextSaveGState(context);
hourRect = CGRectMake(5, i*cellHeight-5, hourLabelSize, 28);
outerRect = CGRectInset(hourRect, outerMargin, outerMargin);
outerPath = newRoundedRectForRect(outerRect, 6.0);
CGContextAddPath(context, outerPath);
CFRelease(outerPath); // <--- This solve the leak!!
// Draw gradient
strokeRect = CGRectInset(hourRect, 5.0, 5.0);
CGContextSetStrokeColorWithColor(context, boxColor.CGColor);
CGContextSetLineWidth(context, 1.0);
CGContextStrokeRect(context, strokeRect);
drawLinearGradient(context, strokeRect, whiteColor.CGColor, lightGrayColor.CGColor);
CGContextRestoreGState(context);
}
}
else
{
[hour setString:[NSString stringWithFormat:#"%d:30",(int)floor(i/2)]];
}
// Draw hours
if (j == 0 && i > 0)
[hour drawInRect:CGRectMake(0, i*cellHeight, hourLabelSize+10, 26) withFont:font lineBreakMode:NSLineBreakByClipping alignment:NSTextAlignmentCenter];
// Draw row
CGContextBeginPath(context);
CGContextSetStrokeColorWithColor(context, boxColor.CGColor);
CGContextSetLineWidth(context, self.cellBorder);
rowRect = CGRectMake(j*cellWidth + hourLabelSize +self. marginX - self.cellBorder/2, i*cellHeight+10 + self.cellBorder / 2, cellWidth , cellHeight);
CGContextStrokeRect(context, rowRect);
} //
CGContextFlush(context);
CGContextRestoreGState(context);
The first thing I do not understand is why I see VM:CoreAnimation. CoreGraphics is part of Core Animation?
Secondly, what I shall watch as syntoms of bad allocation: VM Regions, XCode measurements or Head and Anonymous?
Regards!
[EDIT]
The createRoundedRect is as follows
CGMutablePathRef newRoundedRectForRect(CGRect rect, CGFloat radius)
{
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMaxY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMinY(rect), radius);
CGPathCloseSubpath(path);
return path;
}:
and the drawLineGradient.m :
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor)
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat locations[] = { 0.0, 1.0 };
NSArray *colors = #[(__bridge id) startColor, (__bridge id) endColor];
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
CGContextSaveGState(context);
CGContextAddRect(context, rect);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(context);
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
colors = nil;
}
The reason you see core animation is because all iOS views are layer-backed views.
The reason for your leak is that you release the path.
ARC does not manage Core Foundation objects.