Develop Reference

Adding Multiple JComponents deactivates mouse listener's

I have added 2 JComponent to JPanel.Both these JComponent have custom painted objects on them i.e multiple Circles and multiple Line2Ds.The dimensions of both these jcomponent's are set to the size of the screen which is required.When I add them to JPanel,the mouselisteners are not working.However if I comment one of them then that listener starts working.
public class MapXMLBuilder extends JFrame {
public void initialize() {
panel = new Jpanel();
addLine();//ading lines
addCircle();//adding cirlces
add(panel)
}
private void addLine() {
mDrawLine = new DrawLine(panel);
mDrawCircle.setDimensions(screenWidth, screenWidth);
panel.add(mDrawLine); //adding JComponent1 to panel
for (int i = 0; i < 10; i++) { //adding 10 circles
mDrawLine.addLine(new Point2D.Double(x, y));
}
}
private void addCircle() {
mDrawCircle = new DrawCircle(panel);
mDrawCircle.setDimensions(screenWidth, screenWidth);
panel.add(mDrawCircle); //adding JComponent1 to panel
for (int i = 0; i < 10; i++) { //adding 10 circles
mDrawCircle.addCircle(new Point2D.Double(x, y));
}
}
}
public class DrawLine extends JComponent {
public DrawLine(JPanel jpanel) {
lineList = new ArrayList();
addMouseListener(mouseAdapter);
addMouseMotionListener(mouseAdapter);
setBackground(Color.white);
}
public void addLine(int x1, int y1, int x2, int y2, Color color) {
Shape currentShape = new Line2D.Float(x1, y1, x2, y2);
lineList.add(currentShape);
repaint();
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setPaint(Color.BLACK);
for (Shape shape: lineList) {
if (shapes != null && shapes.size() > 0) {
g2d.setColor(Color.YELLOW);
g2d.draw(shape);
}
}
}
public void setDimensions(int width, int height) {
setSize(new Dimension(width, height));
}
}
public class DrawCircle extends JComponent {
public DrawCircle(JPanel jpanel) {
circleList = new ArrayList();
addMouseListener(mouseAdapter);
addMouseMotionListener(mouseAdapter);
setBackground(Color.white);
}
public void addCircle(Point2D p) {
Ellipse2D e = new Ellipse2D.Double(p.getX(), p.getY(), 5, 5);
circleList.add(e);
selectedPoint = null;
repaint();
}
public void setDimensions(int width, int height) {
setSize(new Dimension(width, height));
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
int diameter = 75;
Ellipse2D e;
Color color;
for (int j = 0; j < circleList.size(); j++) {
e = (Ellipse2D) circleList.get(j);
float alpha = 0.75f;
color = new Color(1, 0, 0, alpha); //Red
g2.setPaint(color);
Ellipse2D.Double circle = new Ellipse2D.Double(e.getX(), e.getY(), diameter, diameter);
g2.fill(circle);
}
}
}

