项目8员工创意涂鸦室.

Presentation on theme: "项目8员工创意涂鸦室."— Presentation transcript:

1 项目8员工创意涂鸦室

2 项目创设 本项目将以公司企业文化的涂鸦板为项目背景，灵活的应用Graphics类的方法，绘制二维图形以及对图形进行着色。
可以使学生理解Java二维图形的处理机制，同时可以利用图形制作功能制画出组合图形；还可以利用Font类对页面文字的字体、字形、字号做美化设置 任务 1 创意涂鸦板 任务 2 员工作品赏析

3 本项目的技能目标 Java二维图形 Graphic类的运用 绘制二维图形编程 美化字体编程 JApplet类的运用

4 学习目标 一 三 二 了解Java二维图形制作的基本过程，如paint()方法的使用、Graphics类的方法调用等

5 8.1 任务 1 创意涂鸦板 目标效果 1 必备知识 2 拓展训练 3 实现机制 4

6 8.1.1 目标效果 本任务的目标是为公司员工提供一个可以在闲暇时的娱乐涂鸦板功能 。
目标效果 本任务的目标是为公司员工提供一个可以在闲暇时的娱乐涂鸦板功能 。 整个任务依据Java TCP Socket 通信原理来实现。 该任务执行的目标效果如图8－2所示

7 目标效果 当用户点击涂鸦板中的“调色板”按钮时，系统将弹出颜色面板，这样用户可以自由的从颜色面板中选取需要的颜色进行图画创作,如图8－3所示 ：

8 目标效果 当然如果用户需要修改所做图片，可以利用“橡皮”和“橡皮大小”工具，有选择地涂掉不需要的图画部分，单击“画笔”按钮后继续作图。 当用户单击“保存”按钮时，弹出保存对话框，可以将所创作的图画保存成.bmp文件，以备今后修改或者查阅 ,如图8－4所示 ：

9 目标效果 如果想要打开曾经保存过的图片文件，可以利用“打开”按钮，打开已有文件，将文件调入当前界面，进行修改，修改完毕依然可以保存所做修改 ,如图8－5所示 ：

10 8.1.1 目标效果 如何实现这一涂鸦板的任务，学习者不妨先来思考几个问题 ： 1 2 3 4
目标效果 如何实现这一涂鸦板的任务，学习者不妨先来思考几个问题 ： 1 2 3 4 当用户鼠标在面板上拖动时，如何给取得当前鼠标位置坐标？ 鼠标移动过程中如何实现一个连续的作图轨迹？ 单击“选取颜色”按钮时，颜色对话框是如何得到的？ 怎样将选取的颜色值传给鼠标事件从而画出多种颜色的图画？

11 8.1.2 必备知识 1 Graphics类 2颜色设置 必备知识 3基本图形绘制 paint()方法的使用
必备知识 1 Graphics类 2颜色设置 必备知识 3基本图形绘制 paint()方法的使用

12 形上下文(Graphic context)
必备知识 1 Graphics类 Graphics类是所有图 形上下文(Graphic context) 的抽象基类，因此它是不能直接 实例化的，那么为了使用 Graphics类绘图，就 必须创建其非抽象的子类。 特性

13 8.1.2 必备知识 2 颜色设置 Java通过java.awt.Color类来处理颜色
必备知识 2 颜色设置 Java通过java.awt.Color类来处理颜色 Color类提供了13种预定义颜色常量、2种创建颜色对象的构造函数。 Java采用24位颜色标准，每种颜色由红、绿和蓝三值组成，即采用RGB颜色空间。每个颜色的取值范围在0至255之间，理论上可以组成1600万种以上的颜色。 常用颜色表见后

