iPhone how to clip half of the ellipse - iphone

I have drawn ellipse:
CGContextFillEllipseInRect(contextRef, CGRectMake(50, 50, 50, 128));
But i only need a half of ellipse, is there a way to clip the other half?

Before calling the drawing method you can clip the context to a portion of the ellipse:
CGContextSaveGState(contextRef);
BOOL onlyDrawTopHalf = YES;
CGFloat halfMultiplier = onlyDrawTopHalf ? -1.0 : 1.0;
CGRect ellipse = CGRectMake(50, 50, 50, 128);
CGRect clipRect = CGRectOffset(ellipse, 0, halfMultiplier * ellipse.size.height / 2);
CGContextClipToRect(contextRef, clipRect);
CGContextFillEllipseInRect(contextRef, ellipse);
// restore the context: removes the clipping
CGContextRestoreGState(contextRef);

Related

How to rotate image and arrow line from a fixed center point

In my app i have a fix size of button/center points, and i wants to rotate arrow line and this attached image also rotate when i touch/scroll up/down.
And i have made a demo in this i scroll only images using icarousel classes.
but i can't scroll both arrow and image scroll both at a time.
Please help me how to implement this.
and my code for only image scroll using icarousel is here..
- (UIView *)carousel:(__unused iCarousel *)carousel viewForItemAtIndex: (NSInteger)index reusingView:(UIView *)view
{
UIView *viewFor;
UIImageView *itemView;
if (view==nil) {
viewFor=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
itemView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 45, 120, 120)];
[itemView.layer setCornerRadius:itemView.frame.size.width/2];
[itemView setClipsToBounds:YES];
[viewFor addSubview:itemView];
StikImage=[[UIImageView alloc]initWithFrame:CGRectMake(-140, 95, 140, 20)];
StikImage.backgroundColor=[UIColor whiteColor];
[viewFor addSubview:StikImage];
}
else
{
viewFor=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
itemView=[[UIImageView alloc]initWithFrame:CGRectMake(0, 45, 120, 120)];
[itemView.layer setCornerRadius:itemView.frame.size.width/2];
[itemView setClipsToBounds:YES];
[viewFor addSubview:itemView];
StikImage=[[UIImageView alloc]initWithFrame:CGRectMake(-140, 95, 140, 20)];
StikImage.backgroundColor=[UIColor whiteColor];
[viewFor addSubview:StikImage];
}
itemView.image=[images objectAtIndex:index];
return viewFor;
}
And here is my Custom type icrousel method for transform images
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform {
const CGFloat centerItemZoom = 1.6;
const CGFloat centerItemSpacing = 1.2;
const CGFloat centerItemYOffset = 100;
CGFloat spacing = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.3f];
CGFloat absClampedOffset = MIN(2.5, fabs(offset));
CGFloat clampedOffset = MIN(1.0, MAX(-1.0, offset));
CGFloat scaleFactor = 1.0 + absClampedOffset * (1.2/centerItemZoom - 1.0);
CGFloat yoffset = (1.0f - absClampedOffset) * centerItemYOffset;
offset = (scaleFactor * offset + scaleFactor * (centerItemSpacing - 1.0) * clampedOffset) * carousel.itemWidth * spacing;
if (carousel.vertical)
{
transform = CATransform3DTranslate(transform, yoffset, offset, -absClampedOffset);
}
else
{
transform = CATransform3DTranslate(transform, offset, yoffset, -absClampedOffset);
}
transform = CATransform3DScale(transform, scaleFactor, scaleFactor, 5.0f);
return transform;
}
Use below code for rotate the image view
imageview.transform = CGAffineTransformMakeRotation(degrees * M_PI/180);
you can use what you want degree sizes are like 180, 90, 240, 270..., depends on your requirements "touch/scroll up/down"

drawRect Circle inside of circle used to show progress

I'm trying to show progress by having a circle fill up with another circle inside of it. Can someone help me achieve this? I may be going about this the wrong way.
Here is my code:
- (void)drawRect:(CGRect)rect
{
rect = CGRectMake(0, 400, 500, 500);
[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 500, 500) cornerRadius:50.0] addClip];
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(contextRef, 2.0);
CGContextSetRGBFillColor(contextRef, 111/255.0f, 116/255.0f, 128/255.0f, 1.0);
CGRect circlePoint = (CGRectMake(0, 0, rect.size.width, rect.size.height));
CGContextFillEllipseInRect(contextRef, circlePoint);
CGContextBeginPath(contextRef);
float c = 20; //Number that should cause the green progress to increase and decrease
CGContextAddArc(contextRef, 250, 250, 250, 0, M_PI, 0);
CGContextClosePath(contextRef); // could be omitted
UIColor *color = [UIColor greenColor];
CGContextSetFillColorWithColor(contextRef, color.CGColor);
CGContextFillPath(contextRef);
}
And here is a screenshot of how it looks right now. I basically want to be able to control the progress of the green inside using my float c; variable.
I've tried playing around with CGContextAddArc, but I can't get grow to the size of the circle as "c" increases and same when I decrease the value of "c"
use your c to say from where to where
// draw the pie part
CGContextMoveToPoint(_viewContext, centerX, centerY);
CGContextAddArc(_viewContext, centerX, centerY, pieRadius, radians(startDegrees), radians(endDegrees), 0);
CGContextClosePath(_viewContext);
CGContextFillPath(_viewContext);
startDegrees = 0
endDegress = c
_viewContext = contextRef
centerX/CenterY = center of bounds
PieRadius = radius you want :D in pixels IIRC
to convert deg to rad
#define pi 3.14159265
double radians(double percentage)
{
return (percentage/100)*360 * (pi/180);
}