You can forward the event from one to the other. Try something like this:
firstComponent.addMouseListener(new MouseAdapter(){
public void mouseClicked(MouseEvent event){
// forward the event
secondComponent.dispatchEvent(event);
// handle the code here
}
});
secondComponent.addMouseListener(// etc.

Clear window from drawing objects

I have 4 classes:
Draw, Rectangle (extends Draw), FreeHand (extends Draw) and a test class.
I add rectangles and lines drawn by free hand to an arrayList.
I have a menubar with choices Back and Clear. Back removes the last drawn object. It is done by removing the last object in the arraylist. Clear clears the windows. It is done by clear the arraylist from all items.
Now to my problem: The window does not clear. I don't know how to write the code to make it repaint properly so that the items removes from the window.
Can you please help me with how the code for this would look like, and where I put it. I appreciate it, thank you.
My problem no 2:
After I have removed the last item in the arraylist I need to draw all the items in the arrayList. I have tried
for (Draw d : shapeList) {
d.draw(g2);
}
But it does not work. Any suggestions?
Class Draw:
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JPanel;
public abstract class Draw extends JPanel {
public int startX, startY, endX, endY, width, height, w, h;
public String color = "Black";
public Draw(int startX, int startY, int width, int height) {
this.startX = startX;
this.startY = startY;
this.width = width;
this.height = height;
}
public abstract void draw(Graphics2D g);
#Override
public int getX() {
return startX;
}
public void setX(int startX) {
this.startX = startX;
}
#Override
public int getY() {
return startY;
}
public void setY(int startY) {
this.startY = startY;
}
#Override
public int getWidth() {
return width;
}
public void setWidth(int width) {
this.width = width;
}
#Override
public int getHeight() {
return height;
}
public void setHeight(int height) {
this.height = height;
}
public void setColor(String color) {
this.color = color;
}
}
Class Rectangle:
import java.awt.Color;
import java.awt.Graphics2D;
public class Rectangle extends Draw {
public Rectangle(int x, int y, int width, int height) {
super(x, y, width, height);
}
#Override
public void draw(Graphics2D g2) {
switch (color) {
case "Red":
g2.setColor(Color.RED);
break;
case "Green":
g2.setColor(Color.GREEN);
break;
case "Blue":
g2.setColor(Color.BLUE);
break;
case "Yellow":
g2.setColor(Color.YELLOW);
break;
case "Orange":
g2.setColor(Color.ORANGE);
break;
case "Black":
g2.setColor(Color.BLACK);
break;
}
g2.drawRect(getX(), getY(), getWidth(), getHeight());
}
}
Class FreeHand:
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
public class FreeHand extends Draw {
public FreeHand(int x, int y, int width, int height) {
super(x, y, width, height);
}
/* public FreeHand() {
super();
}*/
#Override
public void draw(Graphics2D g2) {
//Graphics2D g2 = (Graphics2D) g;
g2.setStroke(new BasicStroke(3));
switch (color) {
case "Red":
g2.setColor(Color.RED);
break;
case "Green":
g2.setColor(Color.GREEN);
break;
case "Blue":
g2.setColor(Color.BLUE);
break;
case "Yellow":
g2.setColor(Color.YELLOW);
break;
case "Orange":
g2.setColor(Color.ORANGE);
break;
case "Black":
g2.setColor(Color.BLACK);
break;
}
g2.drawLine(getX(), getY(), getWidth(), getHeight());
}
}
Testclass:
import java.awt.*;
import java.awt.event.*;
import java.util.ArrayList;
import javax.swing.*;
public class JavaApplication30 extends JFrame implements ActionListener {
public ArrayList<Draw> shapeList = new ArrayList<>();
int startX, startY, endX, endY, w, h;
private JPanel topPanel;
private JPanel bottomPanel;
private JPanel orangePanel;
private JPanel greenPanel;
private JPanel bluePanel;
private JPanel blackPanel;
private JPanel redPanel;
private JPanel yellowPanel;
private JPanel leftPanel;
private JPanel rightPanel;
private JPanel colorPanel;
private JMenuBar menuBar;
private JMenu menu;
private JMenuItem menuItem1;
private JMenuItem menuItem2;
private JMenuItem menuItem3;
private JComboBox comboBox;
private JLabel leftLabel;
private JLabel commaLabel;
private JLabel colorLabel;
private static JLabel xLabel;
private static JLabel yLabel;
private final String labelText = "Coordinates: ";
private final String comma = ",";
private final String color = "Color: ";
private final String[] boxOptions = new String[] {"Rectangle", "Freehand"};
private String pickedColor = "Black";
private String x = "";
private String y = "";
Container cp = getContentPane();
private int count = 0;
public JavaApplication30(String title) {
super(title);
this.setLayout(new BorderLayout());
this.setLocationRelativeTo(null);
this.setSize(840, 500);
this.initComponents();
this.initMenu();
this.setVisible(true);
}
private void initComponents() {
cp.setBackground(Color.WHITE);
comboBox = new JComboBox(boxOptions);
topPanel = new JPanel(new GridLayout(1,7));
bottomPanel = new JPanel(new GridLayout(1,2));
orangePanel = new JPanel();
greenPanel = new JPanel();
bluePanel= new JPanel();
blackPanel = new JPanel();
redPanel = new JPanel();
yellowPanel = new JPanel();
colorPanel = new JPanel();
rightPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));
leftPanel = new JPanel(new FlowLayout(FlowLayout.LEFT));
comboBox.setSelectedIndex(0);
comboBox.addActionListener(this);
topPanel.setPreferredSize(new Dimension(0,40));
bottomPanel.setPreferredSize(new Dimension(0,30));
colorPanel.setPreferredSize(new Dimension(60,20));
leftLabel = new JLabel(labelText);
commaLabel = new JLabel(comma);
colorLabel = new JLabel(color);
bottomPanel.setBackground(Color.LIGHT_GRAY);
orangePanel.setBackground(Color.ORANGE);
greenPanel.setBackground(Color.GREEN);
bluePanel.setBackground(Color.BLUE);
blackPanel.setBackground(Color.BLACK);
redPanel.setBackground(Color.RED);
yellowPanel.setBackground(Color.YELLOW);
colorPanel.setBackground(Color.BLACK);
topPanel.add(orangePanel);
topPanel.add(greenPanel);
topPanel.add(bluePanel);
topPanel.add(blackPanel);
topPanel.add(redPanel);
topPanel.add(yellowPanel);
topPanel.add(comboBox);
rightPanel.add(colorLabel);
rightPanel.add(colorPanel);
bottomPanel.add(leftPanel);
bottomPanel.add(rightPanel);
this.add(topPanel, BorderLayout.PAGE_START);
this.add(bottomPanel, BorderLayout.PAGE_END);
}
#Override
public void paint(Graphics g) {
if(count == 0) {
cp.repaint();
}
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.setStroke(new BasicStroke(1));
for (Draw d : shapeList) {
d.draw(g2);
}
if (startX != 0 && startY != 0 && endX != 0 && endY != 0) {
int width = Math.abs(startX - endX);
int height = Math.abs(startY - endY);
int minX = Math.min(startX, endX);
int minY = Math.min(startY, endY);
Rectangle r = new Rectangle(minX, minY, width, height);
g2.setPaint(Color.WHITE);
g2.fillRect(r.getX(), r.getY(), r.getWidth(), r.getHeight());
r.setColor(pickedColor);
r.draw(g2);
}
}
#Override
public void actionPerformed(ActionEvent e) {
count++;
if (e.getSource().equals(menuItem1)) {
shapeList.clear();
//Code to clear window
}
if (e.getSource().equals(menuItem2)) {
shapeList.remove(shapeList.size() - 1);
//Code to clear window
Graphics g = getGraphics();
Graphics2D g2 = (Graphics2D) g;
for (Draw d : shapeList) {
d.draw(g2);
}
}
if (e.getSource().equals(menuItem3)) {
//Exit
}
if (e.getSource().equals(comboBox)) {
JComboBox cb = (JComboBox)e.getSource();
if (cb.getSelectedItem().equals("Rectangle")) {
this.addMouseListener(new MouseAdapter() {
#Override
public void mousePressed(MouseEvent e) {
startX = e.getX();
startY = e.getY();
endX = startX;
endY = startY;
repaint();
}
#Override
public void mouseReleased(MouseEvent e) {
endX = e.getX();
endY = e.getY();
int width = Math.abs(startX - endX);
int height = Math.abs(startY - endY);
int minX = Math.min(startX, endX);
int minY = Math.min(startY, endY);
Rectangle r = new Rectangle(minX, minY, width, height);
shapeList.add(r);
r.setColor(pickedColor);
startX = 0;
startY = 0;
endX = 0;
endY = 0;
repaint();
}
});
this.addMouseMotionListener(new MouseMotionAdapter() {
#Override
public void mouseDragged(MouseEvent e) {
endX = e.getX();
endY = e.getY();
repaint();
}
});
}
else if (cb.getSelectedItem().equals("Freehand")) {
this.addMouseListener(new MouseAdapter() {
#Override
public void mousePressed(MouseEvent e) {
startX = e.getX();
startY = e.getY();
}
});
this.addMouseMotionListener(new MouseMotionAdapter() {
#Override
public void mouseDragged(MouseEvent e) {
Graphics g = getGraphics();
Graphics2D g2 = (Graphics2D) g;
FreeHand fh = new FreeHand(startX, startY, e.getX(), e.getY());
shapeList.add(fh);
fh.setColor(pickedColor);
fh.draw(g2);
startX = e.getX();
startY = e.getY();
}
});
}
}
}
private void initMenu() {
menuBar = new JMenuBar();
menu = new JMenu("File");
menuBar.add(menu);
menuItem1 = new JMenuItem("Clear");
menuItem2 = new JMenuItem("Back");
menuItem3 = new JMenuItem("Exit");
menu.add(menuItem1);
menu.add(menuItem2);
menu.addSeparator();
menu.add(menuItem3);
menu.setMnemonic(KeyEvent.VK_A);
KeyStroke ks1 = KeyStroke.getKeyStroke(KeyEvent.VK_N, InputEvent.CTRL_MASK); //Crtl+n
KeyStroke ks2 = KeyStroke.getKeyStroke(KeyEvent.VK_I, InputEvent.CTRL_MASK); //Ctrl+i
KeyStroke ks3 = KeyStroke.getKeyStroke(KeyEvent.VK_A, InputEvent.CTRL_MASK); //Ctrl+e
menuItem1.setAccelerator(ks1);
menuItem2.setAccelerator(ks2);
menuItem3.setAccelerator(ks3);
menuItem1.addActionListener(this);
menuItem2.addActionListener(this);
menuItem3.addActionListener(this);
setJMenuBar(menuBar);
}
public static void main(String args[]) {
new JavaApplication30("Draw");
}
}

