Java学习记录 AWT绘图篇

浅浅的花香味﹌ 2023-09-30 13:47 19阅读 0赞

## 绘制图形 ##

### Canvas画布类 ###

> **Class Canvas**
> 
> java.lang.Object  
> java.awt.Component  
> java.awt.Canvas

用来 绘制图形 或 捕获用户输入的事件。绘制图形需要绘图方法实现绘制图形

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>paint(Graphics g)</td> 
   <td>绘图</td> 
  </tr> 
  <tr> 
   <td>repaint(Graphics g)</td> 
   <td>重新绘图（刷新</td> 
  </tr> 
 </tbody> 
</table>

### Graphics绘图类 ###

> **Class Graphics**
> 
> java.lang.Object  
> java.awt.Graphics

Graphics绘图类 是所有图形的抽象基类，它提供了绘图常用的方法

<table> 
 <thead> 
  <tr> 
   <th>图形</th> 
   <th>方法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>弧形</td> 
   <td>drawArc(int x , int y , int width , int height , int startAngle , int arcAngle)</td> 
  </tr> 
  <tr> 
   <td>直线</td> 
   <td>drawLine(int x1 , int y1 , int x2 , int y2)</td> 
  </tr> 
  <tr> 
   <td>椭圆</td> 
   <td>drawOval(int x , int y , int width , int height)</td> 
  </tr> 
  <tr> 
   <td>多边形</td> 
   <td>drawPolygon(int[] xPoints , int[] yPoints , int nPoints)</td> 
  </tr> 
  <tr> 
   <td>多边线</td> 
   <td>drawPolyline(int[] xPoints , int[] yPoints , int nPoints)</td> 
  </tr> 
  <tr> 
   <td>矩形</td> 
   <td>drawRect(int x , int y , int width , int height)</td> 
  </tr> 
  <tr> 
   <td>圆角矩形</td> 
   <td>drawRoundRect(int x , int y , int width , int height , int arcWidth, int arcHeight)</td> 
  </tr> 
  <tr> 
   <td>实心弧形</td> 
   <td>fillArc(int x , int y , int width , int height , int height , int startAngle , int arcAngle)</td> 
  </tr> 
  <tr> 
   <td>实心椭圆</td> 
   <td>fillOval(int x , int y , int width , int height)</td> 
  </tr> 
  <tr> 
   <td>实心多边形</td> 
   <td>fillPolygon(int[] xPoints , int[] yPoints , int nPoints)</td> 
  </tr> 
  <tr> 
   <td>实心矩形</td> 
   <td>fillRect(int x , int y , int width , int height)</td> 
  </tr> 
  <tr> 
   <td>实心圆角矩形</td> 
   <td>fillRoundRect(int x , int y , int width , int height , int arcWidth, int arcHeight)</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>坐标X</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>坐标Y</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>宽度</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>高度</td> 
  </tr> 
  <tr> 
   <td>startAngle</td> 
   <td>起始角度</td> 
  </tr> 
  <tr> 
   <td>arcAngle</td> 
   <td>相对起始角度的弧的角度范围</td> 
  </tr> 
  <tr> 
   <td>xPoints</td> 
   <td>X坐标的数组</td> 
  </tr> 
  <tr> 
   <td>yPoints</td> 
   <td>Y坐标的数组</td> 
  </tr> 
  <tr> 
   <td>nPoints</td> 
   <td>总数</td> 
  </tr> 
  <tr> 
   <td>arcWidth</td> 
   <td>四角圆弧的水平直径</td> 
  </tr> 
  <tr> 
   <td>arcHeight</td> 
   <td>四角圆弧的垂直直径</td> 
  </tr> 
 </tbody> 
</table>

### Graphics2D新绘图类 ###

> **Class Graphics2D**
> 
> java.lang.Object  
> java.awt.Graphics  
> java.awt.Graphics2D

Graphics类的扩展 Graphics2D新绘图类，它必须要 draw()和fill() 方法 绘图  
方法的参数需要Shape图形接口实现绘图（接口在 java.awt.geom 包下

