We Keep Coding

How to calculate the X-Y coordinates and Radius of Circle shape after resize of JFrame?

I'm drawing Circles on JFrame using JComponent (AWT/SWING) and I want to make sure that when the user resizes the frame, that certain calculations are made and circles are drawn on screen dynamically (whether if it's bigger, smaller, moved to left or right etc.). I implemented the ComponentAdapter event and componentResized method however I'm struggling with coming up with something that is dynamic. Here's my code:
CircleViewer Class
import javax.swing.JFrame;
import java.awt.event.*;
public class CircleViewer
{
public static void main(String[] args)
{
final JFrame frame = new JFrame("Circle Shapes");
final CirclePanel panel = new CirclePanel();
// Class for Mouse Listener which implements the necessary interfaces
class MousePressListener implements MouseListener, MouseMotionListener
{
public void mouseClicked(MouseEvent event) { }
public void mouseEntered(MouseEvent event) { }
public void mouseExited(MouseEvent event) { }
public void mouseWheelMoved(MouseWheelEvent event) { }
public void mouseMoved(MouseEvent event) { }
public void mousePressed(MouseEvent event) { }
#Override
public void mouseDragged(MouseEvent event)
{
var x = event.getX();
var y = event.getY();
panel.moveTo(x, y);
}
#Override
public void mouseReleased(MouseEvent event)
{
panel.finalMove();
}
}
panel.addComponentListener(new ComponentAdapter() {
public void componentResized(ComponentEvent event)
{
panel.frameResizeCalculation(frame.getWidth(), frame.getHeight());
}
});
MousePressListener listener = new MousePressListener();
panel.addMouseListener(listener);
panel.addMouseMotionListener(listener);
frame.setSize(FRAME_WIDTH, FRAME_HEIGHT);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(panel);
frame.setVisible(true);
}
public static final int FRAME_WIDTH = 700;
public static final int FRAME_HEIGHT = 500;
}
CirclePanel Class
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JComponent;
import java.util.ArrayList;
import java.awt.Color;
import java.lang.Math;
import java.awt.BasicStroke;
import java.awt.Stroke;
public class CirclePanel extends JComponent
{
private int mouseX;
private int mouseY;
private ArrayList<Circle> circleList;
private final BasicStroke dashLine = new BasicStroke(1,
BasicStroke.CAP_BUTT,
BasicStroke.JOIN_BEVEL,
0, new float[]{6}, 0);
private Circle newCircle;
private final Color newCircleColor = Color.RED;
private final Color finalCircleColor = Color.BLUE;
public CirclePanel()
{
this.circleList = new ArrayList<Circle>();
this.mouseX = 0;
this.mouseY = 0;
}
public void moveTo(int x, int y)
{
mouseX = x;
mouseY = y;
if (newCircle == null)
{
newCircle = new Circle(x,y,0);
}
else
{
int dX = newCircle.get(0) - mouseX;
int dY = newCircle.get(1) - mouseY;
newCircle.set(2, (int)Math.sqrt(dX*dX + dY*dY));
}
repaint();
}
public void finalMove()
{
if (newCircle != null)
{
circleList.add(newCircle);
newCircle = null;
repaint();
}
}
// Do something here and change X-Y coordinates and radius of the circles and finally call repaint() method of Graphics2D
public void frameResizeCalculation(int width, int height)
{
var dX = CircleViewer.FRAME_WIDTH - width;
var dY = CircleViewer.FRAME_HEIGHT - height;
}
public void paintComponent(Graphics g)
{
g.setColor(finalCircleColor);
for (Circle circle : circleList)
{
drawCircle(g, circle);
}
Circle c = newCircle;
if (c != null)
{
g.setColor(newCircleColor);
drawCircle(g, c);
Graphics2D g2 = (Graphics2D)g.create();
g2.setStroke(dashLine);
g2.drawLine(c.get(0), c.get(1), mouseX, mouseY);
g2.dispose();
}
}
public void drawCircle(Graphics g, Circle c)
{
g.drawOval(c.get(0) - c.get(2), c.get(1) - c.get(2), c.get(2) * 2, c.get(2) * 2);
}
}
and lastly, the Circle
public class Circle
{
private int x;
private int y;
private int radius;
public Circle(int x, int y, int radius)
{
this.x = x;
this.y = y;
this.radius = radius;
}
public int get(int option)
{
switch (option)
{
case 0:
return this.x;
case 1:
return this.y;
case 2:
return this.radius;
}
return 0;
}
public void set(int option, int value)
{
switch (option)
{
case 0: //set x
this.x = value;
break;
case 1:
this.y = value;
break;
case 2:
this.radius = value;
break;
}
}
}