Your problem looks to be that your paint method is not calling the super's paint method since this will have the component clean itself of all "dirty" image bits. But having said that, you shouldn't draw directly in the JFrame. Instead draw in the paintComponent method of a JComponent or JPanel, and in that method be sure to call the super's paintComponent method:
public class MyDrawingPanel extends JPanel {
#Override
proteced void paintComponent(Graphics g) {
super.paintComponent(g); // don't forget this!
// do your drawing here
}
}
Also, why does your Draw class, and thus all classes that derive from it, extend JPanel when it is not being used as a JPanel? You are giving a lot of unnecessary overhead to these classes this way.
Edit
You ask:
So you mean I should move Everything in the paint-method to the paintComponent-method in Draw? Why protected?
No. I mean that Draw should not extend JPanel, but instead should be a logical class, not a Swing component-derived class. I think that you should create a new class, say called MyDrawingPanel where you do all of your drawing. Please see my code snippet above. Also paintComponent is declared in JComponent to be protected, not public, and I see no advantage to making it public when overriding it, so I recommend leaving it protected.
Please read the Swing Info Links to see the Swing graphics tutorials and give them a read.
Edit 2
You're also using a getGraphics() call on a component to get your Graphics object, not good as this will return an unstable Graphics object. Instead do all drawing in the paintComponent method or on a BufferedImage (that again is drawn in paintComponent).
Edit 3
Some of my code examples:
Minimal way to make a cleanable drawing area
Changing JPanel Graphics g color drawing line
Graphics in repaint draws random lines