14 8.1.2 必备知识 2 颜色设置 颜色常量 色彩 RGB值 Color.black 黑色 （0，0，0） Color.blue 兰色
必备知识 2 颜色设置 颜色常量 色彩 RGB值 Color.black 黑色 （0，0，0） Color.blue 兰色 （0，0，255） Color.cyan 青色 （0，255，255） Color.darkGray 深灰色 （64，64，64） Color.gray 灰色 （128，128，128） Color.green 绿色 （0，255，0） Color.lightGray 浅灰色 （182，182，182） Color.magenta 品红色 （255，0，255） Color.orange 桔黄色 （255，200，0） Color.pink 粉红色 （255，17，175） Color.red 红色 （255，0，0） Color.white 白色 （255，255，255） Color.yellow 黄色 （255，255，0）

15 必备知识 基本图形绘制 1．直线绘制 画直线使用Graphics类的drawLine方法。该方法有四个整型参数代表了直线的两个端点坐标。Java定义的一个窗口工作区是以整个屏幕的左上角为坐标原点（0,0），横向为X轴，纵向为Y轴。 画线方法为： drawLine(int x1,int y1,int x2,int y2); 其中（x1，y1）和（x2，y2）表示线段的两个端点，此方法画一个从点（x1,y1）到（x2,y2）的线段。

16 必备知识 3 基本图形绘制 2．矩形绘制 矩形包括普通矩形和圆角矩形，普通矩形就是我们常说的矩形，其相交边都是直角相交，而圆角矩形就是矩形的四个顶角成圆弧状，每个圆弧都是四分之一的椭圆弧所构成。矩形又分边框型风格和填充型风格。 边框型风格普通矩形 drawRect(int x,int y,int width,int height) fillRect(int x,int y,int width,int height) 填充型风格普通矩形 边框型风格圆角矩形 drawRoundRect(int x,int y,int width,int height,int arcWidth,int arcHeight) 填充型风格圆角矩形 fillRoundRect(int x,int y,int width,int height,int arcWidth,int arcHeight)

17 8.1.2 必备知识 3 基本图形绘制 3．多边形绘制 Java中绘制多边形的时候需要提供一组坐标点。
必备知识 3 基本图形绘制 3．多边形绘制 Java中绘制多边形的时候需要提供一组坐标点。 绘制边框型多边形的drawPolygon（）方法 drawPolygon（int xPoints[],int yPoints[],int nPoints） 绘制填充型多边形的fillPolygon（）方法 fillPolygon（int xPoints[],int yPoints[],int nPoints）

18 必备知识 3 基本图形绘制 4．椭圆绘制 在Java中，绘制椭圆形需要提供其外接矩形的左上角坐标和外接矩形的长和宽来作为绘制方法的参数。同样也分为边框型风格和填充型风格。 边框型风格 drawOval(int x,int y,int width,int height) fillOval(int x,int y,int width,int height) 填充型风格

19 必备知识 3 基本图形绘制 3．弧形绘制 利用Graphics对象的drawArc()方法可以画圆弧，利用fillArcz()通过填充前景色实际上可以画出扇形。 drawAcr(int x,int y,int width,int height,int startAngle,int arcAngle) 边框型风格 fillAcr(int x,int y,int width,int height,int startAngle,int arcAngle) 填充型风格

20 必备知识 4 文字输出控制 drawBytes(byte bytes[],int offset,int number,int x,int y) 字节输出方法： drawChars(char chars[],int offset,int number,int x,int y) 字符输出方法： drawString(String string,int x,int y) 字符串输出方法：

21 8.1.3 拓展训练（一） 尝试实现这么一个功能：模仿项目8的任务一，移动鼠标，在窗口中绘制出的彩色矩形。
拓展训练（一） 尝试实现这么一个功能：模仿项目8的任务一，移动鼠标，在窗口中绘制出的彩色矩形。

