IOS 作业项目(4)步步完成 画图 程序(中)

一,承接上文,继续本文  [UIButton buttonWithType:UIButtonTypeRoundedRect];　如此声明的按钮才会有点击闪动的效果!如果直接frame方式声明就不会有.

1,基本界面

1,首先在预编译文件SuperDrawingSample-Prefix.pch中添加颜色宏函数#define RGB(r,g,b) [UIColor colorWithRed:r/255.0f green:g/255.0f blue:b/255.0f alpha:1.0f]

2,在-(UIView *)mainScene中添加内容如下:

//背景颜色
    UIView *bgView=[[UIView alloc]initWithFrame:self.view.bounds];
    bgView.backgroundColor=RGB(189, 186, 255);
    //给视图添加边框
    bgView.layer.borderWidth=1.0f;
    bgView.layer.borderColor=[UIColor blackColor].CGColor;
    [_mainScene addSubview:bgView];
    //2,标题New按钮父视图
    UIButton *leftButton=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    leftButton.backgroundColor=[UIColor whiteColor];
    [leftButton setTitle:@"New" forState:UIControlStateNormal];
    leftButton.layer.borderWidth=1.0f;
    leftButton.layer.borderColor=[UIColor blackColor].CGColor;
    leftButton.frame =CGRectMake(0, 0, 64, 64);
    [_mainScene addSubview:leftButton];
    
    //3,标题title标签视图
    UILabel *midLabel=[[UILabel alloc]initWithFrame:CGRectMake(63, 0, 194, 64)];
    midLabel.backgroundColor=RGB(159, 235, 204);
    midLabel.text=@"Drawing";
    midLabel.font=[UIFont fontWithName:@"chalkboard se" size:30];
    midLabel.textColor=RGB(248, 109, 204);
    midLabel.textAlignment=NSTextAlignmentCenter;
    midLabel.layer.borderWidth=1.0f;
    midLabel.layer.borderColor=[UIColor blackColor].CGColor;
    [_mainScene addSubview:midLabel];
    //2,标题About按钮父视图
    UIButton *rightButton=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    rightButton.backgroundColor=[UIColor whiteColor];
    [rightButton setTitle:@"About" forState:UIControlStateNormal];
    rightButton.layer.borderWidth=1.0f;
    rightButton.layer.borderColor=[UIColor blackColor].CGColor;
    rightButton.frame =CGRectMake(256, 0, 64, 64);
    [rightButton addTarget:self action:@selector(mainSceneToAboutScene:) forControlEvents:UIControlEventTouchUpInside];
    [_mainScene addSubview:rightButton];
    
    //分页符
    UIPageControl *pageControl=[[UIPageControl alloc]init];
    pageControl.frame=CGRectMake(0, 460, 320, 20);
    pageControl.numberOfPages=0;
    pageControl.currentPage=0;
    [_mainScene addSubview:pageControl];
    ///////////////////////////////////////////
    //3,实例化测试控制按钮
    CGRect frame=CGRectMake(0, 100, 320, 60);
    UISegmentedControl *testControl=[[UISegmentedControl alloc]initWithFrame:frame];
    testControl.momentary=YES;
    [testControl insertSegmentWithTitle:@"About" atIndex:0 animated:NO];
    [testControl insertSegmentWithTitle:@"Drawing" atIndex:0 animated:NO];
    [testControl insertSegmentWithTitle:@"New" atIndex:0 animated:NO];
    testControl.tag=KMainSceneTestControlTag;
    //5,滚动视图
    UIScrollView *scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(10, 74, 300, 386)];
    scrollView.backgroundColor=[UIColor whiteColor];
    scrollView.contentSize=CGSizeZero;
    scrollView.pagingEnabled=YES;
    scrollView.layer.borderWidth=1.0f;
    scrollView.layer.borderColor=[UIColor blackColor].CGColor;
    scrollView.delegate=self;
    [_mainScene addSubview:scrollView];
    //4,添加测试按钮触发的测试方法
    [testControl addTarget:self action:@selector(testSegue:) forControlEvents:UIControlEventValueChanged];
    [_mainScene addSubview:testControl];