Adding multiple MouseListeners dynamically JPanel

I am trying to add shapes onto a window using JPanel and then be able to click and drag them around the window. This works if I only have one shape; but when I add more shapes, the click and drag is very funky. It does drag but not with the mouse, it isn't proportional and doesn't drag with the mouse.
Any help is appreciated. Thanks!
public class SimpleDraw {
public static void main(String[] args) {
JFrame frame = new UMLWindow();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setBounds(30, 30, 1000, 700);
frame.getContentPane().setBackground(Color.white);
frame.setVisible(true);
frame.setLocationRelativeTo(null);
// Display the window.
frame.setVisible(true);
}
}
class UMLWindow extends JFrame {
Squares squares = new Squares();
private static final long serialVersionUID = 1L;
public UMLWindow() {
addMenus();
}
public void addMenus() {
getContentPane().add(squares);
JMenuBar menubar = new JMenuBar();
JMenu shapes = new JMenu("Shapes");
JMenuItem rectangleMenuItem = new JMenuItem("New Rectangle");
rectangleMenuItem.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent event) {
squares.addSquare(10, 10, 100, 100);
}
});
shapes.add(rectangleMenuItem);
menubar.add(shapes);
setJMenuBar(menubar);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
}
class Squares extends JPanel {
private static final long serialVersionUID = 1L;
private List<Path2D> squares = new ArrayList<Path2D>();
// private Path2D rect = new Path2D.Double();
int currentIndex;
public void addSquare(int x, int y, int width, int height) {
Path2D rect2 = new Path2D.Double();
rect2.append(new Rectangle(getWidth() / 2 - width / 2, getHeight() / 2
- height / 2, width, height), true);
squares.add(rect2);
// rect = rect2;
MyMouseAdapter myMouseAdapter = new MyMouseAdapter();
addMouseListener(myMouseAdapter);
addMouseMotionListener(myMouseAdapter);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
this.setOpaque(true);
this.setBackground(Color.WHITE);
Graphics2D g2 = (Graphics2D) g;
for (Path2D rect : squares) {
g2.draw(rect);
}
repaint();
}
class MyMouseAdapter extends MouseAdapter {
private boolean pressed = false;
private Point point;
#Override
public void mousePressed(MouseEvent e) {
if (e.getButton() != MouseEvent.BUTTON1) {
return;
}
for (int i = 0; i < squares.size(); i++) {
if (squares.get(i) != null
&& squares.get(i).contains(e.getPoint())) {
currentIndex = i;
pressed = true;
this.point = e.getPoint();
}
}
}
#Override
public void mouseDragged(MouseEvent e) {
if (pressed) {
int deltaX = e.getX() - point.x;
int deltaY = e.getY() - point.y;
squares.get(currentIndex).transform(
AffineTransform.getTranslateInstance(deltaX, deltaY));
point = e.getPoint();
repaint();
}
}
#Override
public void mouseReleased(MouseEvent e) {
pressed = false;
}
}
}