that certain calculations are made and circles are drawn on screen dynamically (whether if it's bigger, smaller, moved to left or right etc.).
Well you need to define what YOU want to happen when the frame is resized. We can't tell you what to do.
However, before you worry about that you need to restructure your classes to make it possible to have the dynamic painting.
I see the following issues with the basic code:
Forget about the frame size. That size is irrelevant to the custom painting that will be done in your CirclePanel. That is the size of the CirclePanel is NOT the same as the size of your frame, since the frame size includes the frame borders and title bar. Your logic should be based on the size of the panel, not the frame.
When doing custom painting it is also the responsibility of the component to override the getPreferredSize() method to return the preferred size of the component. Then in your code you add the panel to the frame and then invoke the pack() method on the frame.
You call your class CirclePanel, but you extend JComponent. Why? Give your class a proper name. If you want to extend JComponent then call your class CircleComponent. If you want to call your class CirclePanel, then extend JPanel. But you also need to understand the difference between extending JComponent and JPanel. All Swing components are responsible for clearing the background of the component BEFORE doing any painting. A JPanel does this for you automatically, you just invoke super.paintComponent(...) at the start. A JComponent does NOT clear the background so you must clear it by setting the color of the Graphics object and then invoke fillRect(0, 0, getWidth(), getHeight()) to paint the background.
The Circle object should contain all the information needed to paint itself. You already have the x, y, radius values. I would suggest you also need a Color property so each Circle can be a different color.
The Circle object should then know how to paint itself using its properties. Therefore your Circle class should have a method, lets say draw(Graphics grapics). You then use the properties of the class to draw the oval. So this means the paintComponent() method would invoke the draw(...) method of the Circle class and you would remove the drawOval(...) method you currently have.
A "getter" method does not take parameters. If you feel other classes need to know the x, y, radius properties then create getX(), getY() and getRadiout() methods. I would suggest you don't need the get()/set() methods.
I suggest you first need to implement the above suggestions before making the painting dynamic.
Next, you don't need a ComponentListener added to the panel. Instead you need to add logic to the paintComponent(...) method of your CirclePanel class. The paintComponent() method will be invoked automatically every time the size of the panel changes. The basic logic would be to determine a "multiplier" to be used when painting each Circle.
So you can use the getPreferredSize() method to get the preferred width and you can use the getWidth() method of the panel to get the current size. So your multiplier would be:
double multiplierX = getWidth() / getPreferredSize().x;
Now this information needs to be passed to the Circle objects draw(...) method, so the method signature would become draw(Graphics g, double multiplierX). When you invoke the drawOval(...) method you apply the multiplier to the "x" parameter. This should cause the Circles to shift in the horizontal direction as the frame is resized.
You would then repeat the above step for the multiplierY to have the Circles shift in a vertical direction.
You would then need to decide how you want to affect the radius?

JPanel subclass "jumps around" when dragged

I'm currently coding on a small "Paint"-program of mine; so far, you can draw on it with a pen, zoom in up to 100x, and choose a color. Next thing I wanted to add was (or is) the possibility to drag the JPanel subclass, on which the image chosen to edit is drawn, around. Basically, by holding down the right mouse button, you change the location of the JPanel subclass, which is located on a JInternalFrame. I've got a code sample that should be working fine on its own; at least it does for me. To replicate the issue, just launch the DragPanelTest class and drag your mouse while over the component with the red border - the panel isn't dragged smoothly, but instead jumps back and forth all the time.
code:
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Point;
import java.awt.Toolkit;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.BorderFactory;
import javax.swing.JDesktopPane;
import javax.swing.JFrame;
import javax.swing.JInternalFrame;
import javax.swing.JPanel;
#SuppressWarnings("serial")
public class DragPanelTest extends JPanel implements MouseMotionListener, MouseListener {
Point oldDragPt;
boolean dragEnabled;
int newX;
int newY;
public static void main(String[] args) {
System.out.println("Launching Test.java ...");
JFrame frame = new JFrame("Title");
JInternalFrame intFrame = new JInternalFrame("title", true, true, true, true);
JDesktopPane deskPane = new JDesktopPane();
DragPanelTest dragPanel = new DragPanelTest();
frame.setSize(300, 300);;
frame.setLayout(null);
frame.setVisible(true);
Dimension d = Toolkit.getDefaultToolkit().getScreenSize();
int x = (d.width - frame.getWidth()) / 2;
int y = (d.height - frame.getHeight()) / 2;
frame.setLocation(x, y);
deskPane.setBounds(50, 50, 200, 200);
deskPane.setBorder(BorderFactory.createLineBorder(Color.BLACK));
frame.add(deskPane);
deskPane.add(intFrame);
intFrame.setSize(150, 150);
intFrame.add(dragPanel);
intFrame.setVisible(true);
}
public DragPanelTest() {
this.setSize(100,100);
this.setBorder(BorderFactory.createLineBorder(Color.RED));
this.addMouseListener(this);
this.addMouseMotionListener(this);
}
public void mousePressed(MouseEvent e) {
if (e.isMetaDown()) {
dragEnabled = true;
oldDragPt = new Point((int) this.getMousePosition().getX(), (int) this.getMousePosition().getY());
}
repaint();
}
public void mouseReleased(MouseEvent e) {
dragEnabled = false;
oldDragPt = null;
}
public void mouseDragged(MouseEvent e) {
if (e.isMetaDown() && this.getMousePosition() != null) {
if (oldDragPt != null) {
if (dragEnabled) {
int mouseX = (int) this.getMousePosition().getX();
int mouseY = (int) this.getMousePosition().getY();
int x = this.getX();
int y = this.getY();
int diffX = (mouseX - (int) oldDragPt.getX());
int diffY = (mouseY - (int) oldDragPt.getY());
newX = getX() + diffX;
newY = getY() + diffY;
this.setLocation(newX, newY);
this.repaint();
oldDragPt = new Point(mouseX, mouseY);
}
} else {
oldDragPt = new Point((int) this.getMousePosition().getX(), (int) this.getMousePosition().getY());
}
}
}
public void mouseClicked(MouseEvent e) {}
public void mouseEntered(MouseEvent e) {}
public void mouseExited(MouseEvent e) {}
public void mouseMoved(MouseEvent e) {}
}
Note that I left out some System.out.println() or #Override commands to shorten the code a bit.
Anyhow, if anyone knows what I'm doing wrong / what to improve, I'd be very thankful!

the panel isn't dragged smoothly, but instead jumps back and forth all the time.
When you have jumping its because the relative movements between the mouse and the component and the parent panel is off. Your code is too complicated to point out the exact line causing the problem.
The basic code for dragging a component around a panel is:
public class DragListener extends MouseInputAdapter
{
Point location;
MouseEvent pressed;
public void mousePressed(MouseEvent me)
{
pressed = me;
}
public void mouseDragged(MouseEvent me)
{
Component component = me.getComponent();
location = component.getLocation(location);
int x = location.x - pressed.getX() + me.getX();
int y = location.y - pressed.getY() + me.getY();
component.setLocation(x, y);
}
}
For more advanced code with more feature you can also check out the Component Mover class found in Moving Windows.

I had a similar problem with moving the viewport for a scrollpane. I think that the when a component is re-positioned, the value of the saved point is relative to the original location and is incorrect relative to the new location. My solution, which seems illogical to me, made the drag operation flow smoothly. What I did is to add the point delta back into the saved location.
This is the basic code to drag the viewport:
Point priorPanPoint;
public void mouseDragged(MouseEvent e) {
Point newPt = subtractPoints(priorPanPoint, e.getPoint());
priorPanPoint = addPoints(e.getPoint(), newPt);
newPt = addPoints(getVisibleRect().getLocation(), newPt);
viewport.setViewPosition(newPt);
}
public void mousePressed(MouseEvent e) {
priorPanPoint = e.getPoint();
}
private Point addPoints(Point p1, Point p2) {
return new Point(p1.x + p2.x, p1.y + p2.y); }
private Point subtractPoints(Point p1, Point p2) {
return new Point(p1.x - p2.x, p1.y - p2.y);
}

Drawing circle at centre of JFrame doesn't update after `repaint()`

I am writing a program which involves creating a JFrame and drawing a circle inside it using drawOval() from the Graphics class. I have reached a problem where I am trying to create a point at the centre of the JFrame, and then draw my circle with this pont being the x and y coordinates of the circle. Here is my code so far:
import java.awt.Graphics;
import javax.swing.JFrame;
import java.awt.event.*;
import java.awt.geom.Point2D;
import java.awt.Point;
class MouseJFrameMotion extends JFrame implements MouseMotionListener{
int circleXcenter;
int circleYcenter;
int circleRadius = 50;
boolean show = false;
public MouseJFrameMotion(){
addMouseMotionListener(this);
}
public void paint(Graphics g){
super.paint(g);
if(show){
g.drawOval(circleXcenter,circleYcenter, circleRadius*2,circleRadius*2);
}
}
public void mouseDragged(MouseEvent e){
}
Point frameCenter = new Point((this.getWidth()/2), (this.getHeight()/2));
public void mouseMoved(MouseEvent e){
int xLocation = e.getX();
int yLocation = e.getY();
show = true;
circleXcenter = (int) frameCenter.getX();
circleYcenter = (int) frameCenter.getY();
repaint();
}
}
public class GrowingCircle {
public static void main(String[] args) {
MouseJFrameMotion myMouseJFrame = new MouseJFrameMotion();
myMouseJFrame.setSize(500, 500);
myMouseJFrame.setVisible(true);
}
}
As you can see in the main() function, I set the size of the JFrame to 500x500. However, when the circle is drawn, it's x and y coordinates are (0,0) when I expect them to be (250, 250) based on Point frameCenter after repaint() is called. Where am I going wrong?

So two things...
Don't override paint of JFrame, there a JRootPane, contentPane and other components between the user and the frames surface which can interfere with the painting. Instead, use a JPanel and override its paintComponent method
At the time Point frameCenter = new Point((this.getWidth()/2), (this.getHeight()/2)); is evaluated, the frame's size is 0x0, you need to reevaluate the frameCenter before you paint the circle. When you do this will depend on how dynamic you want the change to be

I think you need both repaint() and revalidate() method

When you are constructing the class MouseJFrameMotion, the variable frameCenter is defined and set width and height 0 and it will never change. So what you can do is to calculate the frame center when you are drawing.
public void mouseMoved(MouseEvent e) {
int xLocation = e.getX();
int yLocation = e.getY();
show = true;
Point frameCenter = new Point((this.getWidth() / 2), (this.getHeight() / 2));
circleXcenter = (int) frameCenter.getX();
circleYcenter = (int) frameCenter.getY();
repaint();
}

Drawing and storing objects by clicking the mouse button

I am trying to draw circle objects with each click and then store every circle object into an Arraylist, I don't know why my program is not working! If I removed the arraylist and the line that create a new circle object, the program will work. How would I make my program store all circuit objects into an Arraylist ?
import javax.swing.JPanel;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.ArrayList;
import java.util.Random;
public class CircleObj extends JPanel {
private int rColor;
private int gColor;
private int bColor;
private int radius;
private Random rand = new Random();
private int xStart;
private int yStart;
ArrayList <Circle> xxx ;
public CircleObj () {
xxx = new ArrayList<Circle>();
addMouseListener(new MouseAdapter() {
public void mouseClicked (MouseEvent e) {
xStart = e.getX();
yStart = e.getY();
rColor = rand.nextInt(256);
gColor = rand.nextInt(256);
bColor = rand.nextInt(256);
radius = rand.nextInt(20);
repaint();
}
}); // end addMouseListener
}
public void paintComponent (Graphics g) {
super.paintComponent(g);
g.setColor(new Color(rColor, gColor, bColor));
g.fillOval(xStart, yStart, radius, radius);
xxx.add(new Circle());
}
private class Circle {
private int x;
private int y;
private int r;
private int rcol;
private int gcol;
private int bcol;
public Circle()
{
x=xStart;
y=yStart;
r=radius;
rcol= rColor;
gcol= gColor;
bcol= bColor;
}
}
}
======
import javax.swing.JFrame;
import java.awt.BorderLayout;
public class HW3 {
public static void main (String[] arg) {
JFrame frame = new JFrame("Circles");
CircleObj canvas = new CircleObj();
frame.add(canvas, BorderLayout.CENTER);
frame.setBounds(250, 98, 600, 480);
//frame.setLayout(new BorderLayout());
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
} // end main
} //end HW3

Don't add the new shape inside the paintComponent method, paintComponent can be called for any number of reasons, many of which you don't control, instead, create it when the mouseClicked event is triggered...
public void mouseClicked (MouseEvent e) {
xStart = e.getX();
yStart = e.getY();
rColor = rand.nextInt(256);
gColor = rand.nextInt(256);
bColor = rand.nextInt(256);
radius = rand.nextInt(20);
xxx.add(new Circle(xStart, yStart, new Color(rColor, gColor, bColor), radius));
repaint();
}
And then in your paintComponent, loop through the ArrayList and paint the circles...
public void paintComponent (Graphics g) {
super.paintComponent(g);
for (Circle c : xxx) {
g.setColor(c.getColor());
g.fillOval(c.getX(), c.getY(), c.getRadius(), c.getRadius());
}
}
Now, you're going to have to modify you Circle class to provide getters which the CircleObj can use in order to actually paint the circles...
Alternatively, you could make use of the Shapes API provided within Java...Have a look at Working with Geometry for more details...

Java Buffered Image, ontop of JPanel Issue

So here is my problem, my professor is having us make a paint program in which we pick an item and draw on it. However, the issue is that he wants us to draw on a buffered image and then have that on top of the JPanel.
As of right now almost everything works, you can pick one of the buttons I have set up, you can draw a rectangle and resize the frame. When you do this the image of the rectangle will not go away and the JPanel will extend. However the buffered image will not extend, you can see in the code that in my paintComponent method I make a buffered image if the grid == null, and if it is then it creates a image the width and height of my board. When I try and add a call to this method any other time it does not resize since the grid is no longer equal to null. I don't know how to call a resize on a buffered image.
Any ideas would be great!
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JPanel;
import java.awt.event.*;
import java.awt.image.BufferedImage;
/**
*
* #author Calvin Moss
*/
public class Drawing extends JPanel implements MouseListener
{
public int x1, x2 ,y1, y2;
public static Drawing instance;
BufferedImage grid;
static Graphics2D gc;
Drawing()
{
setBackground(Color.RED);
addMouseListener(this);
}
public static Drawing getInstance()
{
if(instance == null)
instance = new Drawing();
return instance;
}
public void paintComponent(Graphics g)
{
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
int w = Board.getInstance().getWidth();
int h = Board.getInstance().getHeight();
if(grid == null)
{
grid = (BufferedImage)(this.createImage(w,h));
gc = grid.createGraphics();
gc.setColor(Color.BLUE);
BufferedImage grid;
Graphics2D gc;
}
g2.drawImage(grid, null, 0, 0);
check();
}
public void draw()
{
Graphics2D g = (Graphics2D)getGraphics();
int w = x2 - x1;
if (w<0)
w = w *(-1);
int h = y2-y1;
if (h<0)
h= h*(-1);
switch(Main.choice)
{
case 1:
{
System.out.println("double gay");
gc.drawLine(x1, y1, x2, y2);
repaint();
break;
}
case 2:
{
check();
System.out.println("quad gay");
gc.drawRect(x1, y1, w, h);
repaint();
break;
}
}
}
public void check()
{
if (x1 > x2)
{
int z = 0;
z = x1;
x1 = x2;
x2 =z;
}
if (y1 > y2)
{
int z = 0;
z = y1;
y1 = y2;
y2 = z;
}
}
public void mouseExited(MouseEvent e){}
public void mouseEntered(MouseEvent e){}
public void mouseClicked(MouseEvent e){
System.out.println("Gay");
}
public void mousePressed(MouseEvent evt)
{
x1 = evt.getX();
y1= evt.getY();
}
public void mouseReleased(MouseEvent evt)
{
x2 = evt.getX();
y2 = evt.getY();
draw();
}
}

Make the BufferedImage the size of the desktop,then you don't have to worry about resizing.
Or, add a ComponentListener to the panel. When the component resizes, create a new BufferedImage to reflect the new panel size. Then draw old buffered image on to the new one. Of course with this approach data will be lost if the panel shrinks and then grows again.