UI涂鸦板设计代码

第一步:创建UIView子类PaintView:

1、声明属性和方法:

#import <UIKit/UIKit.h>

@interface PaintView : UIView

@property(nonatomic,retain)NSMutableArray *allLines;

@property(nonatomic,retain)UIColor *lineColor;

@property(nonatomic,assign)CGFloat lineWidth;

-(void)undoLastDrawing;

-(void)allClean;

@end

第二步、实现方法并引入LineModel.h文件:

#import "PaintView.h"

#import "LineModel.h"

@implementation PaintView

-(void)dealloc{

[_allLines release];

[_lineColor release];

[super dealloc];

}

-(NSMutableArray *)allLines{

if (!_allLines) {

self.allLines=[NSMutableArray array];

}

return _allLines;

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *aTouth=touches.anyObject;

CGPoint startPoint=[aTouth locationInView:self.superview];

UIBezierPath *bezierPath=[UIBezierPath bezierPath];

[bezierPath moveToPoint:startPoint];

LineModel *line=[[[LineModel alloc]init]autorelease];

line.path=bezierPath;

line.color=self.lineColor;

line.width=self.lineWidth;

[self.allLines addObject:line];

}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

UITouch *aTouth=touches.anyObject;

CGPoint movePoint=[aTouth locationInView:self.superview];

LineModel *aLine=self.allLines.lastObject;

[aLine.path addLineToPoint:movePoint];

[self setNeedsDisplay];

}

-(void)undoLastDrawing{

[self.allLines removeLastObject];

[self setNeedsDisplay];

}

-(void)allClean;{

[self.allLines removeAllObjects];

[self setNeedsDisplay];

}

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

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

for (LineModel *aLine in self.allLines) {

[aLine.color setStroke];

[aLine.path setLineWidth:aLine.width];

[aLine.path stroke];

}}

@end

第三步、创建NSObject子类LineModel同时引入<UIKit/UIKit.h>框架:

1、声明属性:

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

@interface LineModel : NSObject

@property(nonatomic,retain)UIBezierPath *path;

@property(nonatomic,retain)UIColor *color;

@property(nonatomic,assign)CGFloat width;

@end

2、dealloc:

#import "LineModel.h"

@implementation LineModel

-(void)dealloc{

[_path release];

[_color release];

[super dealloc];

}

@end

第四步:创建UIViewController子类MainViewController同时:

#import "MainViewController.h"

#import "PaintView.h"

@interface MainViewController ()

@end

@implementation MainViewController

-(void)loadView{

PaintView *paintView=[[[PaintView alloc]initWithFrame:[[UIScreen mainScreen]bounds]]autorelease];

paintView.backgroundColor=[UIColor whiteColor];

paintView.lineWidth=5;

paintView.lineColor=[UIColor blackColor];

self.view=paintView;

}

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view.

UIButton *aButton=[UIButton buttonWithType:UIButtonTypeSystem];

aButton.frame=CGRectMake(CGRectGetWidth(self.view.bounds)-80, 40, 60, 40);

[aButton setTitle:@"菜单" forState:UIControlStateNormal];

[aButton addTarget:self action:@selector(handleAButtonAction:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:aButton];

UITextField *aTextField=[[[UITextField alloc]initWithFrame:CGRectZero]autorelease];

aTextField.tag=123;

[self.view addSubview:aTextField];

UIInputView *myInputView=[[[UIInputView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 60)]autorelease];

myInputView.backgroundColor=[UIColor whiteColor];

aTextField.inputView=myInputView;

NSArray *[email protected][@"减小",@"增大",@"撤销",@"清空",@"颜色"];

CGFloat width=(CGRectGetWidth(self.view.bounds)-20*6)/5;

CGFloat height=width;

CGFloat originx=20;

CGFloat originy=(60-height)/2;

for (int i=0; i<titles.count; i++) {

UIButton *button=[UIButton buttonWithType:UIButtonTypeSystem];

button.tag=100+i;

button.frame=CGRectMake(originx+(width+20)*i, originy, width, height);

button.layer.cornerRadius=width/2;

button.layer.masksToBounds=YES;

[button setTitle:titles[i] forState:UIControlStateNormal];

button.backgroundColor=[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:0.6];

[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

[button addTarget:self action:@selector(handleButtonAction:) forControlEvents:UIControlEventTouchUpInside];

[myInputView addSubview:button];

}

}

-(void)handleAButtonAction:(UIButton *)sender{

UITextField *aTextField=(UITextField *)[self.view viewWithTag:123];

if (aTextField.isFirstResponder) {

[aTextField resignFirstResponder];

}else{

[aTextField becomeFirstResponder];

}

}

-(void)handleButtonAction:(UIButton *)sender{

PaintView *paintView=(PaintView *)self.view;

switch (sender.tag) {

case 100:{

if (paintView.lineWidth>2) {

paintView.lineWidth-=1;

}

break;

}case 101:{

paintView.lineWidth+=1;

break;

}case 102:{

[paintView undoLastDrawing];

break;

}case 103:{

[paintView allClean];

break;

}case 104:{

sender.backgroundColor=[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];

paintView.lineColor=sender.backgroundColor;

break;

}

default:

break;

}

}

第五步:在AppDelegate.m加载控制器:

#import "AppDelegate.h"

#import "MainViewController.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

-(void)dealloc{

[_window release];

[super dealloc];

}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]autorelease];

// Override point for customization after application launch.

self.window.backgroundColor = [UIColor whiteColor];

[self.window makeKeyAndVisible];

MainViewController *mainVC=[[[MainViewController alloc]init]autorelease];

self.window.rootViewController=mainVC;

return YES;

}