其他相似界面设置方式和这个大同小异,按相同方式设置即可.

3,透明页面的设置(4 5 6页面)

以背景色设置页面为例,4,5页相似

-(UIView *)bgColorScene

{

//如果不等于空则实例化场景

if (_bgColorScene!=Nil) {

return_bgColorScene;

}

_bgColorScene=[[UIViewalloc]initWithFrame:self.view.bounds];

_bgColorScene.backgroundColor=[UIColorwhiteColor];

CGRect frame=CGRectMake(0, 100, 320, 60);

////////////////////////////

//1,灰色半透明视图

UIView *  bgView=[[UIView alloc]initWithFrame:self.view.bounds];

bgView.backgroundColor=[UIColor grayColor];

bgView.alpha=0.75f;

[_bgColorScene addSubview:bgView];

//2,中间白色提醒背景

UIView *middleView=[[UIView alloc]initWithFrame:CGRectMake(40, 150, 240, 180)];

middleView.backgroundColor=[UIColor whiteColor];

middleView.layer.borderWidth=1.0f;

middleView.layer.borderColor=RGB(0, 0, 0).CGColor;

//2.1 中,左,取消按钮

UIButton *leftButton=[UIButtonbuttonWithType:UIButtonTypeRoundedRect];

leftButton.frame=CGRectMake(0, 0,70, 32);

leftButton.layer.borderWidth=1.0f;

leftButton.layer.borderColor=RGB(0, 0, 0).CGColor;

[leftButton setTitle:@"取消" forState:UIControlStateNormal];

[leftButton setTitleColor:[UIColorblackColor] forState:UIControlStateNormal];

[middleView addSubview:leftButton];

//2.2 中间的label

UILabel *midLabel=[[UILabel alloc]initWithFrame:CGRectMake(70, 0, 100, 32)];

midLabel.text=@"背景颜色";

midLabel.textAlignment=NSTextAlignmentCenter;

midLabel.layer.borderColor=RGB(0, 0, 0).CGColor;

midLabel.layer.borderWidth=1.0f;

[middleView addSubview:midLabel];

//2.3 右边的完成按钮

UIButton *OkButton=[UIButtonbuttonWithType:UIButtonTypeRoundedRect];

OkButton.frame=CGRectMake(170, 0,70, 32);

OkButton.layer.borderWidth=1.0f;

OkButton.layer.borderColor=RGB(0, 0, 0).CGColor;

[OkButton setTitle:@"完成"forState:UIControlStateNormal];

[OkButton setTitleColor:[UIColorblackColor] forState:UIControlStateNormal];

[middleView addSubview:OkButton];

//三个滑块属性设置

UISlider *sliderR=[[UISlider alloc]initWithFrame:CGRectMake(10, 32, 155, 49)];

sliderR.minimumTrackTintColor=[UIColorredColor];

sliderR.minimumValue=0;

sliderR.maximumValue=1;

[middleView addSubview:sliderR];

UISlider *sliderG=[[UISlider alloc]initWithFrame:CGRectMake(10, 71, 155, 49)];

sliderG.minimumTrackTintColor=[UIColorgreenColor];

sliderG.minimumValue=0;

sliderG.maximumValue=1;

[middleView addSubview:sliderG];

UISlider *sliderB=[[UISlider alloc]initWithFrame:CGRectMake(10, 114, 155, 49)];

sliderB.minimumTrackTintColor=[UIColorblueColor];

sliderB.minimumValue=0;

sliderB.maximumValue=1;

[middleView addSubview:sliderB];

//三个滑块后面的颜色标签

UILabel *Rlabel=[[UILabel alloc]initWithFrame:CGRectMake(170, 40, 45, 30)];

Rlabel.backgroundColor=[UIColor redColor];

Rlabel.layer.borderWidth=1;

Rlabel.layer.borderColor=[UIColorblackColor].CGColor;

Rlabel.text=@"red";

Rlabel.textColor=[UIColor whiteColor];

Rlabel.textAlignment=NSTextAlignmentCenter;

Rlabel.font=[UIFont fontWithName:@"chalkBoard se" size:14];

[middleView addSubview:Rlabel];

UILabel *Glabel=[[UILabel alloc]initWithFrame:CGRectMake(170, 79, 45, 30)];

Glabel.backgroundColor=[UIColor greenColor];

Glabel.layer.borderWidth=1;

Glabel.layer.borderColor=[UIColorblackColor].CGColor;

Glabel.text=@"green";

Glabel.textColor=[UIColor whiteColor];

Glabel.textAlignment=NSTextAlignmentCenter;

Glabel.font=[UIFont fontWithName:@"chalkBoard se" size:14];

[middleView addSubview:Glabel];

UILabel *Blabel=[[UILabel alloc]initWithFrame:CGRectMake(170, 118, 45, 30)];

Blabel.backgroundColor=[UIColor blueColor];

Blabel.layer.borderWidth=1;

Blabel.layer.borderColor=[UIColorblackColor].CGColor;

Blabel.text=@"blue";

Blabel.textColor=[UIColor whiteColor];

Blabel.textAlignment=NSTextAlignmentCenter;

Blabel.font=[UIFont fontWithName:@"chalkBoard se" size:14];

[middleView addSubview:Blabel];

UISegmentedControl *testControl=[[UISegmentedControlalloc]initWithFrame:frame];

testControl.momentary=YES;

[testControl insertSegmentWithTitle:@"完成"atIndex:0animated:NO];

[testControl insertSegmentWithTitle:@"背景颜色" atIndex:0 animated:NO];

[testControl insertSegmentWithTitle:@"取消"atIndex:0animated:NO];

testControl.tag=KBgColorSceneTestControlTag;

//添加测试按钮触发的测试方法

[testControl addTarget:self action:@selector(testSegue:) forControlEvents:UIControlEventValueChanged];

[_bgColorScene addSubview:testControl];

_bgColorScene.frame=self.view.bounds;

_bgColorScene.backgroundColor=[UIColorclearColor];

[_bgColorScene addSubview:middleView];

return_bgColorScene;

}