<table> 
 <thead> 
  <tr> 
   <th>抽象方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>draw(Shape form)</td> 
   <td>绘制图形</td> 
  </tr> 
  <tr> 
   <td>fill(Shape form)</td> 
   <td>填充图形</td> 
  </tr> 
 </tbody> 
</table>

form：Shape图形接口的对象

### 代码绘制流程 ###

> 1.  创建窗体对象
> 2.  创建 Canvas画布类 并添加入窗体容器里
> 3.  调用 Canvas画布类中 paint(Graphics g)方法
> 4.  调用 paint(Graphics g)方法 中的 Graphics对象 或 创建Graphics2D绘图对象
> 5.  调用 绘图的抽象方法 实现绘图
> 
> 方式二：（从步骤4开始，适合批量绘图）
> 
> 1.  实例 java.awt.geom包 中的图形类，赋值至 Shape接口 对象
> 2.  传参 调用 Graphics2D类 中的 draw() 或 fill() 方法 实现绘图

大致例子：

import javax.swing.*;
    import java.awt.*;
    import java.awt.geom.Ellipse2D;
    import java.awt.geom.Rectangle2D;
    import java.awt.geom.RectangularShape;
    
    public class DrawFrame extends JFrame {
        
    
        private Container c = getContentPane();
    
        public DrawFrame(){
        
            setBounds(400 , 300 , 360 , 160);
            setDefaultCloseOperation(3);
    
            //Canvas匿名画布类 重写paint()绘图方法
            c.add(new Canvas(){
        
               @Override
               public void paint(Graphics g){
        
                   Graphics2D g2 = (Graphics2D) g;
    //方法一
                   g2.drawRoundRect(10 , 5 , 100 , 100 , 10 , 10);
                   g2.fillOval(20 , 15 , 80 , 80);
    //方法二
                   //声明图形数组
                   Shape[] shapes = new Shape[4];
                   //以double精度创建
                   //绘制圆
                   shapes[0] = new Ellipse2D.Double(120, 5 , 100 ,100);
                   //绘制矩形
                   shapes[1] = new Rectangle2D.Double(230 ,5 ,100 ,100);
                    //绘制矩形
                   shapes[2] = new Rectangle2D.Double(130 ,15 ,80 ,80);
                   //绘制圆
                   shapes[3] = new Ellipse2D.Double(240 ,15 ,80 ,80);
                   for(Shape tmp : shapes){
        
                       //Rectangle2D bounds = tmp.getBounds2D();    （Rectangle2D是RectangularShape的子类
                       //RectangularShape类 用来查询和修改矩形框架的类
                       RectangularShape bounds = tmp.getBounds2D();
                       if(bounds.getWidth() == 80){
        
                           //第二组图形创建
                           g2.fill(tmp);
                       }else{
        
                           //第一组图形创建
                           g2.draw(tmp);
                       }
                   }
               }
            });
    
        }
    
        public static void main(String[] args) {
        
            new DrawFrame().setVisible(true);
        }
    }

运行结果：  
![img][]

## 绘图属性 ##

### 颜色 ###

> **Class Color**
> 
> java.lang.Object  
> java.awt.Color

Color类 提供设置颜色的对象  
**构造方法**

Color(int R , int G , int B)  
Color(int RGB)

**参数说明**

> **R：** 红色颜色值  
> **G：** 绿色颜色值  
> **B：** 蓝色颜色值  
> **RGB：** 组合RGB颜色值

**Color常量值** 有已定义好的颜色对象，可直接调用（自行API查

### 画笔 ###

> **Class BasicStroke**
> 
> java.lang.Object  
> java.awt.BasicStroke

BasicStroke类 为图形轮廓定义基本渲染属性（定义边线属性  
**实现前提需要Stroke接口实现类！！！**

**构造方法**

BasicStroke()
    BasicStroke(float width)
    BasicStroke(float width , int cap , int join)
    BasicStroke(float width , int cap , int join , float miterlimit)
    BasicStroke(float width , int cap , int join , float miterlimit , float[] dash , float dash_phase)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>画笔宽度</td> 
  </tr> 
  <tr> 
   <td>cap</td> 
   <td>线端点的装饰</td> 
  </tr> 
  <tr> 
   <td>join</td> 
   <td>应用在路径线段交会处的装饰</td> 
  </tr> 
  <tr> 
   <td>miterlimit</td> 
   <td>斜接处的剪裁限制</td> 
  </tr> 
  <tr> 
   <td>dash</td> 
   <td>虚线模式的数组</td> 
  </tr> 
  <tr> 
   <td>dash_phase</td> 
   <td>开始虚线模式的偏移量</td> 
  </tr> 
 </tbody> 