Lot of problems...
Most important, no you don't want to add a bunch of MouseListeners/MouseMotionListeners to your JPanel. You only want to add one, and have it control any and all squares that the JPanel holds.
Don't put a repaint() in your paintComponent method as that's a poor way to try to create an animation loop, a loop that you have absolutely no control over. Plus there's no need. The MouseAdapter should drive all the animation by itself.
class Squares extends JPanel {
private static final long serialVersionUID = 1L;
public Squares() {
MyMouseAdapter myMouseAdapter = new MyMouseAdapter();
addMouseListener(myMouseAdapter);
addMouseMotionListener(myMouseAdapter);
}
private List<Path2D> squares = new ArrayList<Path2D>();
// private Path2D rect = new Path2D.Double();
int currentIndex;
public void addSquare(int x, int y, int width, int height) {
Path2D rect2 = new Path2D.Double();
rect2.append(new Rectangle(getWidth() / 2 - width / 2, getHeight() / 2
- height / 2, width, height), true);
squares.add(rect2);
repaint(); // !!
// rect = rect2;
// !! MyMouseAdapter myMouseAdapter = new MyMouseAdapter();
// addMouseListener(myMouseAdapter);
// addMouseMotionListener(myMouseAdapter);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
this.setOpaque(true);
this.setBackground(Color.WHITE);
Graphics2D g2 = (Graphics2D) g;
for (Path2D rect : squares) {
g2.draw(rect);
}
// !! repaint();
}

Detecting when multiple Ellipse objects are being clicked

I am working on a version of the Squares game. For it I need to detect when my Ellipses are being clicked. But the problem is my method is using one Ellipse object. How can I detect which Ellipse is being clicked? Here is my code.
Main Squares class
public static boolean running = false;
public Squares() {
this.setSize(600, 600);
this.setTitle("Squares");
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
this.setContentPane(new SquarePane());
this.setLocationRelativeTo(null);
this.setVisible(true);
}
public static void main(String[] args) {
try {
new Squares();
} catch (Exception e) {
e.printStackTrace();
System.out.println("Crashed");
System.exit(-1);
}
running = true;
}
}
SquaresPanel Class
public static int x = 100;
public static int y = 100;
public static Color randomColor;
public static float r;
public static float g;
public static float b;
public void paintComponent(Graphics gra) {
Graphics2D g2d = (Graphics2D) gra;
gra.setColor(Color.black);
gra.fillRect(0, 0, 600, 600);
Random rand = new Random();
for (int i = 0; i < 8; i++) {
for (int j = 0; j < 8; j++) {
Ellipse2D oval = new Ellipse2D.Double(x, y, 10, 10);
r = rand.nextFloat();
g = rand.nextFloat();
b = rand.nextFloat();
randomColor = new Color(r, g, b);
g2d.setColor(randomColor);
g2d.fill(oval);
x += 50;
}
x = 100;
y += 50;
}
}
Thanks guys!
Will