6页背景色视图设置

-(UIView *)lineWidthScene

{

//如果不等于空则实例化场景

if (_lineWidthScene!=Nil) {

return_lineWidthScene;

}

_lineWidthScene=[[UIViewalloc]initWithFrame:self.view.bounds];

_lineWidthScene.backgroundColor=[UIColorwhiteColor];

CGRect frame=CGRectMake(0, 100, 320, 60);

UISegmentedControl *testControl=[[UISegmentedControlalloc]initWithFrame:frame];

testControl.momentary=YES;

[testControl insertSegmentWithTitle:@"完成"atIndex:0animated:NO];

[testControl insertSegmentWithTitle:@"画笔大小" atIndex:0 animated:NO];

[testControl insertSegmentWithTitle:@"取消"atIndex:0animated:NO];

testControl.tag=KLineWidthSceneTestControlTag;

//添加测试按钮触发的测试方法

[testControl addTarget:self action:@selector(testSegue:) forControlEvents:UIControlEventValueChanged];

[_lineWidthScene addSubview:testControl];

_lineWidthScene.frame=self.view.bounds;

_lineWidthScene.backgroundColor=[UIColorclearColor];

////////////////////////////

//1,灰色半透明视图

UIView *  bgView=[[UIView alloc]initWithFrame:self.view.bounds];

bgView.backgroundColor=[UIColor grayColor];

bgView.alpha=0.75f;

[_lineWidthScene addSubview:bgView];

//2,中间白色提醒背景

UIView *middleView=[[UIView alloc]initWithFrame:CGRectMake(40, 150, 240, 180)];

middleView.backgroundColor=[UIColor whiteColor];

middleView.layer.borderWidth=1.0f;

middleView.layer.borderColor=RGB(0, 0, 0).CGColor;

//brown背景

UIView *brownView=[[UIView alloc]initWithFrame:CGRectMake(0, 32, 240, 148)];

brownView.backgroundColor=[UIColor brownColor];

brownView.layer.borderWidth=1.0f;

brownView.layer.borderColor=RGB(0, 0, 0).CGColor;

[middleView addSubview:brownView];

//2.1 中,左,取消按钮

UIButton *leftButton=[UIButtonbuttonWithType:UIButtonTypeRoundedRect];

leftButton.frame=CGRectMake(0, 0,70, 32);

leftButton.layer.borderWidth=1.0f;

leftButton.layer.borderColor=RGB(0, 0, 0).CGColor;

[leftButton setTitle:@"取消" forState:UIControlStateNormal];

[leftButton setTitleColor:[UIColorblackColor] forState:UIControlStateNormal];

[middleView addSubview:leftButton];

//2.2 中间的label

UILabel *midLabel=[[UILabel alloc]initWithFrame:CGRectMake(70, 0, 100, 32)];

midLabel.text=@"画笔大小";

midLabel.textAlignment=NSTextAlignmentCenter;

midLabel.layer.borderColor=RGB(0, 0, 0).CGColor;

midLabel.layer.borderWidth=1.0f;

[middleView addSubview:midLabel];

//2.3 右边的完成按钮

UIButton *OkButton=[UIButtonbuttonWithType:UIButtonTypeRoundedRect];

OkButton.frame=CGRectMake(170, 0,70, 32);

OkButton.layer.borderWidth=1.0f;

OkButton.layer.borderColor=RGB(0, 0, 0).CGColor;

[OkButton setTitle:@"完成"forState:UIControlStateNormal];

[OkButton setTitleColor:[UIColorblackColor] forState:UIControlStateNormal];

[middleView addSubview:OkButton];

//三个滑块属性设置

lineWidthSlider=[[UISlideralloc]initWithFrame:CGRectMake(10, 82, 155, 49)];

lineWidthSlider.minimumTrackTintColor=[UIColorredColor];

lineWidthSlider.minimumValue=0;

lineWidthSlider.maximumValue=1;

[middleView addSubview:lineWidthSlider];

[_lineWidthScene addSubview:middleView];

return_lineWidthScene;

}