</table>

CAP参数 3个常量及标识  
![img][img 1]  
JOIN参数 3常量及标识  
![img][img 2]

**代码实现流程：**

> 1.  创建Stroke接口对象，实例BasicStroke对象
> 2.  设置画笔 setStroke(Stroke)方法

大致例子：

import javax.swing.*;
    import java.awt.*;
    
    public class BrushTest extends JFrame {
        
        public BrushTest(){
        
            setBounds(400 ,300 ,300 ,230);
            setDefaultCloseOperation(3);
            add(new MyCanvas());
        }
    
        class MyCanvas extends Canvas{
        
            @Override
            public void paint(Graphics g) {
        
                super.paint(g);
                Graphics2D g2 = (Graphics2D)g;
    
                Stroke[] s = {
        
                        new BasicStroke(10 , BasicStroke.CAP_ROUND ,BasicStroke.JOIN_ROUND),
                        new BasicStroke(10 , BasicStroke.CAP_BUTT , BasicStroke.JOIN_ROUND),
                        new BasicStroke(10 , BasicStroke.CAP_SQUARE , BasicStroke.JOIN_ROUND),
                        new BasicStroke(10 , BasicStroke.CAP_BUTT , BasicStroke.JOIN_BEVEL)
                };
    
            //    图形No.1
                g2.setStroke(s[0]);
                g2.drawLine(10,10 , 230,10);
                g2.setStroke(s[1]);
                g2.drawLine(10,30 , 230,30);
                g2.setStroke(s[2]);
                g2.drawLine(10,50 , 230,50);
    
            //    图形No.2
                //更改颜色
                g2.setColor(Color.CYAN);
                g2.setStroke(s[3]);
                int[]   x = {
        20 ,200 ,20 ,200},
                         y = {
        80 ,80 ,180 ,180};
                g2.drawPolyline(x , y , 4);
            }
        }
    
        public static void main(String[] args) {
        
            new BrushTest().setVisible(true);
        }
    }

运行结果：  
![img][img 3]

## 绘制文本 ##

### 设置字体 ###

> **Class Font**
> 
> java.lang.Object  
> java.awt.Font

Font类 封装字体的大小、样式等属性  
构造方法

Font(String naem , int style , int size)

> **name：** 字体名称  
> **style：** 字体样式  
> **size：** 字体大小

<table> 
 <thead> 
  <tr> 
   <th>字体样式</th> 
   <th>常量</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>普通</td> 
   <td>PLAIN</td> 
  </tr> 
  <tr> 
   <td>粗体</td> 
   <td>BOLD</td> 
  </tr> 
  <tr> 
   <td>斜体</td> 
   <td>ITALIC</td> 
  </tr> 
  <tr> 
   <td>粗体&amp;斜体</td> 
   <td>ITALIC | BOLD</td> 
  </tr> 
 </tbody> 
</table>

### 显示文字 ###

Graphics2D提供了 drawString()方法 ，可以抛开 JLable类 写入窗体的方法

（Graphics2D | Graphics）drawString(String str , int x , int y)
    （Graphics2D ）drawString(String str , float x , float y)

> **str：** 文本  
> **x：** 坐标X  
> **y：** 坐标Y

