Java Swing简易画图工具

一、项目概述1.功能介绍本项目基于Java Swing实现简易图形绘制工具支持通过鼠标拖拽完成绘制直线、矩形、正方形、三角形可切换画笔颜色通过按钮可选择绘制图形类型完成基础交互式绘图功能2.核心要点Java Swing基础组件、BorderLayout边框布局、鼠标监听器、动作监听器、内部访问成员变量、类的继承、引用传递等3.过程总览①基础窗口与组件搭建②容器布局实现③监听器编写与画笔绑定④设计绘制图形的坐标逻辑二、设计流程及思路Step ①⬆️创建窗口JFrame添加属性SizeTitle…该过程详见Java Swing图形化编程入门https://blog.csdn.net/Nie_081017/article/details/163569687?spm1001.2014.3001.550创建功能按钮图形名称颜色…publicclassDrawUI{publicvoidinitUI(){JFramejfnewJFrame(画图工具);jf.setSize(800,800);jf.setDefaultCloseOperation(3);jf.setLocationRelativeTo(null);//功能按钮JButtonjbu1newJButton(直线);JButtonjbu2newJButton(矩形);JButtonjbu3newJButton(三角形);JButtonjbu4newJButton(正方形);JButtonjbu5newJButton(等腰三角形);JButtonbluenewJButton(蓝色);JButtonrednewJButton(红色);jf.setVisible(true);}publicstaticvoidmain(String[]args){DrawUIuinewDrawUI();ui.initUI();}}按钮对象创建完成后我们先不着急add在jf窗口上Step ②⬆️在这个项目中我想实现的不仅仅是画出线条和图形为了更完善做到功能区与画图区分离的效果我们在这一步就要用到BorderLayout(边框布局它可以将整个窗口分区不过每个区域只能加一个组件远远达不到我们要加多个按钮组件的需求所以我们灵活变通一下将这些按钮全部“打包”进Panel(容器)中再把Panel放在这个窗口的上部即BorderLayout.NORTH这样就满足了边框布局“一个区域只装一个组件”的硬性条件。⭐注意步骤在Panel里add所有button➡️在BorderLayout里addPanel➡️在jf里add(BorderLayout按照这个思路BorderLayout的方向按需索取在这里装按钮的Panel在上方就是NORTH画图区域占据窗口剩余位置用CENTER则可自动占满空间⬇️//设置容器panel,把所有button放进panel里打包JPanelpanelnorthnewJPanel();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//将画图区域也添加进容器JPaneldrawPanelnewJPanel();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;//绘图状态标记控制任意三角形的分布绘制publicintflag1;//实现按钮点击事件方法publicvoidactionPerformed(ActionEvente){//name用来保存按钮上的文字namee.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){}}主窗体绑定监听器//创建监听器对象DrawListenerlistenernewDrawListener();//给画板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实现画笔对象的夸类传递//获取画笔GraphicsgdrawPanel.getGraphics();//把画笔对象g传递给listenerlistener.grg;注意画笔要在窗体可视化后再获取否则会取空Step ④⬆️• 监听器持有画笔对象后就可以在鼠标事件中调用画图方法完成画图•鼠标按压mousePressed:记录绘图起点鼠标按下时记录第一个坐标点x1,y1作为图形的起点通过flag状态标记保证起点只记录一次publicvoidmousePressed(MouseEvente){System.out.println(按压);//要加一个判断条件限制重画位点if(flag1){x1e.getX();y1e.getY();}System.out.println(x1x1 y1y1);}•鼠标释放mouseReleased:记录终点并绘制基础图形鼠标松开时获取终点坐标x2,y2,计算宽、高以及离原点最近的坐标默认窗口左上角为原点根据选择的图形名字绘制直线、矩形、正方形、任意三角形、等腰三角形publicvoidmouseReleased(MouseEvente){if(flag1){x2e.getX();y2e.getY();}//计算矩形宽、高、左上角坐标并加上绝对值intwMath.abs(x2-x1);intmMath.abs(y2-y1);intmxMath.min(x1,x2);intmyMath.min(y1,y2);System.out.println(x2x2 y2y2);//画直线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,(x1x2)/2,y1);gr.drawLine((x1x2)/2,y1,x2,y2);}}•鼠标点击mouseClicked:完成任意三角形绘制任意三角形的三个顶点前两个点由按压、释放确定第三个点由鼠标点击决定点击后连接剩余两条边完成闭合图形publicvoidmouseClicked(MouseEvente){x3e.getX();y3e.getY();if(三角形.equals(name)){x3e.getX();y3e.getY();System.out.println(x3 x3 y3y3);flag1;gr.drawLine(x1,y1,x3,y3);gr.drawLine(x2,y2,x3,y3);}}三、成果展示