时间: 2024-11-05 13:22:22

UI涂鸦板设计代码的相关文章

iOS开发UI篇—事件处理(完成一个简单的涂鸦板)

iOS开发UI篇-事件处理(实现一个简单的涂鸦板) 一.说明 该程序使用事件处理机制和绘图完成了一个简单的涂鸦板应用,使用鼠标在涂鸦板内拖动即可进行涂鸦,点击保存到相册按钮,可以把完成的涂鸦保存到手机的相册中,点击回退按钮可以向后退回一步,点击清空可以让涂鸦板清空. 文件结构和界面搭建: 二.代码示例 YYViewController.m文件 1 // 2 // YYViewController.m 3 // 02-画板程序 4 // 5 // Created by apple on 14-6-

UI进阶--Quartz2D和触摸事件的简单使用:简易涂鸦板

需求:实现一个简易的涂鸦板应用,使用鼠标在涂鸦板内拖动即可进行涂鸦,点击保存按钮,可以把完成的涂鸦保存,点击回退按钮可以向后退回一步,点击清空可以让涂鸦板清空. 实现步骤: 1.布局storyboard,连线各按钮以及涂鸦板: 2.监听触摸事件,主要为touchesBegan:和touchesMoved:; 3.获取移动的路径并添加到 UIBezierPath 对象: 4.渲染: 示例文件结构: 具体实现代码: 1 // 2 // Scrawl.h 3 // 1-04-Scrawl 4 // 5

iOS开发UI篇—事件处理(实现一个简单的涂鸦板)

一.说明 该程序使用事件处理机制和绘图完成了一个简单的涂鸦板应用,使用鼠标在涂鸦板内拖动即可进行涂鸦,点击保存到相册按钮,可以把完成的涂鸦保存到手机的相册中,点击回退按钮可以向后退回一步,点击清空可以让涂鸦板清空. 文件结构和界面搭建: 二.代码示例 YYViewController.m文件 复制代码 1 // 2 //  YYViewController.m 3 //  02-画板程序 4 // 5 //  Created by apple on 14-6-12. 6 //  Copyrigh

实现简单的手写涂鸦板(demo源码)

在一些软件系统中,需要用到手写涂鸦的功能,然后可以将涂鸦的结果保存为图片,并可以将"真迹"通过网络发送给对方.这种手写涂鸦功能是如何实现的了?最直接的,我们可以使用Windows提供的GDI技术或GDI+技术来实现绘图功能.但是,要实现一个如此简单的涂鸦板,也不是那么容易的事情.幸运的是,我们可以直接使用OMCS提供的内置集成了这种功能的一个WinForm控件HandwritingPanel. HandwritingPanel控件的主要接口如下图所示: /// <summary&

PPAPI+Skia实现的涂鸦板

在PPAPI插件中使用Skia画图介绍了怎样在PPAPI中使用Skia,文末说回头要提供一个简单的涂鸦板插件,这次我来兑现承诺了. foruok原创,关注微信订阅号"程序视界"可联系foruok. 演示样例非常easy,先看看效果: 涂鸦插件功能说明 功能列表: 使用鼠标左键绘制线条 撤销.清除功能 支持CTRL+Z组合键撤销,支持ESC清除 项目说明 项目与在PPAPI插件中使用Skia画图这个文章里的几乎相同,仅仅只是多了几个文件.VS2013中的项目视图例如以下: 做一点点说明吧

背水一战 Windows 10 (60) - 控件(媒体类): Pointer 涂鸦板, InkCanvas 涂鸦板

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(媒体类) 通过处理 Pointer 相关事件实现一个简单的涂鸦板 InkCanvas 基础知识 示例1.演示如何通过 Pointer 相关事件的处理,来实现一个简单的涂鸦板Controls/MediaControl/InkSimple.xaml <Page x:Class="Windows10.Controls.MediaControl.InkSimple" xmlns="http://s

HTML5实现涂鸦板

最近闲的,看了看html5,强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能有:画画,改色,调整画笔大小 html5的绘图可以分为点,线,面,圆,图片等,点和线,这可是所有平面效果的基点,有了这两个东西,没有画不出来的东西,只有想不到的算法. 先上代码了: html 1 <body style="cursor:pointer"> 2 <canvas id="mycavas" width="1024" heigh

Qt入门学习——Qt Creator 中 ui 文件和 Qt 代码关系

通过<Qt Creator的使用>的学习,我们可以借助 Designer(界面设计器)快速设计界面. 此例子 ui 内容如下(只是简单添加了一个按钮): 工程的代码目录结构如下: 最终在工程所在目录会生成一个 ui 文件: 此 ui 文件实际上是xml 文件: 当我们编译 Qt 程序代码,Qt Creator 用 uic 工具把 ui 文件的内容转换成 C++ 代码,在工程目录同一级目录的 build- 目录下自动生成 ui_类名.h 文件,如本例子中的 ui_mywidget.h,是由 my

Android关于创建涂鸦板过程中出现的小问题

我前一段时间在制作涂鸦板的过程中在处理橡皮擦功能上碰上了一些小问题,网上部分资源提到的实现方法和我下面说到的橡皮擦基本方法实现思路大仿类似,以下是基本思路: 橡皮擦就是用和画布颜色一致颜色的画笔在屏幕触摸,实现橡皮擦的功能. 1)初始化画笔,并且设置画笔的颜色为白色(这里其实要设置为画布的颜色). 2)设置画笔的大小为合适的大小. 3)用一个变量记住橡皮擦的颜色,用于在其他操作后重新使用橡皮擦. 以上为简易的橡皮擦主要是使用和画布相同的的颜色来覆盖,但当背景图为一张照片(背景图)时是不可行的,因