iOS - scaling text vertically on Quartz

I am writing some text to a quartz context.
I have a box of 500 x 200 pixels and I am writing some text inside. The box can have any aspect ratio but the text will always write with the font proportions as it is. What I want is to scale the font vertically and keep the horizontal scale.
See the picture. The first box represents what I am getting, the second one, what I want.
this is how I am writing it...
CGRect rect = CGRectMake(0,0,500,200);
[myText drawInRect:rect
withFont:aFont
lineBreakMode:UILineBreakModeTailTruncation
alignment:UITextAlignmentCenter];
is there a way to scale the font vertically?
NOTE: as this is being written in a PDF context, I don't want to
render the text to a image context and scale it vertically, because I
don't want to lose resolution.
thanks
- (void) scaleTextVerticallyWithContext:(CGContextRef)myContext withRect:(CGRect)contextRect
{
CGFloat w, h;
w = contextRect.size.width;
h = contextRect.size.height;
CGAffineTransform myTextTransform;
CGContextSelectFont (myContext, "Helvetica-Bold", h/10, kCGEncodingMacRoman);
CGContextSetCharacterSpacing (myContext, 10);
CGContextSetTextDrawingMode (myContext, kCGTextFillStroke);
CGContextSetRGBFillColor (myContext, 0, 1, 0, .5);
CGContextSetRGBStrokeColor (myContext, 0, 0, 1, 1);
/*
* CGAffineTransformMakeScale ( CGFloat sx, CGFloat sy );
* sx: The factor by which to scale the x-axis of the coordinate system.
* sy: The factor by which to scale the y-axis of the coordinate system.
*/
myTextTransform = CGAffineTransformMakeScale(1,8);
CGContextSetTextMatrix (myContext, myTextTransform);
CGContextShowTextAtPoint (myContext, 40, 0, "Hello There", 9);
}
- (void)drawRect:(CGRect)rect{
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect viewBounds = self.bounds;
CGContextTranslateCTM(context, 0, viewBounds.size.height);
CGContextScaleCTM(context, 1, -1);
[self scaleTextVerticallyWithContext:context withRect:viewBounds];
}

Help rotating a UIImage

I have to rotate a UIImage before I save it out to file. I've tried a number of methods, some of which seem to work for other people, but all it seems to do it turn my image solid white. Here's my code:
CGFloat radians = 90.0f * M_PI/180;
UIGraphicsBeginImageContext(image.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextConcatCTM(ctx, CGAffineTransformMakeRotation(radians));
CGContextDrawImage(ctx, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage);
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Can anyone spot what I'm doing wrong? The variable "image" is a UIImage.
- (UIImage *)imageRotatedByRadians:(CGFloat)radians
{
// calculate the size of the rotated view's containing box for our drawing space
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.size.width, self.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(radians);
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
// Create the bitmap context
UIGraphicsBeginImageContext(rotatedSize);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);
//Rotate the image context
CGContextRotateCTM(bitmap, radians);
// Now, draw the rotated/scaled image into the context
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2, self.size.width, self.size.height), [self CGImage]);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
I believe you are not taking into account that the coordinate system for iPhone and Quartz Coordinate system are different.
try putting these two lines before CGContextConcatCTM.
// to account for Quartz coordinate system.
CGContextScaleCTM(cx, 1, -1);
CGContextTranslateCTM(ctx, 0, -longerSide); // width or height depending on the orientation
I suggest to put your image in UIImageView and then use following code:
- (void)setupRotatingButtons
{
// call this method once; make sure "self.view" is not nil or the button
// won't appear. the below variables are needed in the #interface.
// center: the center of rotation
// radius: the radius
// time: a CGFloat that determines where in the cycle the button is located at
// (note: it will keep increasing indefinitely; you need to use
// modulus to find a meaningful value for the current position, if
// needed)
// speed: the speed of the rotation, where 2 * 3.1415 is **roughly** 1 lap a
// second
center = CGPointMake(240, 160);
radius = 110;
time = 0;
speed = .3 * 3.1415; // <-- will rotate CW 360 degrees per .3 SECOND (1 "lap"/s)
CADisplayLink *dl = [CADisplayLink displayLinkWithTarget:self selector:#selector(continueCircling:)];
[dl addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}
- (void)continueCircling:(CADisplayLink *)dl
{
time += speed * dl.duration;
//here rotate your image view
yourImageView.transform = CGAffineTransformMakeRotation(time);
}
Use following code to rotate:
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"image1.png"]];
[imageView setFrame:CGRectMake(0.0f, 0.0f,100.0f, 100.0f)];
[self.view addSubview:imageView];
self.imageView.transform = CGAffineTransformMakeRotation((90.0f * M_PI) / 180.0f);

How to draw a line or curve with blurry shadow?

Is it possible to do that with quartz?
Simply use CGContextSetShadow(context, offset, blur) prior to drawing your path.
CGSize offset;
float blur;
offset.width = 10;
offset.height = -10;
CGContextSetShadow(context, offset, blur);
CGContextRect(context, CGRectMake(20, 20, 100, 100);