企业官网建设流程全解析

一、项目概述

1.功能介绍

本项目基于Java Swing实现简易图形绘制工具，支持通过鼠标拖拽完成绘制直线、矩形、正方形、三角形，可切换画笔颜色，通过按钮可选择绘制图形类型，完成基础交互式绘图功能

2.核心要点

Java Swing基础组件、BorderLayout边框布局、鼠标监听器、动作监听器、内部访问成员变量、类的继承、引用传递等

3.过程总览

①基础窗口与组件搭建
②容器布局实现
③监听器编写与画笔绑定
④设计绘制图形的坐标逻辑

二、设计流程及思路

Step ①⬆️
创建窗口JFrame，添加属性（Size，Title…）该过程详见"Java Swing图形化编程入门"https://blog.csdn.net/Nie_081017/article/details/163569687?spm=1001.2014.3001.550
创建功能按钮（图形名称，颜色…）

publicclassDrawUI{publicvoidinitUI(){JFramejf=newJFrame("画图工具");jf.setSize(800,800);jf.setDefaultCloseOperation(3);jf.setLocationRelativeTo(null);//功能按钮JButtonjbu1=newJButton("直线");JButtonjbu2=newJButton("矩形");JButtonjbu3=newJButton("三角形");JButtonjbu4=newJButton("正方形");JButtonjbu5=newJButton("等腰三角形");JButtonblue=newJButton("蓝色");JButtonred=newJButton("红色");jf.setVisible(true);}publicstaticvoidmain(String[]args){DrawUIui=newDrawUI();ui.initUI();}}

按钮对象创建完成后，我们先不着急add在jf（窗口）上

Step ②⬆️
在这个项目中我想实现的不仅仅是画出线条和图形，为了更完善，做到功能区与画图区分离的效果，我们在这一步就要用到BorderLayout(边框布局），它可以将整个窗口分区，不过每个区域只能加一个组件，远远达不到我们要加多个按钮组件的需求，所以我们灵活变通一下，将这些按钮全部“打包”进Panel(容器)中，再把Panel放在这个窗口的上部，即BorderLayout.NORTH，这样就满足了边框布局“一个区域只装一个组件”的硬性条件。

⭐注意步骤：在Panel里add所有button➡️在BorderLayout里add（Panel）➡️在jf里add(BorderLayout）
按照这个思路，BorderLayout的方向按需索取
在这里装按钮的Panel在上方就是NORTH，画图区域占据窗口剩余位置，用CENTER则可自动占满空间⬇️

//设置容器panel,把所有button放进panel里打包JPanelpanelnorth=newJPanel();panelnorth.add(jbu1);panelnorth.add(jbu2);panelnorth.add(jbu3);panelnorth.add(jbu4);panelnorth.add(jbu5);panelnorth.add(blue);panelnorth.add(red);//在窗口里add边框布局BorderLayout.NORTH，把panel加进BorderLayout.NORTH里jf.add(panelnorth,BorderLayout.NORTH);

同理可得，由于画图区域只有画板一个部分，我们再自定义一个容器加入画板，绑定至jf

//将画图区域也添加进容器JPaneldrawPanel=newJPanel();drawPanel.setBackground(Color.WHITE);jf.add(drawPanel,BorderLayout.CENTER);

Step ③⬆️
本项目中用到的两类监听器，均采用内部类方式实现，方便访问外部类的成员变量
1.动作监听器 ActionListener
• 作用：监听按钮点击事件，绑定所有功能按钮
• 逻辑：重写actionPerformed方法，通过e.getActionCommand() 获取按钮上的文本，赋值给 name 变量标记当前绘制图形类型，从而判断按钮文本实现图形切换，修改画笔颜色
2.鼠标监听器 MouseListener
• 该接口包含5个抽象方法：mouseClicked（单击）、mousePressed（按下）、mouseReleased（松开）、mouseEntered（进入组件）、mouseExited（离开组件）。

⭐监听器绑定误区： 鼠标监听器必须绑定在绘图画板 drawPanel 上，而非整个窗口，否则鼠标点击区域无效，无法触发鼠标事件

publicclassDrawListenerimplementsMouseListener,ActionListener{//画笔对象，后续由主窗体传入publicGraphicsgr;//鼠标坐标变量，记录绘图起点、终点、三角形第三个点publicintx1,y1,x2,y2,x3,y3;//记录当前选择的按钮信息publicStringname;//绘图状态标记，控制任意三角形的分布绘制publicintflag=1;//实现按钮点击事件方法publicvoidactionPerformed(ActionEvente){//name用来保存按钮上的文字name=e.getActionCommand();//设置画笔颜色if("蓝色".equals(name)){gr.setColor(Color.BLUE);}if("红色".equals(name)){gr.setColor(Color.RED);}System.out.println(name);}//重写鼠标监听器的五个方法publicvoidmouseClicked(MouseEvente){}publicvoidmousePressed(MouseEvente){}publicvoidmouseReleased(MouseEvente){}publicvoidmouseEntered(MouseEvente){}publicvoidmouseExited(MouseEvente){}}

主窗体绑定监听器

//创建监听器对象DrawListenerlistener=newDrawListener();//给画板drawpanel添加鼠标监听器drawPanel.addMouseListener(listener);//给按钮添加动作监听器jbu1.addActionListener(listener);jbu2.addActionListener(listener);jbu3.addActionListener(listener);jbu4.addActionListener(listener);jbu5.addActionListener(listener);blue.addActionListener(listener);red.addActionListener(listener);jf.setVisible(true);

⭐关键知识点
• 一个监听器可以同时实现多个接口,
• 所有按钮共用一个监听器,通过e.getActionCommand()获取按钮文本，区分不同操作
• 鼠标监听器必须重写五个抽象方法，不需要的可以空实现

画笔对象的传递：引用传递
绘图的核心是Graphics画笔对象，这个对象属于绘图画板drawPanel，监听器想完成绘图操作，必须获取到画笔对。因此在主窗体中获取画板的画笔，将其赋值给监听器的成员变量gr，实现画笔对象的夸类传递

//获取画笔Graphicsg=drawPanel.getGraphics();//把画笔对象g传递给listenerlistener.gr=g;

注意：画笔要在窗体可视化后再获取，否则会取空

Step ④⬆️
• 监听器持有画笔对象后，就可以在鼠标事件中调用画图方法完成画图
•鼠标按压（mousePressed）:记录绘图起点
鼠标按下时，记录第一个坐标点（x1,y1）作为图形的起点，通过flag状态标记保证起点只记录一次

publicvoidmousePressed(MouseEvente){System.out.println("按压！");//要加一个判断条件，限制重画位点if(flag==1){x1=e.getX();y1=e.getY();}System.out.println("x1="+x1+" y1="+y1);}

•鼠标释放（mouseReleased）:记录终点并绘制基础图形
鼠标松开时，获取终点坐标（x2,y2）,计算宽、高以及离原点最近的坐标（默认窗口左上角为原点），根据选择的图形名字，绘制直线、矩形、正方形、任意三角形、等腰三角形

publicvoidmouseReleased(MouseEvente){if(flag==1){x2=e.getX();y2=e.getY();}//计算矩形宽、高、左上角坐标，并加上绝对值intw=Math.abs(x2-x1);intm=Math.abs(y2-y1);intmx=Math.min(x1,x2);intmy=Math.min(y1,y2);System.out.println("x2="+x2+" y2="+y2);//画直线if("直线".equals(name)){gr.drawLine(x1,y1,x2,y2);}//画任意三角形if("三角形".equals(name)){//三角形第一条边gr.drawLine(x1,y1,x2,y2);//标记状态，等待第三次点击flag++;}//画矩形,正方形if("矩形".equals(name)){gr.drawRect(mx,my,w,m);}//正方形if("正方形".equals(name)){gr.drawRect(mx,my,w,w);}//画等腰三角形if("等腰三角形".equals(name)){gr.drawLine(x1,y2,x2,y2);gr.drawLine(x1,y2,(x1+x2)/2,y1);gr.drawLine((x1+x2)/2,y1,x2,y2);}}

•鼠标点击（mouseClicked）:完成任意三角形绘制
任意三角形的三个顶点，前两个点由按压、释放确定，第三个点由鼠标点击决定，点击后连接剩余两条边完成闭合图形

publicvoidmouseClicked(MouseEvente){x3=e.getX();y3=e.getY();if("三角形".equals(name)){x3=e.getX();y3=e.getY();System.out.println("x3= "+x3+" y3="+y3);flag=1;gr.drawLine(x1,y1,x3,y3);gr.drawLine(x2,y2,x3,y3);}}

三、成果展示