import javax.swing.*;
    import java.awt.*;
    
    //4.绘制文本
    public class DrawTextTest extends JFrame {
        
    
        public DrawTextTest() {
        
            setBounds(400, 300, 230, 150);
            setDefaultCloseOperation(3);
    
            add(new Canvas() {
        
                @Override
                public void paint(Graphics g) {
        
                    super.paint(g);
                    Graphics2D g2 = (Graphics2D) g;
                    Font[] f = {
        
                            new Font("微软雅黑", Font.BOLD, 23),
                            new Font("微软雅黑", Font.ITALIC, 23),
                            new Font("微软雅黑", Font.ITALIC | Font.BOLD, 23)
                    };
    
                    g2.setFont(f[0]);
                    g2.drawString("Sanscan12" , 20 , 30);
                    g2.setFont(f[1]);
                    g2.drawString("Sanscan12" , 20 , 60);
                    g2.setFont(f[2]);
                    g2.drawString("Sanscan12" , 20 , 90);
                    
                }
            });
        }
    
        public static void main(String[] args) {
        
            new DrawTextTest().setVisible(true);
        }
    }

运行结果：  
![img][img 4]

## 绘制图片 ##

Graphics提供了 drawImage()方法，可以进行绘制图片处理图片，抛开 JLable类 写入窗体的方法

drawImage(Image img , int x , int y , ImageObserver observer)

> **img：** 图片对象  
> **x：** 坐标X  
> **y：** 坐标Y  
> **observer：** 窗体/容器

### 图像处理 ###

#### 缩放 ####

重写drawImage()方法，区别6个参数，要原有初始大小的图片

drawImage(Image img , int x , int y , int width , int height , ImageObserver observer)

> **width：** 图片新宽度  
> **height：** 图片新高度

import javax.swing.*;
    import java.awt.*;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    
    //2.缩放
    // Main类调用 该实例
    public class SizeTest extends Canvas {
        
    
        int W , H ;
        Image image;
        static int count = 0;
        static JButton[] jb = {
        
                new JButton("放大"),
                new JButton("缩小")
        };
    
        public SizeTest(){
        
            this.image = new ImageIcon("Image1.png").getImage();
            this.W = image.getWidth(this);
            this.H = image.getHeight(this);
    
            Canvas c = this;
            //添加响应
            // 放大
            jb[0].addActionListener(new ActionListener() {
        
                @Override
                public void actionPerformed(ActionEvent e) {
        
                    count+=1;
                    c.repaint();
                }
            });
            //缩小
            jb[1].addActionListener(new ActionListener() {
        
                @Override
                public void actionPerformed(ActionEvent e) {
        
                    count-=1;
                    c.repaint();
                }
            });
        }
    
        @Override
        public void paint(Graphics g) {
        
            super.paint(g);
            Graphics2D g2 = (Graphics2D)g;
            g2.drawImage(image , 0 , 0 ,W+count , H+count , this);
        }
    
        public static JButton[] getJButtonAll(){
        
            return jb;
        }
    }

运行结果：  
![在这里插入图片描述][1fa653c1c4874398b695e0da8f070df8.png]

#### 翻转 ####

重写drawImage()方法，区别10个参数，水平垂直翻转的作用

drawlmage(Image img , int dx1 , int dy1 , int dx2 , int dy2 , int sx1 , int sy1 , int sx2 , int sy2 , ImageObserver observer)

> **dx1/dy1：** 目标矩形对应角XY坐标  
> **dx2/dy2：** 目标矩形对应角XY坐标  
> **sx1/sy1：** 源矩形左上角XY坐标  
> **sx2/sy2：** 源矩形右下角XY坐标

![img][img 5]

运行结果：  
![img][img 6]

#### 旋转 ####

重写drawImage()方法，区别6个参数，旋转的前提需要调用Graphics2D类的rotate()方法，进行旋转

drawImage(Image img , int x , int y , int width , int height , ImageObserver observer)

方法  
rotate(double thete)  
thete：旋转弧度

> 参数的弧度值可以使用Math类的toRadians()方法将角度转换为弧度（近似值）

