简易涂鸦板

delegate.h

@property (retain, nonatomic) UIWindow *window;

delegate.m

-(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;

}

创建LineMode类

LineMode.h

@interface LineModel : NSObject

@property(nonatomic,retain)UIBezierPath *path; //使用贝塞尔曲线记录触摸轨迹

@property(nonatomic,retain)UIColor *color ; //线条颜色

@property(nonatomic,assign)CGFloat width; //线条宽度

@end

LineMode.m

-(void)dealloc{

[_path release];

[_color release];

[super dealloc];

}

创建属于UIView的PaintView

PaintView.h

@property(nonatomic,retain)NSMutableArray *allLines; //用于保存画板上所有线条对象.

@property(nonatomic,retain)UIColor *lineColor; //当前线条的颜色

@property(nonatomic,assign)CGFloat lineWidth; //当前线条的宽度

-(void)undoLastDrawing; //撤销上次绘制

-(void)allClean; //清空画板

PaintView.m

#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 *aTouch = touches.anyObject;

CGPoint startPoint = [aTouch 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 *aTouch = touches.anyObject;

CGPoint currentPoint =[aTouch locationInView:self.superview];

//获取对应的线条模型(在触摸移动的过程中,数组的最后一个对象对应当前正在绘制的曲线)

LineModel *aLine = self.allLines.lastObject;

[aLine.path addLineToPoint:currentPoint];

[self setNeedsDisplay]; //调用此方法是通知视图,绘制界面,一旦调用此方法,系统就会自动调用drawRect:方法来绘制界面.

}

// 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]; //开始绘制曲线

}

}

-(void)undoLastDrawing{

[self.allLines removeLastObject];

[self setNeedsDisplay]; //移除数组中的最后一条曲线对象,并重绘界面.

}

-(void)allClean{

[self.allLines removeAllObjects];

[self setNeedsDisplay];

}

@end

创建的MainViewController

MainViewController.m

-(void)loadView{

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

painView.backgroundColor = [UIColor whiteColor];

painView.lineWidth = 5;

painView.lineColor = [UIColor blackColor];

self.view = painView;

[painView release];

}

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view.

//创建菜单按钮

UIButton *menuButton = [UIButton buttonWithType:UIButtonTypeSystem];

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

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

[menuButton addTarget:self action:@selector(handleMenuButtonAction:) forControlEvents:UIControlEventTouchUpInside];

[self.view addSubview:menuButton];

UITextField *textField = [[UITextField alloc]initWithFrame:CGRectZero];

textField.tag = 123;

[self.view addSubview:textField];

[textField release];

UIView *inputView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 60)];

inputView.backgroundColor = [UIColor whiteColor];

textField.inputView = inputView;

[inputView release];

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

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

CGFloat height = width;

CGFloat originY = (60 - height) / 2;

CGFloat originX = 20;

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

UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];

button.tag = 100+i;

button.frame = CGRectMake(originX+(width+originX)*i, originY, width, height);

[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.layer.cornerRadius = width / 2.0;

button.layer.masksToBounds = YES; //按指定的半径裁剪视图.

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

[inputView addSubview:button];

}

}

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

//获取textField

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

//判断如果textField当前是第一响应者,则撤销其第一响应者权限,否则让其成为第一响应者.

if (textField.isFirstResponder) {

[textField resignFirstResponder];

}else{

[textField 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;

}

}

时间: 2024-07-31 07:00:34

简易涂鸦板的相关文章

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

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

Android应用开发实例篇(1)-----简易涂鸦板

链接地址:http://www.cnblogs.com/lknlfy/archive/2012/03/03/2378328.html 一.概述 这次要做一个简单的涂鸦板应用,以前在Qt上实现过,突然想到要把它在Android上实现,呵呵,既简单又有趣. 二.实现 新建工程MyWall,修改/res/layout/main.xml文件,在里面添加一个SurfaceView和两个Button,用到了RelativeLayout布局,完整的main.xml文件如下: 1 <?xml version=&qu

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

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

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

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

背水一战 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

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&

JSP+Servlet+JavaBean传统方式实现简易留言板制作(注册、登录、留言)

学JavaEE也有一段时间了,跟着老师和教材做了不少东西,但是一直以来没时间写博客,今天就把以前写的一个简易留言板简单发一下吧. 开发工具 主要用的开发工具为 MyEclipse(2014.2016均可).Tomcat 7.0.SQL Server 2016.SSMS数据库管理工具.浏览器等. 开发环境 开发环境为windows系统,已安装配置Java最新版开发环境. 主要功能与语言 登录.注册.并可以在留言板留言,所有留言内容均可见. 所采用JSP+Servlet+JavaBean传统方式,仅