简易画板主要使用JFrame,JPanel,JLabel等,还要添加相应的监听器。
首先新建主类。
JFrame是一个容器,允许程序员把其他组件添加到它里面,把它们组织起来,并把它们呈现给用户。
public static void main(String[] args) { DrawUI ui = new DrawUI(); ui.initDrawUI(); } public void initDrawUI() { this.setTitle("画板"); this.setSize(600,500); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setVisible(ture); } }
将整个窗口分为西边,南边和中间三面,西边放工具,南边放颜色挑选,中间放置画板。所以整个窗口需要BorderLayout来分割窗口。
BorderLayout一个布置容器的边框布局,它可以对容器组件进行安排,并调整其大小,使其符合下列五个区域:北、南、东、西、中。每个区域最多只能包含一个组件,并通过相应的常量进行标识:NORTH、SOUTH、EAST、WEST、CENTER。当使用边框布局将一个组件添加到容器中时,要使用这五个常量之一。
//添加BorderLayout方法分割窗口: BorderLayout layout = new BorderLayout(); this.setLayout(layout); //分别在三面添加JPanel类,划分大小,并分别设置西边南边和中间的背景颜色。 JPanel left = new JPanel(); left.setPreferredSize(new Dimension(80,1)); left.setBackground(new Color(235,235,235)); JPanel center = new JPanel(); center.setBackground(Color.GRAY); JPanel foot = new JPanel(); foot.setPreferredSize(new Dimension(1,80)); foot.setBackground(new Color(235,235,235)); //添加到窗口上 this.add(left,BorderLayout.WEST); this.add(center,BorderLayout.CENTER); this.add(foot,BorderLayout.SOUTH); //在left添加工具按钮,并添加触碰,按下等的动作变化(这里需要用到for函数)。 //由于是单选按钮,则需要填加到group中。 ButtonGroup group = new ButtonGroup(); String[] commands = {"0","1","eraser","3","4","5","pencil","7","喷枪","9","line","11", "rect","13","oval","15" }; for(int i=0;i<16;i++) { JRadioButton radio = new JRadioButton(); ImageIcon lineIcon = new ImageIcon("imgs/draw"+i+".jpg"); radio.setIcon(lineIcon); ImageIcon lineIcon1 = new ImageIcon("imgs/draw"+i+"-1.jpg"); radio.setRolloverIcon(lineIcon1); ImageIcon lineIcon2 = new ImageIcon("imgs/draw"+i+"-2.jpg"); radio.setPressedIcon(lineIcon2); ImageIcon lineIcon3 = new ImageIcon("imgs/draw"+i+"-3.jpg"); radio.setSelectedIcon(lineIcon3); radio.setActionCommand(commands[i]); group.add(radio); left.add(radio); } //设置默认选择为pencil if(i==6) { radio.setSelected(true); } //为center添加画板。 //JPanel 是一般轻量级容器。可以无限重叠自身。 JPanel drawPanel= new MyPanel(); drawPanel.setBackground(Color.WHITE); drawPanel.setPreferredSize(new Dimension(400,300)); Graphics g = drawPanel.getGraphics(); //为工具添加鼠标监听器,将group和画板传入监听器,由此在选择group时 //对Graphics进行操作。 DrawListener dlis = new DrawListener(g,group); drawPanel.addMouseListener(dlis); drawPanel.addMouseMotionListener(dlis); //新建DrawListener类 public class DrawListener implements MouseListener,MouseMotionListener{ private int x1,x2,y1,y2; private String type="line"; private Graphics g; private ButtonGroup group; public DrawListener(Graphics g,ButtonGroup group) { this.g = g; this.group = group; } } //实现相应函数。 public void mousePressed(MouseEvent e) { // 鼠标按下的时候需要知道要绘制的形状是什么 javax.swing.ButtonModel bm = group.getSelection(); String command=bm.getActionCommand(); type=command; g = drawPanel.getGraphics(); c = clis.color; x1=e.getX(); y1=e.getY(); } public void mouseReleased(MouseEvent e) { x2=e.getX(); y2=e.getY(); if(type.equals("line")) { g.drawLine(x1,y1,x2,y2); } else if(type.equals("rect")) { int minX = x1
保存绘画数据,且绘画始终在画板上。
将DrawUI中的drawPanel传入DrawListener中,则改为:
DrawListener dlis = new DrawListener(drawPanel,group);
DrawListener的构造函数更改:
public DrawListener(JPanel drawPanel,ButtonGroup group)
{
this.drawPanel = drawPanel;
this.group = group;
}
添加private JPanel drawPanel;
添加数组,存储数据:
定义一个shape类,然后让类Line继承,这样就可以将line的对象存储到数组中
public abstract class Shape { int x1,y1,x2,y2; Color color; public abstract void draw(Graphics g); } public class Line extends Shape{ int x1,y1,x2,y2; Color color; Graphics group; public Line(int x1,int y1,int x2,int y2,Color color) { this.x1 = x1; this.x2 = x2; this.y1 = y1; this.y2 = y2; this.color = color; } @Override public void draw(Graphics g) { g.setColor(this.color); g.drawLine(x1, y1, x2, y2); } }
类似Line类可以写出相应的Oval类,Rect类等。
在DrawListener中的绘画直线的函数就更改为:
Line line = new Line(x1,y1,x2,y2,color.BLACK);
line.draw(g);
用MyPanel类重写JPanel类中的paint方法,使得每次更改窗口都会重绘存储在数组中的数据。
class MyPanel extends JPanel { @Override public void paint(Graphics g) { super.paint(g); for(int i=0;i
JPanel drawPanel = new JPanel();更改为JPanel drawPanel = new MyPanel();
DrawListener中添加:
public static ArrayListshapeList = new ArrayList ();
绘制line中添加
shapeList.add(line);
为颜色按钮添加ColorListener监听器
public class ColorListener extends MouseAdapter implements ActionListener{
@Override
public void mouseReleased(MouseEvent e) {
super.mouseReleased(e);
JLabel label = (JLabel) e.getSource();
color = label.getBackground();
}
Color color;
@Override
public void actionPerformed(ActionEvent e) {
color = JColorChooser.showDialog(null, "请选择颜色", Color.RED);
}
}
在DrawUI中实现
在foot中添加颜色按钮
for(int i=0;iJLabel label = new JLabel();
label.setPreferredSize(new Dimension(34,29));
label.setBackground(colors[i]);
//前景色是否透明
label.setOpaque(true);
foot.add(label);
label.addMouseListener(clis);
}
颜色监听器放在工具监听器的前面,将颜色监听器的对象传入工具监听器中,实现对绘画的改色。
DrawListener dlis = new DrawListener(drawPanel,group,clis);
相应的构造函数需要改变。
public DrawListener(JPanel drawPanel,ButtonGroup group,ColorListener clis)
{
this.drawPanel = drawPanel;
this.group = group;
this.clis = clis;
}
在foot中添加颜色选择器(传入照片color.png)
JButton btn = new JButton();
ImageIcon icon = new ImageIcon("color.png");
btn.setIcon(icon);
btn.setPreferredSize(new Dimension(34,29));
foot.add(btn);
btn.addActionListener(clis);