6,设置线宽的时候,后面动态大小的圆的画法

创建一个CircleView视图类,继承与UIView,添加属性

@property (nonatomic,assign)CGFloat radius;

添加内容

- (id)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

// Initialization code

}

returnself;

}

-(void)setRadius:(CGFloat)radius

{

if (_radius==radius) {

return;

}

_radius=radius;

//当半径发生变化时,重新绘制圆形

//setNeedsdisplay自动调用drawRect:

[selfsetNeedsDisplay];

}

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect

{

[super drawRect:rect];

//获取画布

CGContextRef context=UIGraphicsGetCurrentContext();

//生成路径

CGMutablePathRef path=CGPathCreateMutable();

//路径内添加圆形...

CGPathAddArc(path, NULL, CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)+2, self.radius, 0, 2*M_PI, NO);

//设置路径闭合

//CGPathCloseSubpath(path);

//设置画布线条的描绘颜色

CGContextSetStrokeColorWithColor(context, RGB(0, 0, 0).CGColor);

//设置画布线条的填充颜色

CGContextSetFillColorWithColor(context, [UIColorwhiteColor].CGColor);

//设置画布线条的宽度

CGContextSetLineWidth(context, 1.0f);

//添加路径到画布上

CGContextAddPath(context, path);

//开始描线

CGContextStrokePath(context);

//添加路径到画布上

CGContextAddPath(context, path);

//开始填充

CGContextFillPath(context);

//释放路径

CGPathRelease(path);

}

在6视图里引用

//添加画圆视图..

CircleView *circleView;设置为成员变量

circleView=[[CircleViewalloc]initWithFrame:CGRectMake(170,CGRectGetMidY(middleView.bounds), 25, 25)];

circleView.backgroundColor=[UIColorclearColor];

[middleView addSubview: circleView];

#pragma mark -私有方法,拖动滑块的时候触发

-(void)lineWidthFromSlider:(UISlider *)slider

{

　　 circleView.radius=slider.value;

}