22 鼠标移动绘图，需要相应鼠标事件，在此需要加入什么接口？
MouseLisntener，MouseMotionListener两个接口 在此，需要考虑如下问题： 鼠标移动绘图，需要相应鼠标事件，在此需要加入什么接口？ 绘图过程中的如何画出彩色图像？ 绘图过程中，如果要绘制矩形、直线等图形，不可避免需要哪些元素？ 开始实战 选择颜色类：JColorChooser类，弹出选色对话框 需取得当前鼠标的坐标值，MouseEvent 类的方法：getX(),getY()方法

23 8.1.3 拓展训练（一） 尝试实现这么一个功能： 移动鼠标，在窗口中绘制出需要的图形，且能够实现对于图形的保存和打开。
拓展训练（一） 尝试实现这么一个功能： 移动鼠标，在窗口中绘制出需要的图形，且能够实现对于图形的保存和打开。

24 Graphics类总结 ①：画直线 drawLine(int x1,int y1,int x2,int y2);
②：画矩形边框 　 drawRect(int x,int y,int width,int height); ③：画椭圆边框　　drawOval(int x,int y,int width,int height); ④：填充矩形　   　fillRect(int x,int y,int width,int height); ⑤：填充椭圆　　   fillOval(int x,int y,int width,int height); ⑥：画图片　　      drawImage(Image img,int x,int y,.....); ⑦：画字符串　　　drawString(String str,int x,int y); ⑧：设置画笔的字体　　setFont(Font font); ⑨：设置画笔的颜色　　setColor(Color c);

25 8.1.3 拓展训练（二） 尝试实现： 在窗口中用鼠标画出无闪烁的图形（主要涉及到BufferedImage 类，图像缓冲区类）
拓展训练（二） 尝试实现： 在窗口中用鼠标画出无闪烁的图形（主要涉及到BufferedImage 类，图像缓冲区类）

26 8.1.4 实现机制 1绘图板任务程序结构 本任务的实现包括2个源文件：AEIMFrame.java和MakePicture.java 。
实现机制 1绘图板任务程序结构 本任务的实现包括2个源文件：AEIMFrame.java和MakePicture.java 。 它们在Eclipse的包（package）视图中的位置如图8－10所示

27 8.1.4 实现机制 2休闲涂鸦板任务程序剖析 涂鸦板任务程序 代码分析 1. MakePicture.java
实现机制 2休闲涂鸦板任务程序剖析 1. MakePicture.java 涂鸦板任务程序 代码分析

28 8.2 任务 2 实现员工作品赏析 目标效果 1 必备知识 2 拓展训练 3 实现机制 4

29 必备知识 1 JApplet的生命周期 必备知识 2 JApplet的启动方法

30 8.2.2 必备知识 1 JApplet的生命周期 小应用程序的生命周期相对于Application而言较为复杂。
init()、start()、stop()和destroy()。 如图8-12

31 8.2.2 必备知识 1 JApplet的生命周期 1. JApplet的主要方法 stop( )方法 init( )方法
start( )方法 destroy( )方法

32 8.2.2 必备知识 1 JApplet的生命周期 2. JApplet的二维图形绘制 paint()方法 update()方法
repaint()方法

33 8.2.2 必备知识 2 JApplet的启动方法 从IE浏览器启动Japplet小程序 在应用程序中启动Japplet小程序 启动方法

34 8.2.3 拓展训练 需要实现的功能： 定义了JApplet的四个方法后，通过调用它的start()方法使得该JApplet启动
拓展训练 需要实现的功能： 定义了JApplet的四个方法后，通过调用它的start()方法使得该JApplet启动

35 实现机制 本任务的实现包括1个源文件：MakePicture.java 。

36 知识巩固 在本项目中我们学习的主要的知识点如下： 1．Graphics类的主要绘图方法； 2．paint()方法的调用时机；
3．调色板ColorChooser类的使用； 4．对于轻量级构件，系统在绘制其外观时的时机； 5．JApplet的生命周期； 6．JApplet的运行方法； 7．在Java中打开IE浏览器时的主要步骤和主要方法。

37 Thank You !