第19章绘图——窗框与画布.ppt

第19章 绘图窗框与画布,能力目标： 掌握Graphics类的绘图、绘文字方法，并能选取不同的颜色和字体进行绘制。 能在窗框和画布上绘制图形和图像。 能编写手工绘制直线段、矩形、圆和椭圆的应用程序。,内容介绍,19.1 任务预览 19.2 窗框绘图 19.3 颜色与字体 19.4 Canvas画布绘图 19.5 光标类Cursor 19.6 本章小结 19.7 实训19：绘制图形,19.1 任务预览,本章实训程序运行结果：,19.2 窗框绘图,【例19-1】编程：使用窗框绘制太极图和图像文件。 分析：线框状太极图由5部分组成：一个大圆、内部上下平滑连接的两个半圆、还有两个小圆，其中下面的小圆为实心的（填充的）。设大圆的直径为2r，则两个半圆的直径为r，小圆的直径为r/4。 import javax.swing.*; import java.awt.*; class Frame1 extends JFrame Image img = this.getToolkit(). createImage(“cock.jpg“); public Frame1() this.setTitle(“绘制图形图像“); this.setBounds(100, 100, 350, 200); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setVisible(true); ,public void paint(Graphics g) /绘制方法 int width = this.getWidth(); /窗框宽度 int height = this.getHeight(); /窗框高度 int r = (height-50)/2; /太极图半径 g.setColor(Color.WHITE); /设置画笔为白色 g.fillRect(0, 0, width, height); /填充矩形界面(白底色) /绘制线框状太极图： g.setColor(Color.BLACK); g.drawOval(10, 40, 2*r, 2*r); /太极图外圆 g.drawArc(10+ r/2, 40, r, r, 90, 180); /上部半圆(弧) /画弧方法后2个参数：弧起始角、弧度 g.drawArc(10+r/2, 40+r, r, r, -90, 180); /下部半圆(弧) g.drawOval(10+(7*r)/8, 40+3*r/8, r/4, r/4); /上部小圆 g.fillOval(10+(7*r)/8, 40+11*r/8, r/4, r/4); /下部实心小圆 g.drawImage(img, 40+2*r, 40, 2*r, 2*r, this); /绘图像 public class Example1 /主类,修改例19-1,绘制黑白型太极图，需改代码： /绘制黑白填充型太极图： g.setColor(Color.BLACK); /设置画笔为黑色 g.drawArc(10, 40, 2*r, 2*r, 90, 180); /左半圆 g.fillArc(10, 40, 2*r, 2*r, -90, 180); /右半黑圆 g.fillOval(10+r/2, 40, r, r); /上半黑圆 g.setColor(Color.WHITE); /设置画笔为白色 g.fillOval(10+r/2, 40+r, r, r); /下部白圆 g.fillOval(10+(7*r)/8, 40+3*r/8, r/4, r/4); /上部小白圆 g.setColor(Color.BLACK); /设置黑色 g.fillOval(10+(7*r)/8, 40+11*r/8, r/4, r/4); /下部小黑圆,19.2.1 图形上下文类Graphics,Graphics类是图形上下文（环境）抽象基类。 Graphics对象封装了绘制颜色、字体、坐标系等信息，可简单地理解为一支“画笔”。 Graphics类部分方法介绍如下： （1）void setColor(Color c)：设置“画笔”颜色。 （2）Color getColor() （3）void drawLine(int x1, int y1, int x2, int y2) （4）void drawRect(int x, int y, int width, int height) （5）void fillRect(int x, int y, int width, int height) （6）void drawOval(int x, int y, int width, int height)：绘制椭圆框。如果宽、高相等，则变成一个圆。如： g.drawOval(10, 40, 2*r, 2*r); /太极图外圆 （7）void fillOval(int x, int y, int width, int height)：绘填充椭圆。 如绘制太极图下部实心小圆： g.fillOval(10+(7*r)/8, 40+11*r/8, r/4, r/4);,（8）void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)：绘制外接指定矩形的椭圆弧。最后2个参数是弧的起始角和跨越的角度（即弧度）。如： g.drawArc(10+ r/2, 40, r, r, 90, 180); /太极图上部半圆(弧) g.drawArc(10+r/2, 40+r, r, r, -90, 180); /太极图下部半圆(弧) （9）void fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) （10）void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) （11）void fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight) （12）void drawPolygon(int xPoints, int yPoints, int nPoints) （13）void fillPolygon(int xPoints, int yPoints, int nPoints) （14）void setFont(Font font) （15）Font getFont() （16）void drawString(String str, int x, int y) 关于Graphics类的drawImage方法，详见18章18.6节。,19.2.2 工具包类Toolkit,例19-1程序由图像文件创建图像对象时，使用窗框的getToolkit方法，方法返回Toolkit（工具包）类的对象，然后再调用createImage方法创建图像对象。 抽象类Toolkit位于java.awt包，关于构建图像的方法： （1）Image createImage(String filename) （2）Image createImage(URL url) （3）Image getImage(String filename) （4）Image getImage(URL url) （5）static Toolkit getDefaultToolkit()：获取默认的工具包。 创建图像对象也可调用方法（5）和（2）实现，如： Image img = Toolkit.getDefaultToolkit().createImage(“cock.jpg“);,19.2.3 在窗框中手动绘图,【例19-2】编写在窗框中手动绘图程序。 import javax.swing.*; import java.awt.*; import java.awt.event.*; class Frame2 extends JFrame public Frame2() this.setTitle(“手动绘制直线“); this.setBounds(100, 100, 200, 200); this.setDefaultCloseOperation(); this.addMouseListener(new MouseHandler(); this.setVisible(true); ,/鼠标事件监听处理类(窗框内部类)：拖动鼠标绘直线 class MouseHandler extends MouseAdapter int x1, y1, x2, y2; public void mousePressed(MouseEvent e) x1 = e.getX(); y1 = e.getY(); public void mouseReleased(MouseEvent e) x2 = e.getX(); y2 = e.getY(); Graphics g = getGraphics(); g.drawLine(x1, y1, x2, y2); /绘直线 public void paint(Graphics g) g.setColor(Color.WHITE); g.fillRect(0, 0, this.getWidth(), this.getHeight(); /白底 public class Example2 public static void main(String args) new Frame2(); ,在任意对角方向拖动鼠标都能绘制矩形。 把例19-2中的MouseHandler内部类中的mouseReleased方法修改为如下代码： public void mouseReleased(MouseEvent e) x2 = e.getX(); y2 = e.getY(); Graphics g = getGraphics(); int x, y, width, height; x = x1x2 ? x1 : x2; /左上角x坐标是两点中最小的 y = y1y2 ? y1 : y2; /左上角y坐标是两点中最小的 width = Math.abs(x2 - x1) + 1; /矩形宽度 height = Math.abs(y2 - y1) + 1; /矩形高度 g.drawRect(x, y, width, height); /绘制矩形 ,修改例19-2绘圆,基于圆心、半径方式绘圆，再次修改例19-2程序，更改MouseHandler内部类的鼠标按下和鼠标释放方法： public void mousePressed(MouseEvent e) x1 = e.getX(); y1 = e.getY(); Graphics g = getGraphics(); g.drawOval(x1, y1, 1, 1); /画圆心 public void mouseReleased(MouseEvent e) x2 = e.getX(); y2 = e.getY(); Graphics g = getGraphics(); int dx = x2-x1; int dy = y2-y1; int r =(int)Math.sqrt(dx*dx + dy*dy); /计算圆的半径 g.drawOval(x1-r, y1-r, 2*r, 2*r); /画圆 g.setColor(Color.LIGHT_GRAY); /设置亮灰色 g.drawLine(x1, y1, x2, y2); /画半径 ,19.3 颜色与字体,图形上下文类与颜色有关的方法是：setColor、getColor。 一般组件也有设置、获取前景色和背景色的方法：setForeground、getForeground、setBackground 和getBackground。 颜色类Color的常用构造方法： （1）Color(int red, int green, int blue)：所合成的颜色数多达16兆多（256×256×256），号称真彩色。 （2）Color(int red, int green, int blue, int alpha)：其中alpha定义颜色透明度，0意味完全透明，255则不透明。 常用颜色还可用静态常量表示。如：红色 Color.RED，当然也可用 new Color(255, 0, 0)构建。,19.3.1 颜色类Color,Color类颜色常量,19.3.2 颜色选择器类JColorChooser,javax.swing包的JColorChooser类提供了一个颜色选择器，允许用户选择各种颜色。该类最常用的方法： static Color showDialog(Component component, String title, Color initialColor) 如： Color c = JColorChooser.showDialog(null, “颜色选择器“, Color.WHITE);,19.3.3 字体类Font,字体类Font常用的方法： （1）Font(String name, int style, int size)： 其中样式，取值于Font静态常量PLAIN、BOLD或ITALIC。 （2）String getFamily()：返回字体的家族名称（字体系列名）。 （3）String getName()：返回字体名称。 （4）int getStyle()：返回字体的样式。 （5）int getSize()：返回字体的字号（大小）。 （6）String toString()：将字体对象转换为字符串的表示形式。 例如：对象new Font(“宋体”, Font.PLAIN , 13) 的字符串表示： “java.awt.Fontfamily=宋体,name=宋体,style=plain,size=13”,【例19-3】编写绘制文字的程序：在窗框内绘制不同颜色、不同种类、样式和字号的文字。, public void paint(Graphics g) /绘制方法 g.setColor(Color.WHITE); g.fillRect(0, 0, this.getWidth(), this.getHeight(); /白底色 Font font; font = new Font(“Times New Roman“, Font.ITALIC , 12); g.setFont(font); /设置字体 g.setColor(Color.BLACK); /设置颜色 g.drawString(g.getFont().toString(), 10, 50); /绘制字符串,font = new Font(“宋体“, Font.PLAIN , 13); g.setFont(font); g.setColor(Color.RED); g.drawString(g.getFont().toString(), 10, 70); font = new Font(“楷体_GB2312“, Font.BOLD | Font.ITALIC, 14); g.setFont(font); g.setColor(Color.GREEN); g.drawString(g.getFont().toString(), 10, 90); font = new Font(“仿宋_GB2312“, Font.BOLD, 15); g.setFont(font); g.setColor(Color.BLUE); g.drawString(g.getFont().toString(), 10, 110);,font = new Font(“黑体“, Font.PLAIN, 16); g.setFont(font); g.setColor(new Color(0, 128, 255); g.drawString(g.getFont().toString(), 10, 130); font = new Font(“新宋体“, Font.PLAIN, 17); g.setFont(font); g.setColor(new Color(255, 0, 255); g.drawString(g.getFont().toString(), 10, 150); public class Example3 /主类 public static void main(String args) new Frame3(); ,19.4 Canvas画布绘图,画布：专用于绘图的组件。画布不是容器，不能单独存在。 【例19-4】编写在画布中手动绘图程序。 import javax.swing.*; import java.awt.*; import java.awt.event.*; class Frame4 extends JFrame /窗框类 Canvas canvas = new Canvas(); /画布 public Frame4() this.setTitle(“画布手绘直线“); this.setBounds(100, 100, 200, 200); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); canvas.addMouseListener(new MouseHandler(); this.add(canvas, BorderLayout.CENTER); this.setVisible(true); ,/鼠标事件监听处理类(窗框内部类)：拖动鼠标绘直线 class MouseHandler extends MouseAdapter int x1, y1, x2, y2; /直线段起点和终点坐标 public void mousePressed(MouseEvent e) x1 = e.getX(); y1 = e.getY(); public void mouseReleased(MouseEvent e) x2 = e.getX(); y2 = e.getY(); Graphics g = canvas.getGraphics(); g.drawLine(x1, y1, x2, y2); public class Example4 public static void main(String args) new Frame4(); ,【例19-5】编写在画布中手动绘图的程序，通过工具栏不同的按钮可选择绘制直线、矩形和圆，并具有选择擦除图形的功能。,class Frame5 extends JFrame JToolBar toolbar = new JToolBar(“工具栏“); int buttonNum = 1; /按钮编码 JButton buttonLine = new JButton(“画直线“); JButton buttonRect = new JButton(“画矩形“); JButton buttonCircle = new JButton(“画圆“); JButton buttonErase = new JButton(“选择擦除“); MyCanvas canvas = new MyCanvas(); public Frame5() /构造方法 this.setTitle(“选择绘制直线、矩形或圆“); this.setBounds(100, 100, 300, 250); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); initialize(); this.setVisible(true); ,public void initialize() toolbar.setBackground(Color.LIGHT_GRAY); toolbar.add(buttonLine); buttonRect); this.add(toolbar, BorderLayout.NORTH); this.add(canvas, BorderLayout.CENTER); buttonLine.addActionListener(new ActionHandler(); /按钮动作事件监听处理类(窗框内部类)： class ActionHandler implements ActionListener public void actionPerformed(ActionEvent e) canvas.setCursor(Cursor.getDefaultCursor(); /缺省光标 if (e.getSource() = buttonLine) buttonNum = 1; else if (e.getSource() = buttonRect) buttonNum = 2; else if (e.getSource() = buttonCircle) buttonNum = 3; else if (e.getSource() = buttonErase) buttonNum = 4; canvas.setCursor(new Cursor(Cursor.HAND_CURSOR); /手状光标,/自定义画布类(窗框内部类)： class MyCanvas extends Canvas int x1, y1, x2, y2; public MyCanvas() this.addMouseListener(new MouseHandler(); /画布的鼠标事件监听处理类(画布内部类)： class MouseHandler extends MouseAdapter public void mousePressed(MouseEvent e) x1 = e.getX(); y1 = e.getY(); if (buttonNum = 2 |buttonNum = 3) /画矩形或圆 Graphics g = getGraphics(); /获取画布画笔 g.drawOval(x1, y1, 1, 1); /画第一对角点或圆心 ,public void mouseReleased(MouseEvent e) /释放鼠标键 x2 = e.getX(); y2 = e.getY(); Graphics g = getGraphics(); if (buttonNum = 1) /画直线 g.drawLine(x1, y1, x2, y2); else if (buttonNum = 2) /画对角矩形 int x, y, width, height; x = x1x2 ? x1 : x2; y = y1y2 ? y1 : y2; /两点中最小坐标 width = Math.abs(x2 - x1) + 1; height = Math.abs(y2 - y1) + 1; g.drawRect(x, y, width, height); /画矩形 g.drawOval(x2, y2, 1, 1); /画第二对角点 else if (buttonNum = 3) /若是画圆 int dx = x2-x1; int dy = y2-y1; int r =(int)Math.sqrt(dx*dx + dy*dy); g.drawOval(x1-r, y1-r, 2*r, 2*r); /画圆 g.setColor(Color.LIGHT_GRAY); /设置亮灰色 g.drawLine(x1, y1, x2, y2); /画半径 ,else if (buttonNum = 4) /对角擦除图形 int x, y, width, height; x = x1x2 ? x1 : x2; y = y1y2 ? y1 : y2; g.setColor(Color.WHITE); g.fillRect(x, y, width, height); /用白色填充矩形(擦除) public void paint(Graphics g) /画布绘制方法 g.setColor(Color.WHITE); g.fillRect(0, 0, this.getWidth(), this.getHeight(); public class Example5 /主类 public static void main(String args) new Frame5(); 按下“选择擦除”按钮时，光标变成手指状，当按下其它3个绘图按钮，光标恢复为默认箭头状。,19.5 光标类Cursor,例19-5关于光标形状设置的代码： canvas.setCursor(Cursor.getDefaultCursor(); canvas.setCursor(new Cursor(Cursor.HAND_CURSOR); 光标类Cursor的常用字段和方法： （1）static final int CROSSHAIR_CURSOR：十字光标字段。 （2）static final int DEFAULT_CURSOR：默认光标字段。 （3）static final int HAND_CURSOR：手状光标字段。 （4）static final int MOVE_CURSOR：移动光标字段。 （5）static final int TEXT_CURSOR：文字光标字段。 （6）static final int WAIT_CURSOR：等待光标字段。 （7）Cursor(int type)：用指定光标类型构造光标对象。 （8）static Cursor getDefaultCursor()：返回系统默认光标对象。 设置画布默认光标也可用下面语句实现： canvas.setCursor(new Cursor(Cursor.DEFAULT_CURSOR);,19.6 本章小结,在窗框、画布和小程序上绘图，均用到Graphics类。该类提供了一个能在组件上绘图的环境（画笔）。 使用画笔方法，可绘制图形、图像和文字。 绘制图像之前，需要构建图像对象，用到工具包类Toolkit。 通过编写鼠标事件监听处理代码，可在窗框或画布中拖动鼠标手动绘制直线段、矩形、圆和椭圆等图形。还可预先选定颜色和文字进行绘制。 在画布等组件上允许设置光标的形状，例如手指状。,谢谢！ 返回目录 结束放映,