Without looking too much at your code (as I see it's lacking alot) I will just explain how your requirement can be achieve.
1st : You need a MouseListener and implement the mousePressed. From the MouseEvent object, you can obtain the point clicked. See How to Write MouseListener if you are unsure.
public void mousePressed(MouseEvent e) {
Point p = e.getPoint();
}
2nd: Keep a List of your ellipses
List<Ellipse2D> ellipses;
3rd: Keep a selectedEllipse variable to hold the select one.
Ellipse2D selectedEllipse;
4th: After clicking the point, you loop through the list, checking if each Ellipse2D.contains the point. Then do something with the selected Ellipse
public void mousePressed(MouseEvent e) {
Point p = e.getPoint();
for (Ellipse2D ellipse : ellipses) {
if (ellipse.contains(p) {
selectedEllipse = ellipse;
// do something with selectedEllipse
break;
} else {
selectedEllipse = null;
}
}
}
5th: Loop through your ellipses to paint the in the paintComponent method
protected void paintComponent(Grapchics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
for (Ellipse2D ellipse : ellipses) {
g2.fill(ellipse):
}
}
Side Notes
You must call super.paintComponent in your paintComponent method
protected void paintComponent(Graphics g) {
super.paintComponent(g);
}
UPDATE
After taking a closer look at your code, I see more of what you are trying to achieve. Looks like you want am 8 by 8 grid of your ellipses. Another option is just to create 64 panels. and paint each of them.
First have a panel class where you can set the color
public class EllipsePanel extends JPanel {
private Color color;
public EllipsePanel(Color color) {
this.color = color;
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(color);
g.fillOval(0, 0, getWidth(), getHeight());
}
}
Then you can use a panel to hold all those panel and use a GridLayout, but also keeping a JPanel[][] so you can easily refer to each panel. You can also a add a mouselistener to each panel
JPanel gridPanel = new JPanel(new GridLayout(8, 8));
EllipsePanel[][] panels = new EllipsePanel[8][8];
EllipsePanel selectedPanel = null;
int currentRow;
int currentCol;
...
for (int i = 0; i < 8; i++) {
for (int j = 0; i < 8; j++) {
final EllipPanel panel = new EllipsePanel(getRendomColor);
panel.addMouseListener(new MouseAdapter(){
public void mousePressed(MouseEvent e) {
selectedPanel = panel;
// do something with selected panel;
}
});
gridPanel.add(panel);
}
}

You should implement a mouse listener on your JPannel, and then use the position clicked retrieved from the listener to work out which ellipse was clicked

Add panel ontop of panel and both are visible

I'm making a music/drawing application which you free draw lines with your mouse and a TrackBar passes horizontally through it and reads the lines and uses the x and y coordinate to modify music.
The problem I'm having is that TrackBar class is a JPanel and DrawBoard class is a JPanel which I add inside a Frame. But which ever is on-top is the one that will show, what I want is for them to both show, and the TrackBar to pass on top of the lines drawn.
Below Is the source code of this 3 classes and took out some unncesesary code:
The MainFrame class where I add them (with the current setup the TrackBar doesnt appear but the Drawing board appears since it overlaps it):
public class MainFrame extends JFrame {
public static ColourToolbar colourBar;
public static TrackBar tb;
public MainFrame(){
super("VIPE by Prestige WorldWide");
// Top colour toolbar for tones
colourBar = new ColourToolbar();
this.getContentPane().add(colourBar, BorderLayout.NORTH);
// This class ImagePanel is a JPanel which I overite the paintCOmponent to have background
ImagePanel bg = new ImagePanel();
bg.setLayout(new BorderLayout());
Dimension size = getPreferredSize();
size.setSize(1024,800); //w, h
bg.setPreferredSize(size);
this.getContentPane().add(bg, BorderLayout.CENTER);
// I add the TrackBar to the ImagePanel since its the Background
tb = new TrackBar();
bg.add(tb, BorderLayout.CENTER);
// I add the drawing board but It will overlap the Trackbar
DrawBoard dboard = new DrawBoard();
bg.add(dboard, BorderLayout.CENTER);
// The control toolbar where the settings and control buttons are.
Toolbar toolBar = new Toolbar();
this.getContentPane().add(toolBar, BorderLayout.SOUTH);
}
public static void main(String[] args){
MainFrame frame = new MainFrame();
frame.setBackground(Color.WHITE);
frame.setSize(1024,768);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setResizable(false);
//frame.pack();
frame.setVisible(true);
}
}
Now the TrackBar class:
public class TrackBar extends JPanel{
private TrackBarAction tba = new TrackBarAction(this);
public static int TIME = 9;
public Timer t = new Timer(TIME, tba);
public static double x = 0, y = 0, velX = 1.0, velY = 0;
private int SKIP = 120;
public TrackBar(){
this.setOpaque(false);
}
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g;
//g2d.drawRect((int)x, (int)y, 10, 800);
Rectangle2D r2d = new Rectangle2D.Double(x, y, 8.0, 800.0); // x,x, w, h
g2d.setPaint(Color.DARK_GRAY);
g2d.fill(r2d);
g2d.draw(r2d);
}
public void reset(){
t.stop();
x = 0;
y = 0;
velX = 0.5;
velY = 0;
this.repaint();
}
public void skipForward(){
if(x+SKIP <= 1024){
x += SKIP;
} else {
x = 1024 - x;
}
this.repaint();
}
public void skipBackwards(){
if(x-SKIP >= 0){
x -= SKIP;
} else {
x = 0;
}
this.repaint();
}
}
And now the DrawBoard class:
public class DrawBoard extends JPanel implements MouseListener, MouseMotionListener{
(..)
public Color currentColor;
public static boolean eraser = false;
private int xX1, yY1;
public DrawBoard(){
Graphics2D g2d = bImage.createGraphics();
g2d.dispose();
Dimension size = getPreferredSize();
size.setSize(1024,800); //w, h
setPreferredSize(size);
//status = new JLabel("default");
//add(status, BorderLayout.SOUTH);
addMouseListener(this);
addMouseMotionListener(this);
imgLabel = new JLabel(new ImageIcon(bImage)) {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
paintInLabel(g);
}
};
imgLabel.setOpaque(false);
setOpaque(false);
add(imgLabel, BorderLayout.CENTER);
}
private void paintInLabel(Graphics g) {
if(!eraser){
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(getColor()); // this colour is when mouse is pressed
g2d.setStroke(new BasicStroke(STROKESIZE));
if (points.size() < 1) {
return;
}
for (int i = 1; i < points.size(); i++) {
int x1 = points.get(i - 1).x;
int y1 = points.get(i - 1).y;
int x2 = points.get(i).x;
int y2 = points.get(i).y;
g2d.drawLine(x1, y1, x2, y2);
}
}
}
// Where the drawing happens
#Override
public void mousePressed(MouseEvent e) {
//status.setText("you pressed down the mouse");
if(!eraser){
xX1 = e.getX();
yY1 = e.getY();
points.add(e.getPoint());
}
}
#Override
public void mouseDragged(MouseEvent e) {
//status.setText("you draged the mouse");
Graphics2D g2d = bImage.createGraphics();
// this is the eraser code
if(eraser){
//Graphics2D g2d = bImage.createGraphics();
System.out.println("eraser = true");
System.out.println("Stroke = " + STROKESIZE);
g2d.setComposite(AlphaComposite.Clear);
g2d.setColor(new Color(0, 0, 0, 0));
g2d.drawRect(e.getX(), e.getY(), STROKESIZE, STROKESIZE);
g2d.fillRect(e.getX(), e.getY(), STROKESIZE, STROKESIZE);
// g2d.setColor(c);
imgLabel.repaint();
}else {
//g2d.setComposite();
points.add(e.getPoint());
System.out.println("point = " + e.getPoint());
imgLabel.repaint();
}
}
#Override
public void mouseReleased(MouseEvent e) {
//status.setText("you release the mouse click");
if(!eraser){
Graphics2D g2d = bImage.createGraphics();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(getColor()); // this is the final colour
g2d.setStroke(new BasicStroke(STROKESIZE));
if (points.size() >= 2) {
for (int i = 1; i < points.size(); i++) {
int x1 = points.get(i - 1).x;
int y1 = points.get(i - 1).y;
int x2 = points.get(i).x;
int y2 = points.get(i).y;
g2d.drawLine(x1, y1, x2, y2);
}
}
g2d.dispose();
points.clear();
imgLabel.repaint();
}
//imgLabel.repaint();
}
// End of where the drawing happens
public void clearDrawBoard() {
}
private Color getColor() {
return ColourToolbar.selectedColor;
}
private void setColor(Color col){
this.currentColor = col;
}
#Override
public void mouseClicked(MouseEvent e) {
//throw new UnsupportedOperationException("Not supported yet.");
}
}

BorderLayout can only have one component add to each of it a 5 positions. By adding the DrawPanel to the center position, you are effectively removing the TrackPanel.
Instead, set the layout manager of the TrackBar to BorderLayout and add the DrawPanel to it.
You could also use a JLayeredPane, but the management becomes more involved