import javax.swing.*;
    import java.awt.*;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    
    //2.旋转
    // Main类调用 该实例
    public class WhirlTest extends Canvas {
        
    
        int W , H ;
        Image image;
        static int count = 0;
        static JButton[] jb = {
        
                new JButton("左转"),
                new JButton("右转")
        };
    
        public WhirlTest(){
        
            this.image = new ImageIcon("Image1.png").getImage();
            this.W = image.getWidth(this);
            this.H = image.getHeight(this);
            Canvas c = this;
    
            //添加响应
            // 左
            jb[0].addActionListener(new ActionListener() {
        
                @Override
                public void actionPerformed(ActionEvent e) {
        
                    count++;
                    c.repaint();
                }
            });
            //右
            jb[1].addActionListener(new ActionListener() {
        
                @Override
                public void actionPerformed(ActionEvent e) {
        
                    count--;
                    c.repaint();
                }
            });
        }
    
        @Override
        public void paint(Graphics g) {
        
            super.paint(g);
            Graphics2D g2 = (Graphics2D)g;
            //toRadians：以度为单位的角度转换为以弧度（近似值）
            g2.rotate(Math.toRadians(count));
            g2.drawImage(image , 0 , 0 ,W , H , this);
        }
    
        public static JButton[] getJButtonAll(){
        
            return jb;
        }
    }

运行结果：  
![在这里插入图片描述][fe8e3d0c29c44d3a9065097cf705260a.png]

#### 倾斜 ####

重写drawImage()方法，区别6个参数，旋转的前提需要调用Graphics2D类的shear()方法，实现倾斜

drawImage(Image img , int x , int y , int width , int height , ImageObserver observer)

方法  
shear(double shx , double shy)  
**shx：** 水平倾斜量 ； **shy：** 垂直倾斜量

![img][img 7]

运行结果：  
![在这里插入图片描述][bdb7ba8c27eb4190a7f1f296b693bafc.png]

### 处理Main执行 ###

以上 图片处理 代码需要Main类执行

import javax.swing.*;
    import java.awt.*;
    
    //1.图形显示
    public class Main extends JFrame {
        
    
        //public JButton
        //        jb1 = new JButton("+"),
        //        jb2 = new JButton("-");
    
        //public Canvas canvas = null;
    
        public Main(Canvas c , JButton jb1 ,JButton jb2){
        
            setBounds(400 , 300 , 666 , 600);
            setDefaultCloseOperation(3);
            JPanel jp = new JPanel();
            jp.add(jb1);
            jp.add(jb2);
            add(jp , BorderLayout.SOUTH);
            add(c);
        }
    
    
        public static void main(String[] args) {
        
            /*  自行实例
             *   1.GraphTest    //显示图片
             *   2.SizeTest     //放大与缩小
             *   3.TurnTest    //翻转
             *   4.WhirlTest    //旋转
             *   5.TiltTest     //倾斜
             * */
             Canvas canvas = new TiltTest();//更改实例对象即可
             JButton[]  jb = TiltTest.getJButtonAll();//更改类
            new Main(canvas , jb[0] , jb[1]).setVisible(true);
        }
    }
    123456789101112131415161718192021222324252627282930313233343536

[img]: https://img-blog.csdnimg.cn/img_convert/15657d1f5ff48d2009a2831c21936de6.png
[img 1]: https://img-blog.csdnimg.cn/img_convert/394025a3a191fee8e3604a2409401edd.png
[img 2]: https://img-blog.csdnimg.cn/img_convert/2ca491152098d4a57b1c4bdfd1d1203e.png
[img 3]: https://img-blog.csdnimg.cn/img_convert/13bcff04605c9dfbd37b89297e537f5f.png
[img 4]: https://img-blog.csdnimg.cn/img_convert/c2af9af16a4d0df8d1aa4eda7d8dcc7d.png
[1fa653c1c4874398b695e0da8f070df8.png]: https://img-blog.csdnimg.cn/1fa653c1c4874398b695e0da8f070df8.png
[img 5]: https://img-blog.csdnimg.cn/img_convert/dd8f4270ac63c8d27e03d0206f56e769.png
[img 6]: https://img-blog.csdnimg.cn/img_convert/d633ae888f3a54d803edcd60229e2606.gif
[fe8e3d0c29c44d3a9065097cf705260a.png]: https://img-blog.csdnimg.cn/fe8e3d0c29c44d3a9065097cf705260a.png
[img 7]: https://img-blog.csdnimg.cn/img_convert/42b3ab83a79d8e8cfc60b3910e2b52fc.png
[bdb7ba8c27eb4190a7f1f296b693bafc.png]: https://img-blog.csdnimg.cn/bdb7ba8c27eb4190a7f1f296b693bafc.png