I followed one tutorial to create a graph. Here is that Part 3 tutorial, but while I run my graph line is not showing up. Here is my code:
Gridview.h
#import <UIKit/UIKit.h>
#define kGraphHeight 300
#define kDefaultGraphWidth 900
#define kOffsetX 0
#define kStepX 50
#define kGraphBottom 300
#define kGraphTop 0
#define kStepY 50
#define kOffsetY 10
#interface GridView : UIView
#end
**GridView.m**
#import "GridView.h"
#implementation GridView
- (void)drawLineGraphWithContext:(CGContextRef)ctx
{
//float data[] = {0.7, 0.4, 0.9, 1.0, 0.2, 0.85, 0.11, 0.75, 0.53, 0.44, 0.88, 0.77, 0.99, 0.55};
float data[] = {0.7, 0.4, 0.9, 1.0, 0.2, 0.85, 0.11, 0.75, 0.53, 0.44, 0.88, 0.77, 0.99, 0.55};
CGContextSetLineWidth(ctx, 2.0);
CGContextSetStrokeColorWithColor(ctx, [[UIColor colorWithRed:1.0 green:0.5 blue:0 alpha:1.0] CGColor]);
int maxGraphHeight = kGraphHeight - kOffsetY;
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx, kOffsetX, kGraphHeight - maxGraphHeight * data[0]);
for (int i = 1; i < sizeof(data); i++)
{
CGContextAddLineToPoint(ctx, kOffsetX + i * kStepX, kGraphHeight - maxGraphHeight * data[i]);
}
CGContextDrawPath(ctx, kCGPathStroke);
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
[self drawLineGraphWithContext:context];
// Draw the background image
UIImage *image = [UIImage imageNamed:#"background.png"];
CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);
CGContextDrawImage(context, imageRect, image.CGImage);
CGContextSetLineWidth(context, 0.6);
CGContextSetStrokeColorWithColor(context, [[UIColor lightGrayColor] CGColor]);
CGFloat dash[] = {2.0, 2.0};
CGContextSetLineDash(context, 0.0, dash, 2);
// How many lines?
int howMany = (kDefaultGraphWidth - kOffsetX) / kStepX;
// Here the lines go
for (int i = 0; i <= howMany; i++)
{
CGContextMoveToPoint(context, kOffsetX + i * kStepX, kGraphTop);
CGContextAddLineToPoint(context, kOffsetX + i * kStepX, kGraphBottom);
}
int howManyHorizontal = (kGraphBottom - kGraphTop - kOffsetY) / kStepY;
for (int i = 0; i <= howManyHorizontal; i++)
{
CGContextMoveToPoint(context, kOffsetX, kGraphBottom - kOffsetY - i * kStepY);
CGContextAddLineToPoint(context, kDefaultGraphWidth, kGraphBottom - kOffsetY - i * kStepY);
}
CGContextStrokePath(context);
CGContextSetLineDash(context, 0, NULL, 0); // Remove the dash
}
viewcontroller.h
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController
{
UIScrollView *scroller;
}
#property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
#end
viewcontroller.m
#import "ViewController.h"
#import "GridView.h"
#interface ViewController ()
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
scroller.contentSize = CGSizeMake(kDefaultGraphWidth, kGraphHeight);
}
Why am I not able to generate the graph to display. Please help me to solve. Thanks
Try adding this method in your view controller.m
-(void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
GridView *gv=[GridView alloc]initWithFrame:CGRectMake(0,0,100,100)];
[ self.view addSubView:gv];
}
Related
I'm developing a Augmented reality app where I need to add a 3D grid on camera overlay. My attempt so far:
DrawLayer.h
#import <UIKit/UIKit.h>
#interface DrawLayer : UIView
#property (nonatomic, assign) int numberOfColumns;
#property (nonatomic, assign) int numberOfRows;
#end
DrawLayer.m
#import "DrawLayer.h"
#implementation DrawLayer
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 0.5);
CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
// ---------------------------
// Drawing column lines
// ---------------------------
// calculate column width
CGFloat columnWidth = self.frame.size.width / (self.numberOfColumns + 1.0);
for(int i = 1; i <= self.numberOfColumns; i++)
{
CGPoint startPoint;
CGPoint endPoint;
startPoint.x = columnWidth * i;
startPoint.y = 0.0f;
endPoint.x = startPoint.x;
endPoint.y = self.frame.size.height;
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextStrokePath(context);
}
// ---------------------------
// Drawing row lines
// ---------------------------
// calclulate row height
CGFloat rowHeight = self.frame.size.height / (self.numberOfRows + 1.0);
for(int j = 1; j <= self.numberOfRows; j++)
{
CGPoint startPoint;
CGPoint endPoint;
startPoint.x = 0.0f;
startPoint.y = rowHeight * j;
endPoint.x = self.frame.size.width;
endPoint.y = startPoint.y;
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextStrokePath(context);
}
}
#end
And Adding it to a camera overlay
DrawLayer *gridView = [[DrawLayer alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
gridView.backgroundColor=[UIColor clearColor];
gridView.numberOfColumns = 10;
gridView.numberOfRows = 8;
[gridView setNeedsDisplay];
CATransform3D t=gridView.layer.transform;
t.m34 = 1.0 / -300.0;
t = CATransform3DRotate(t, DEGREES_TO_RADIANS(60.0), 1, 0, 0);
gridView.layer.transform=t;
[cameraUI setCameraOverlayView:gridView];
Now My result is :
But I want the output like this:
Whats wrong with this code? Please help.
I am playing audio songs from internet , I want to show the song progress something like this-
please help me how to animate UIView frame from 0 to 360 degree in song time duration.
Here is some code for drawing the two circles shown. Note that you will have to draw in an active CGContext. If you have any questions don't hesitate to ask.
Objective-C:
float percentDone = 0.25 //set this from 0 to 1
CGSize imageSize = CGSizeMake(88, 88)
//// Color Declarations
UIColor* pieColor = [UIColor colorWithRed: 0 green: 0.245 blue: 1 alpha: 1];
UIColor* background = [UIColor colorWithRed: 0.645 green: 0.645 blue: 0.645 alpha: 1];
//// Background gray circle
UIBezierPath* ovalPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(0, 0, imageSize.width, imageSize.height))];
[background setFill];
[ovalPath fill];
//// Foreground progress wedge
CGRect oval2Rect = CGRectMake(0.f, 0.f, imageSize.width, imageSize.height);
UIBezierPath* oval2Path = UIBezierPath.bezierPath;
[oval2Path addArcWithCenter: CGPointMake(CGRectGetMidX(oval2Rect), CGRectGetMidY(oval2Rect)) radius: CGRectGetWidth(oval2Rect) / 2 startAngle: 270 * M_PI/180 endAngle: endAngle clockwise: YES];
[oval2Path addLineToPoint: CGPointMake(CGRectGetMidX(oval2Rect), CGRectGetMidY(oval2Rect))];
[oval2Path closePath];
[pieColor setFill];
[oval2Path fill];
Swift:
var percentDone = 0.25 //set this from 0 to 1
var imageSize = CGSizeMake(88, 88)
let endAngle = -(360.0 * percentDone) * CGFloat(M_PI)/180
//// Color Declarations
let pieColor = UIColor(red: 0.000, green: 0.245, blue: 1.000, alpha: 1.000)
let background = UIColor(red: 0.645, green: 0.645, blue: 0.645, alpha: 1.000)
//// Background gray circle
var ovalPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, imageSize.width, imageSize.height))
background.setFill()
ovalPath.fill()
//// Foreground progress wedge
var oval2Rect = CGRectMake(0, 0, imageSize.width, imageSize.height)
var oval2Path = UIBezierPath()
oval2Path.addArcWithCenter(CGPointMake(oval2Rect.midX, oval2Rect.midY), radius: oval2Rect.width / 2, startAngle: 270 * CGFloat(M_PI)/180, endAngle: endAngle, clockwise: true)
oval2Path.addLineToPoint(CGPointMake(oval2Rect.midX, oval2Rect.midY))
oval2Path.closePath()
pieColor.setFill()
oval2Path.fill()
I done it my self as was looking for, i would like to share my answer step by step - First of all I created a custom UIView class CircleView -
CircleView.h
#import <UIKit/UIKit.h>
#interface CircleView : UIView
{
CGFloat startAngle;
CGFloat endAngle;
}
#property (nonatomic,assign) float percent;
#end
CircleView.m
#import "CircleView.h"
#implementation CircleView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
// Initialization code
self.backgroundColor = [UIColor clearColor];
// Determine our start and stop angles for the arc (in radians)
startAngle = M_PI * 1.5;
endAngle = startAngle - (M_PI * 2);
}
return self;
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, self.center.x, self.center.y);
CGContextAddArc(context, self.center.x, self.center.y, rect.size.height/2, 360 , 0, 1);
CGContextSetRGBFillColor(context, 16.0/255.0f, 132.0/255.0f, 254.0/255.0f, 1.0f);
CGContextDrawPath(context, kCGPathFill);
CGContextSetRGBFillColor(context, 223.0f/255.0f, 224.0f/255.0f, 225.0/255.0, 1.0);
CGContextMoveToPoint(context, self.center.x, self.center.y);
CGContextAddArc(context, self.center.x, self.center.y, rect.size.height/2, startAngle , (endAngle - startAngle) * (_percent / 100.0) + startAngle, 1);
CGContextDrawPath(context, kCGPathFill);
}
#end
Now I used my custom class in cell something like this -
-(void)ReDrawCirculerView:(UIView *)viewHoldingCirculerView
{
[circleView removeFromSuperview];
circleView = [[CircleView alloc] initWithFrame:viewHoldingCirculerView.bounds];
circleView.percent=100.0;
[viewHoldingCirculerView addSubview:circleView];
[self.m_timer invalidate];
self.m_timer = nil;
NSTimeInterval playedTime = yourplayedtimeduration;
NSTimeInterval totaltime = totaltimeduration;
if(playedTime>0 && totaltime>0 && totaltime>playedTime)
{
float percentageplayed = playedTime*100/totaltime ;
circleView.percent= 100-percentageplayed;
}
self.m_timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:#selector(ProgressSpin:) userInfo:nil repeats:YES];
}
- (void)ProgressSpin:(NSTimer *)timer
{
NSTimeInterval interval = 0.0;
NSTimeInterval playedTime = yoursonplayedduration;
NSTimeInterval totaltime = totalsonduration;
if(playedTime>0 && totaltime>0 && totaltime>playedTime)
{
interval =(totaltime-playedTime);
}
else
{ NSLog(#"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%f====%f",circleView.percent,interval);
return;
}
// If we can decrement our percentage, do so, and redraw the view
if (circleView.percent > 0 )
{
if(isinf(circleView.percent/interval))
{
return;
}
circleView.percent = circleView.percent - circleView.percent/interval;
self.previousTimeInterval = interval;
[circleView setNeedsDisplay];
}
else
{
[self.m_timer invalidate];
self.m_timer = nil;
}
}
Try this
self.imageview.transform = CGAffineTransformMakeRotation(M_PI_2);
I'm making app with Quartz 2D drawing. I created a two files: Draw2D.m and Draw2D.h. Then I created button in my View Controller. I created a code to this button. But my view displays only black screen. Here is my code:
ViewController.m
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
#import "Draw2D.h"
#interface ViewController ()
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (IBAction)Start {
CGFloat hue = ( arc4random() % 256 / 256.0 ); // от 0.0 до 1.0
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5; // от 0.5 до 1.0, от белого
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5; // от 0.5 до 1.0, от черного
self.view.backgroundColor = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
Draw2D *draw2DView = [[Draw2D alloc] initWithFrame:(self.view.bounds)];
[self.view addSubview:draw2DView];
}
Draw2D.m
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 4.0);
CGContextSetStrokeColorWithColor(context,
[UIColor blueColor].CGColor);
CGRect rectangle = CGRectMake(60,170,200,80);
CGContextAddRect(context, rectangle);
CGContextStrokePath(context);
}
Please notice that Draw2D don't have connection with ViewController. And my drawRect don't do nothing, it draw a square. My code should draw blue square on the random background.
I would like to draw textured button in iOS app. I would not use Photoshop rather CoreGraphics because I want a general solution that works with buttons that has different size. What is the basic principle of it? What technology do I need?
My first step was to subclass a UIButton, but how can I add i.e. bevel effect to it?
The best approach will be subclassing you button class(your new class must inherit from UIButton). by doing this you can give some customized details too to your button.. Below is a sample ..
//interface of custom button class
#interface myButton : UIButton
{
int orderNo;
CAGradientLayer *gradientLayer;
CALayer *wrapperLayer;
CGColorRef _borderColor;
}
#property (assign) int orderNo;
#property (nonatomic) CGColorRef _borderColor;
#property (nonatomic, retain) CALayer *wrapperLayer;
#property (nonatomic, retain) CAGradientLayer *gradientLayer;
- (void)setBorderColor:(CGColorRef)color;
- (void)setCornerRadius:(float)radius;
The implementation..
#import "Button.h"
#implementation Button
#synthesize orderNo,wrapperLayer,_borderColor,gradientLayer;
- (id)initWithFrame:(CGRect)frame
{if ((self = [super initWithFrame:frame])) {
CGFloat radius = self.bounds.size.width / 2;
CGFloat borderWidth = self.bounds.size.width / 10;
self.layer.backgroundColor = [[UIColor blackColor] CGColor];
self.layer.borderColor = [[UIColor whiteColor] CGColor];
self.layer.borderWidth = borderWidth;
self.layer.cornerRadius = radius;
if ([self.layer respondsToSelector:#selector(setShadowOffset:)])
self.layer.shadowOffset = CGSizeMake(0.25, 0.25);
if ([self.layer respondsToSelector:#selector(setShadowColor:)])
self.layer.shadowColor = [[UIColor blackColor] CGColor];
if ([self.layer respondsToSelector:#selector(setShadowRadius:)])
self.layer.shadowRadius = borderWidth;
if ([self.layer respondsToSelector:#selector(setShadowOpacity:)])
self.layer.shadowOpacity = 0.75;
[self setNeedsDisplay];
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetShouldAntialias(ctx, true);
CGFloat xsize = self.bounds.size.width / 6;
CGFloat borderWidth = self.bounds.size.width / 10;
CGContextSaveGState(ctx);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineWidth(ctx, borderWidth);
CGContextSetStrokeColorWithColor(ctx, [[UIColor whiteColor] CGColor]);
CGFloat width = self.bounds.size.width;
CGPoint start1 = CGPointMake(width / 2 - xsize, width / 2 - xsize);
CGPoint end1 = CGPointMake(width / 2 + xsize, width / 2 + xsize);
CGPoint start2 = CGPointMake(width / 2 + xsize, width / 2 - xsize);
CGPoint end2 = CGPointMake(width / 2 - xsize, width / 2 + xsize);
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx, start1.x, start1.y);
CGContextAddLineToPoint(ctx, end1.x, end1.y);
CGContextStrokePath(ctx);
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx, start2.x, start2.y);
CGContextAddLineToPoint(ctx, end2.x, end2.y);
CGContextStrokePath(ctx);
CGContextRestoreGState(ctx);
}
- (void)setBorderColor:(CGColorRef)color
{
[[self layer] setBorderColor:color];
[[self layer] setNeedsDisplay];
}
- (void)setCornerRadius:(float)radius
{
[[self layer] setCornerRadius:radius];
// and get the wrapper for the gradient layer too
[wrapperLayer setCornerRadius:radius];
}
#end
am making an app in which i have to control a smile of a face like graphics. For example if i slide the slider down(to a value less than middle) it should give the arc a sad face(like :-( ) effect and if i slide the slider up the arc should give the effect of smile(like :-) ).initially lips are like :-| . I need to control the lips which is an arc using a slider?
smileSliderViewController.h
#import <UIKit/UIKit.h>
#interface smileSliderViewController : UIViewController
{
IBOutlet UISlider *slider;
}
-(IBAction)valueChange:(id)sender;
#end
smileSliderViewController.m
#import "smileSliderViewController.h"
//#import "smile.h"
#implementation smileSliderViewController
-(IBAction)valueChange:(id)sender
{
int value = (int)(slider.value);
if(value>0 && value<25)
{
//value--;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0,0.0,1.0,1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
CGContextMoveToPoint(context, 120,180);
CGContextAddArcToPoint(context, 190 , 170, 270, 200, 0 );
CGContextStrokePath(context);
}
}
smile.h
#import <UIKit/UIKit.h>
#import "smile.m"
#interface smile : UIView
{
IBOutlet UISlider *slider;
}
#end
smile.m
#import "smile.h"
#import "smileSliderViewController.h"
#implementation smile
- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
// Initialization code
}
return self;
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
//CGContextSetStrokeColor(context, [UIColor redColor].CGColor);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0,0.0,1.0,1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
CGRect rectangle = CGRectMake(60, 20, 200,200);
CGContextAddEllipseInRect(context, rectangle);
CGContextStrokePath(context);
/*CGRect rectangle1 = CGRectMake(130,170,50,10);
CGContextAddRect(context,rectangle1);
CGContextStrokePath(context);*/
/*CGContextMoveToPoint(context,100,200);
CGContextAddArcToPoint(context,120,150,400,150,70 );
CGContextStrokePath(context);*/
/*CGContextMoveToPoint(context, 100,100);
CGContextAddArcToPoint(context, -100,200, -400,200, 80);
CGContextStrokePath(context);*/
CGContextSetStrokeColorWithColor(context,color);
CGRect rectangle2 = CGRectMake(80, 90, 50, 8);
CGContextAddEllipseInRect(context, rectangle2);
CGContextStrokePath(context);
CGContextSetStrokeColorWithColor(context,color);
CGRect rectangle3 = CGRectMake(180, 90, 50, 8);
CGContextAddEllipseInRect(context, rectangle3);
CGContextStrokePath(context);
CGContextSetStrokeColorWithColor(context,color);
CGContextMoveToPoint(context, 155,120);
CGContextAddLineToPoint(context, 155,160);
CGContextStrokePath(context);
/*CGContextSetStrokeColorWithColor(context, color);
CGRect rectangle4 = CGRectMake(130, 180, 50,8);
CGContextAddEllipseInRect(context, rectangle4);
CGContextStrokePath(context);*/
/*CGContextSetStrokeColorWithColor(context,color);
CGContextMoveToPoint(context, 120,180);
CGContextAddLineToPoint(context, 190,180);
CGContextStrokePath(context);*/
int value = (int)(slider.value);
if(value == 25)
{
CGContextMoveToPoint(context, 120,180);
CGContextAddArcToPoint(context, 190 , 180, 250 , 180, 0 );
CGContextStrokePath(context);
}
}
The drawing code in sliderChange is unnecessary. Call [smile setNeedsDisplay] there instead.