I have a simple animation code that creates a meter type rectangle effect. I would like to create it so that it fills a panel completely. I am so close, but it extends past the frame on the bottom. What am I missing?
public class Main {
public static void main(String[] args) {
JFrame frame = new JFrame("Pong");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridLayout(1,2));
frame.setSize(500, 500);
//MouseTest test = new MouseTest();
Test test2 = new Test(frame.getWidth(), frame.getHeight(), frame.getHeight(), 50);
//frame.add(test);
frame.add(test2);
frame.setVisible(true);
}
}
public class Test extends JPanel implements ActionListener, MouseListener{
int y = 0, width, height, dy=0, maxHeight;
int BOTTOM;
Timer timer;
public Test(int width, int height, int BOTTOM, int SPEED){
setBackground(Color.BLUE);
this.width = width;
maxHeight = height;
this.BOTTOM = BOTTOM;
addMouseListener(this);
timer = new Timer(1000/SPEED, this);
timer.start();
}
public void move(){
if(y>=maxHeight){
dy = -1;
}
if(y<=0)
{
dy = 1;
}
y+=dy;
height+=dy;
//System.out.println(y);
repaint();
}
public void paintComponent(Graphics g){
super.paintComponent(g);
if(y<=maxHeight/2) {
g.setColor(Color.green);
g.fillRect(0, BOTTOM - y, width, height);
}
if(y>=maxHeight/2 && y<(maxHeight/10)*9){
g.setColor(Color.green);
g.fillRect(0, BOTTOM-(maxHeight/2), width, maxHeight/2);
g.setColor(Color.green);
g.fillRect(0, BOTTOM - y, width, height-(maxHeight/2));
}
if(y>=(maxHeight/10)*9){
g.setColor(Color.green);
g.fillRect(0, BOTTOM-(maxHeight/2), width, maxHeight/2);
g.setColor(Color.green);
g.fillRect(0, BOTTOM-(9*(maxHeight/10)), width, (4*maxHeight)/10);
g.setColor(Color.green);
g.fillRect(0, BOTTOM - y, width, height-(9*(maxHeight)/10));
}
for(int i = 1; i<6; i++)
g.fillRect(0, BOTTOM - (i*(maxHeight/5)), width, 10);
System.out.println(y);
}
Your panel takes up less room than your JFrame, because your frame has a title bar and window borders. You can just query in your paint method for the correct width and height used by the 'JPanel' with your JPanel's getWidth() and getHeight() (in other words, your JFrame's width and height is not the same as your JPanel's width and height, even though the JPanel takes up all the space within the frame visually between the borders).
Alternatively, if you did have logic where this was not possible, you could query the size of the insets of the frame, and subtract the left and right inset values from the width, and pass that as the width, and do the same for the height with the top and bottom inset values.
Override getPreferredSize of your JPanel, this will helps the layout manager determine the best way to layout your component
Use JFrame#pack to wrap the frame borders around the view
Use getWidth and getHeight to get the actual size the panel. You should do this whenever you need to know these values, don't store them for long periods, as the values can change
You should also have a read through Should I avoid the use of set(Preferred|Maximum|Minimum)Size methods in Java Swing?
This is basic example based on you code...
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Test1 {
public static void main(String[] args) {
new Test1();
}
public Test1() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
private int yPos;
private int dy = 1;
private int bottom = 50;
public TestPane() {
Timer timer = new Timer(40, new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
move();
}
});
timer.start();
}
#Override
public Dimension getPreferredSize() {
return new Dimension(500, 500);
}
public void move() {
if (yPos >= getHeight()) {
dy = -1;
}
if (yPos <= 0) {
dy = 1;
}
yPos += dy;
repaint();
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
int maxHeight = getHeight();
int width = getWidth();
int height = maxHeight;
if (yPos <= maxHeight / 2) {
g.setColor(Color.green);
g.fillRect(0, bottom - yPos, width, height);
}
if (yPos >= maxHeight / 2 && yPos < (maxHeight / 10) * 9) {
g.setColor(Color.green);
g.fillRect(0, bottom - (maxHeight / 2), width, maxHeight / 2);
g.setColor(Color.green);
g.fillRect(0, bottom - yPos, width, height - (maxHeight / 2));
}
if (yPos >= (maxHeight / 10) * 9) {
g.setColor(Color.green);
g.fillRect(0, bottom - (maxHeight / 2), width, maxHeight / 2);
g.setColor(Color.green);
g.fillRect(0, bottom - (9 * (maxHeight / 10)), width, (4 * maxHeight) / 10);
g.setColor(Color.green);
g.fillRect(0, bottom - yPos, width, height - (9 * (maxHeight) / 10));
}
for (int i = 1; i < 6; i++) {
g.fillRect(0, bottom - (i * (maxHeight / 5)), width, 10);
}
}
}
}
Another way to go is to use pack(). It sets the size of the frame to be the size of the frame's contents. In your code it would look like this:
frame.add(test2);
frame.pack();
If you do it this way, you don't need the frame.setSize() call. You can add the panel either with .add() as you've done or with:
frame.setContentPane(test2);
So I combined both your comments and got it to work correctly. Here is the code that works.
public class Main {
public static void main(String[] args) {
JFrame frame = new JFrame("Pong");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridLayout(1,2));
Insets inset = frame.getInsets();
Test test2 = new Test(200-(inset.right + inset.left), 200 -(inset.top + inset.bottom), 200, 50);
frame.setContentPane(test2);
frame.pack();
frame.setVisible(true);
}
}
public class Test extends JPanel implements ActionListener, MouseListener{
int y = 0, width, height, dy=0, maxHeight;
int BOTTOM;
Timer timer;
Dimension size;
Insets inset;
public Test(int width, int height, int BOTTOM, int SPEED){
size = new Dimension(width, height);
setBackground(Color.BLUE);
setPreferredSize(size);
inset = this.getInsets();
this.width = width-(inset.right+inset.left);
maxHeight = height;
this.BOTTOM = BOTTOM - (inset.bottom+inset.top);
addMouseListener(this);
timer = new Timer(1000/SPEED, this);
timer.start();
}
public void move(){
if(y>=maxHeight){
dy = -1;
}
if(y<=0)
{
dy = 1;
}
y+=dy;
height+=dy;
//System.out.println(y);
repaint();
}
public void paintComponent(Graphics g){
super.paintComponent(g);
if(y<=maxHeight/2) {
g.setColor(Color.green);
g.fillRect(0, BOTTOM - y, width, height);
}
if(y>=maxHeight/2 && y<(maxHeight/10)*9){
g.setColor(Color.green);
g.fillRect(0, BOTTOM - (maxHeight / 2), width, maxHeight / 2);
g.setColor(Color.green);
g.fillRect(0, BOTTOM - y, width, height-(maxHeight/2));
}
if(y>=(maxHeight/10)*9){
g.setColor(Color.green);
g.fillRect(0, BOTTOM-(maxHeight/2), width, maxHeight/2);
g.setColor(Color.green);
g.fillRect(0, BOTTOM-(9*(maxHeight/10)), width, (4*maxHeight)/10);
g.setColor(Color.green);
g.fillRect(0, BOTTOM - y, width, height-(9*(maxHeight)/10));
}
g.setColor(Color.white);
for(int i = 1; i<6; i++)
g.fillRect(0, BOTTOM - (i*(maxHeight/5)), width, 5);
}
Related
I have inefficient code of a square wave. I have 2 buttons, 1 table and something like a coordinate system where the square appears in. I want the wave to scroll/move in real time until it hits the end of the coordinate system instead of just appearing by selecting both of the buttons. Additionally, if anyone has a better way of drawing a square wave please tell me.
public void paint(Graphics g) {
super.paint(g);
Graphics2D g2d = (Graphics2D) g;
g2d.drawLine(20, 300, 20, 450);
g2d.drawLine(20, 350, 400, 350);
g2d.drawLine(20, 400, 400, 400);
g2d.drawLine(20, 450, 400, 450);
if (this.jButtonSTART.isSelected() & this.jButtonAND.isSelected()) {
this.draw(g2d);
}
}
public void draw(Graphics2D g2d) {
boolean up = true;
while (x <= 380) {
g2d.setColor(Color.blue);
if (x > 0 && x % 95 == 0) {
up = !up;
g2d.drawLine(20 + x, up ? 315 : 350 + y, 20 + x, up ? 350 : 315 + y);
} else {
if (up) {
g2d.drawLine(20 + x, 315 + y, 21 + x, y + 315);
} else {
g2d.drawLine(20 + x, 350 + y, 21 + x, y + 350);
}
}
x++;
}
x = 0;
}
Simple way to draw your square wave and move it:
Create a BufferedImage that is longer than your GUI. It should have length that matches a the period of your square wave and be at least twice as long as the GUI component that it's displayed in.
Draw within the paintComponent method override of a JPanel, not the paint method.
Call the super's paintComponent method first within your override.
You'll draw the image using g.drawImage(myImage, imageX, imageY, this) where imageX and imageY are private instance fields of the JPanel-extending drawing class.
In a Swing Timer, advance imageX with each tick of the Timer, that is each time its ActionListener's actionPerformed method is called).
Then call repaint() on the drawing JPanel within the same actionPerformed method.
Done.
for example, note that this code does not do exactly what you're trying to do, but does show an example of Swing animation using a Swing Timer and paintComponent.
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import javax.swing.*;
#SuppressWarnings("serial")
public class MoveWave extends JPanel {
private static final int PREF_W = 400;
private static final int PREF_H = 200;
private static final int TIMER_DELAY = 40;
public static final int DELTA_X = 2;
public static final int STARTING_MY_IMAGE_X = -PREF_W;
private static final Color COLOR_1 = Color.RED;
private static final Color COLOR_2 = Color.BLUE;
private static final Color BG = Color.BLACK;
private static final int CIRCLE_COUNT = 10;
private BufferedImage myImage = null;
private int myImageX = STARTING_MY_IMAGE_X;
private int myImageY = 0;
public MoveWave() {
setBackground(BG);
myImage = new BufferedImage(2 * PREF_W, PREF_H, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = myImage.createGraphics();
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.setPaint(new GradientPaint(0, 0, COLOR_1, 20, 20, COLOR_2, true));
for (int i = 0; i < CIRCLE_COUNT; i++) {
int x = (i * 2 * PREF_W) / CIRCLE_COUNT;
int y = PREF_H / 4;
int width = (2 * PREF_W) / CIRCLE_COUNT;
int height = PREF_H / 2;
g2.fillOval(x, y, width, height);
}
g2.dispose();
new Timer(TIMER_DELAY, new TimerListener()).start();
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (myImage != null) {
g.drawImage(myImage, myImageX, myImageY, this);
}
}
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet()) {
return super.getPreferredSize();
}
return new Dimension(PREF_W, PREF_H);
}
private class TimerListener implements ActionListener {
#Override
public void actionPerformed(ActionEvent e) {
myImageX += DELTA_X;
if (myImageX >= 0) {
myImageX = STARTING_MY_IMAGE_X;
}
repaint();
}
}
private static void createAndShowGui() {
JFrame frame = new JFrame("MoveWave");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(new MoveWave());
frame.setResizable(false);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> createAndShowGui());
}
}
I'm newbie in the swing and have a question how better to draw this shape:
I thought in two ways
to draw regular rectangle and to write custom border to it?
to draw regular rectangle + compound border(which contains 2 or 3 borders). But here i do not succeed to draw border inside the shape, is is possible at all? Something like this :
figure.setBorder(BorderFactory.createCompoundBorder(BorderFactory.createMatteBor‌​der(outside top,left,bottom, right, Color.WHITE), createMatteBorder(inside top,left,bottom, right, Color.WHITE)), where the inside border is small rectangle, and outside is big rectangle - not sure if it is possible???
Please advise and an examples will be highly appreciated!
Take a look at the Java 2D API. It helps you to draw complex shapes.
E.g.
class IrregularShape extends JComponent {
private int strokeWidth;
IrregularShape(int strokeWidth){
this.strokeWidth = strokeWidth;
}
#Override
protected void paintComponent(Graphics g) {
Graphics2D newGraphics = (Graphics2D) g.create();
Insets borderInsets = new Insets(0, 0, 0, 0);
Border border = getBorder();
if (border != null) {
borderInsets = border.getBorderInsets(this);
}
BasicStroke basicStroke = new BasicStroke(strokeWidth);
newGraphics.setStroke(basicStroke);
int x = getX() + borderInsets.left + strokeWidth;
int y = getY() + borderInsets.top + strokeWidth;
int width = getWidth() - x - borderInsets.right - strokeWidth;
int height = getHeight() - y - borderInsets.bottom - strokeWidth;
Double outterRactangleDouble = new Rectangle2D.Double(x, y, width, height);
Area outterRectangle = new Area(outterRactangleDouble);
Area innerRectangle = new Area(outterRactangleDouble);
AffineTransform affineTransform = new AffineTransform();
affineTransform.scale(0.5, 0.5);
affineTransform.translate(x + width * 0.10, y + height * 1.2);
innerRectangle.transform(affineTransform);
outterRectangle.subtract(innerRectangle);
newGraphics.draw(outterRectangle);
}
}
public class MainFrame {
public static void main(String[] args) {
JFrame frame = new JFrame("Irregular Shape");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
Container contentPane = frame.getContentPane();
contentPane.add(new IrregularShape(3));
frame.setSize(640, 150);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Result
and it's also resizeable
you can use the polygon class (java.awt.Polygon)
int xs = new int[]{1,2,3...7}; //your x-coordinates
int ys = new int[]{1,2,3...7}; //your y-coordinates
Shape irr = new Polygon(xs, ys, xs.length);
if you want to use certain borders you can use Graphics2D
public void paintComponent(Graphics gr){
Graphics2D g2d = (Graphics2D)gr;
GradientPaint redToWhite = new GradientPaint(0,0,color.RED,100, 0,color.WHITE);
g2d.setPaint(redtowhite)
g2d.fill(irr); //fill special color
Stroke customBorder = getCustomBorder();
g2d.setStroke(customBorder);
g2d.draw(irr); //draw 'special' borders
}
have a look at stroke and fill
note that Polygon implements the contains(double x, double y)method which lets you detect if you're inside or not
You could use a Area for example...
public class TestPane extends JPanel {
public TestPane() {
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
Area area = new Area(new Rectangle(10, 10, getWidth() - 20, getHeight() - 20));
area.subtract(new Area(new Rectangle(20, getHeight() / 2, getWidth() / 2, getHeight() - 10)));
g2d.draw(area);
g2d.dispose();
}
}
You define a custom shape...
public class TestPane extends JPanel {
public TestPane() {
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
Path2D path = new Path2D.Float();
path.moveTo(10, 10);
path.lineTo(getWidth() - 20, 10);
path.lineTo(getWidth() - 20, getHeight() - 20);
path.lineTo(getWidth() / 2, getHeight() - 20);
path.lineTo(getWidth() / 2, getHeight() / 2);
path.lineTo(20, getHeight() / 2);
path.lineTo(20, getHeight() - 20);
path.lineTo(10, getHeight() - 20);
path.closePath();
g2d.draw(path);
g2d.dispose();
}
}
Actually writing a custom border would be very, very difficult, because of the irregular style of shape, where would the components actually be contained?
It might be possible to create two or more borders, which could then be laid out so that the appeared as one
See Working with Geometry for more details
Updated with Border example...
Getting a Border to actually work is far more difficult, as the expectation is that the internal area of the border will be rectangular.
Based on the complex shape you've provided, one solution would be to actually create two borders, a left and right borer, which take care of generating a "safe" area for components to be laid out within, for example:
public class LeftBorder implements Border {
private int offset;
public LeftBorder(int offset) {
this.offset = offset;
}
#Override
public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
Path2D path = new Path2D.Float();
int xOffset = x + offset;
int yOffset = y + offset;
width -= offset;
height -= offset * 2;
float gap = width * 0.1f;
path.moveTo(xOffset, yOffset);
path.lineTo(xOffset + width, yOffset);
path.moveTo(xOffset, yOffset);
path.lineTo(xOffset, yOffset + height);
path.lineTo(xOffset + gap, yOffset + height);
path.lineTo(xOffset + gap, yOffset + (height - (height / 2)));
path.lineTo(xOffset + width, yOffset + (height - (height / 2)));
((Graphics2D)g).draw(path);
}
#Override
public Insets getBorderInsets(Component c) {
int height = c.getHeight();
height -= (height / 2);
System.out.println(height);
return new Insets(offset + 4, offset + 4, height + 4, 0);
}
#Override
public boolean isBorderOpaque() {
return false;
}
}
public class RightBorder implements Border {
private int offset;
public RightBorder(int offset) {
this.offset = offset;
}
#Override
public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
Path2D path = new Path2D.Float();
int xOffset = x;
int yOffset = y + offset;
width -= offset;
height -= offset * 2;
path.moveTo(xOffset, yOffset);
path.lineTo(xOffset + width, yOffset);
path.lineTo(xOffset + width, yOffset + height);
path.lineTo(xOffset, yOffset + height);
path.lineTo(xOffset, yOffset + (height - (height / 2)));
((Graphics2D)g).draw(path);
}
#Override
public Insets getBorderInsets(Component c) {
return new Insets(offset + 4, 0, offset + 4, offset + 4);
}
#Override
public boolean isBorderOpaque() {
return false;
}
}
This would then require you to provide at least two panels of equal height, for example:
import java.awt.Component;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.awt.geom.Path2D;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.Border;
public class Main {
public static void main(String args[]) {
new Main();
}
public Main() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridBagLayout());
frame.add(new LeftPane());
frame.add(new RightPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class RightPane extends JPanel {
public RightPane() {
setBorder(new RightBorder(10));
setLayout(new GridBagLayout());
add(new JLabel("Righty"));
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
}
public class LeftPane extends JPanel {
public LeftPane() {
setBorder(new LeftBorder(10));
setLayout(new GridBagLayout());
add(new JLabel("Lefty"));
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
}
}
This will also be relient on the layout manager been able to layout the two components next to each other
In addition to my first answer https://stackoverflow.com/a/34287251/974186
You can also implement it as a Border.
class IrregularBorder implements Border {
private int thickness;
public IrregularBorder(int thickness) {
this.thickness = thickness;
}
#Override
public void paintBorder(Component c, Graphics g, int x, int y, int width,
int height) {
Graphics2D graphics2d = (Graphics2D) g;
BasicStroke basicStroke = new BasicStroke(thickness);
graphics2d.setStroke(basicStroke);
int halfThickness = thickness / 2;
Double outterRactangleDouble = new Rectangle2D.Double(
x + halfThickness, y + halfThickness, width - thickness,
height - thickness);
Area outterRectangle = new Area(outterRactangleDouble);
Area innerRectangle = computeInnerRect(x, y, width, height,
outterRactangleDouble);
outterRectangle.subtract(innerRectangle);
graphics2d.draw(outterRectangle);
}
private Area computeInnerRect(int x, int y, int width, int height,
Double outterRactangleDouble) {
Area innerRectangle = new Area(outterRactangleDouble);
AffineTransform affineTransform = new AffineTransform();
affineTransform.scale(0.5, 0.5);
affineTransform.translate(x + width * 0.10, y + height * 1.2);
innerRectangle.transform(affineTransform);
return innerRectangle;
}
#Override
public Insets getBorderInsets(Component c) {
int left = (int) (thickness + (c.getWidth() * 0.6));
return new Insets(thickness, left, thickness, thickness);
}
#Override
public boolean isBorderOpaque() {
return true;
}
}
and use it as usual
public class MainFrame {
public static void main(String[] args) {
JFrame frame = new JFrame("Irregular Shape");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
Container contentPane = frame.getContentPane();
JPanel mainPanel = new JPanel(new BorderLayout());
mainPanel.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
contentPane.add(mainPanel);
JPanel irregularShapeBorderedPanel = new JPanel(new BorderLayout());
irregularShapeBorderedPanel.add(new JButton("Button"),
BorderLayout.CENTER);
irregularShapeBorderedPanel.setBorder(new IrregularBorder(2));
mainPanel.add(irregularShapeBorderedPanel);
frame.setSize(640, 150);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}
Basically, I want to make a rectangle that contains a mouse listener for my tic tac toe game. I intend to place them in between the lines to serve as mouse listeners. I have already set up a JFrame, all that is left is for me to add the rectangle. How would I go about doing this? Here is my code so far:
public class TicTacToe extends JFrame{
public static void main(String[] args) {
// TODO Auto-generated method stub
new TicTacToe();
}
public TicTacToe(){
//Sets up the frame
this.setTitle("Tic Tac Toe");
this.setPreferredSize(new Dimension(500,500));
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.pack();
this.setVisible(true);
}
public void paint(Graphics g){
//This just creates the lines for my tic tac toe game.
g.clearRect(0, 0, getWidth(), getHeight());
g.setColor(Color.black);
Graphics2D g2 = (Graphics2D) g;
g2.setStroke(new BasicStroke(10));
//Vertical
g2.drawLine(this.getWidth()/3, this.getHeight()/10, this.getWidth()/3, this.getHeight()-this.getHeight()/10);
g2.drawLine(2*(this.getWidth()/3), this.getHeight()/10, 2*(this.getWidth()/3), this.getHeight()-this.getHeight()/10);
//Horizontal
g2.drawLine(this.getWidth()/25,this.getWidth()/3,this.getHeight()-this.getHeight()/25,this.getWidth()/3);
g2.drawLine(this.getWidth()/25,(this.getWidth()/3)*2,this.getHeight()-this.getHeight()/25,(this.getWidth()/3)*2);
validate();
}
You could just use your painting algorithm as a bases for checking if the MouseEvent is within a given area, but this becomes a mess to maintain
Instead, you could take advantage of Graphics2D shape API, which would allow you to define virtual areas and simply use it's contains functionality to test if the MouseEvent falls within one of those areas
(ps- You're line drawing code is a little skewed)
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class TicTacToeDemo {
public static void main(String[] args) {
new TicTacToeDemo();
}
public TicTacToeDemo() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
private List<Rectangle> quads;
private Rectangle selected;
public TestPane() {
quads = new ArrayList<>(9);
MouseAdapter ma = new MouseAdapter() {
#Override
public void mouseMoved(MouseEvent e) {
selected = null;
for (Rectangle cell : quads) {
if (cell.contains(e.getPoint())) {
selected = cell;
break;
}
}
repaint();
}
};
addMouseMotionListener(ma);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
public void invalidate() {
// When ever the size of the container changes, we
// need to revalidate the rectangles based on the new size
// of the container
super.invalidate();
quads.clear();
int width = getWidth();
int height = getHeight();
if (width != 0 && height != 0) {
int vGap = getHeight() / 10;
int hGap = getWidth() / 15;
width -= hGap;
height -= vGap;
hGap /= 2;
vGap /= 2;
for (int xPos = 0; xPos < 3; xPos++) {
for (int yPos = 0; yPos < 3; yPos++) {
int x = hGap + (xPos * (width / 3));
int y = vGap + (yPos * (height / 3));
quads.add(new Rectangle(x, y, width / 3, height / 3));
}
}
}
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
if (selected != null) {
g2d.setColor(new Color(0, 0, 255, 128));
g2d.fill(selected);
}
g2d.setColor(Color.black);
Graphics2D g2 = (Graphics2D) g2d;
g2.setStroke(new BasicStroke(10));
//Vertical
g2.drawLine(this.getWidth() / 3, this.getHeight() / 10, this.getWidth() / 3, this.getHeight() - this.getHeight() / 10);
g2.drawLine(2 * (this.getWidth() / 3), this.getHeight() / 10, 2 * (this.getWidth() / 3), this.getHeight() - this.getHeight() / 10);
//Horizontal
g2.drawLine(this.getWidth() / 25, this.getHeight() / 3, this.getWidth() - this.getWidth() / 25, this.getHeight() / 3);
g2.drawLine(this.getWidth() / 25, (this.getHeight() / 3) * 2, this.getWidth() - this.getWidth() / 25, (this.getHeight() / 3) * 2);
g2d.dispose();
}
}
}
Have a look at 2D Graphics, Performing Custom Painting and Painting in AWT and Swing for more details
You might also want to have a look at Why not to draw directly inside JFrame, How to get the EXACT middle of a screen, even when re-sized, Java AWT drawString() does not display on window and How can I set in the midst? for reasons why you shouldn't override paint of a top level container like JFrame
I have a 10000x10000 BufferedImage and I'm looking to draw only part of it to a Canvas, is there a way to do this using args such as:
x, y, width, height ?
So for example, drawImage(img, x, y, width, height) would draw a rectangle from the image starting at (x, y) and having (width, height) as the dimensions?
EDIT:
I'm going to re- word this question:
I have a 10000x10000 image and I only want to display a portion of it on the screen, the problem with just offsetting it by x and y is that this still causes lag as the entire image is being rendered, just most of it off canvas. How can I basically make it so that the entire image is rendered but I can scroll around it without causing the canvas to lag?
I have a 10000x10000 BufferedImage and I'm looking to draw only part
of it to a Canvas, is there a way to do this using args such as:
Don't use canvas for custom painting in java. use JComponent or JPanel instead. It has a nice function paintComponent(Graphics g), override it and paint your image inside with g.drawImage(x, y, width, height, observer);
Swing graphics has Graphics.clipRect(int x, int y, int width, int height) to bound the area rectangle to which you wish to draw prior to drawing the image.
Edit (In response to your edited question):
First approach is to use BufferedImage..getSubimage(x, y, width, height) to get a sub image with specified rectangle region. It is faster.
BufferedImage img = ImageIO.read(new File("file"));
img = img.getSubimage(50, 50, 500, 500); // 500 x 500
This function will give you a new image cropped with the rectangle(x, y, width, height) of your original image you specified. Use the returned image to draw on your component.
Tutorial resource: Clipping the Drawing Region
Demo: Demonstrating clipping Image with Animation:
import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import java.util.*;
import java.util.logging.*;
import javax.imageio.ImageIO;
import javax.swing.*;
import javax.swing.Timer;
class MyCanvas extends JPanel implements ActionListener
{
public BufferedImage buffImg;
public Rectangle rectangle;
Random random;
long lastTimeChanged;
int dirX = 1, dirY = 1;
volatile static boolean imageLoading = true;
public MyCanvas() {
random = new Random();
rectangle = new Rectangle(50, 50, 250, 250);
lastTimeChanged = System.currentTimeMillis();
setBackground(Color.WHITE);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if(imageLoading)
{
showWaitForLoading(g);
return;
}
g.clipRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
g.drawImage(buffImg, 0, 0, getWidth(), getHeight(), this);
}
public void showWaitForLoading(Graphics g)
{
Graphics2D g2d = (Graphics2D)g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setColor(Color.DARK_GRAY);
g2d.fillRoundRect(getWidth()/2-100, getHeight()/2-15, 200, 30, 30, 30);
g2d.setColor(Color.WHITE);
g2d.drawString("Loading image...", getWidth()/2 - 45, getHeight()/2 + 3 );
g2d.dispose();
}
#Override
public void actionPerformed(ActionEvent e) {
long endTime = System.currentTimeMillis();
if(endTime - lastTimeChanged > 500)
{
dirX = random.nextInt(2) == 0 ? -1 : 1;
dirY = random.nextInt(2) == 0 ? -1 : 1;
lastTimeChanged = endTime;
}
if(rectangle.x < 0)dirX = 1;
else if(rectangle.x + rectangle.width > getWidth())dirX = -1;
if(rectangle.y < 0)dirY = 1;
else if(rectangle.y + rectangle.height > getHeight())dirY = -1;
rectangle.x = rectangle.x + dirX * 10;
rectangle.y = rectangle.y + dirY * 10;;
repaint();
}
}
public class CustomPainting {
public static void main(String[] args) throws IOException {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
final MyCanvas canvas = new MyCanvas();
JFrame frame = new JFrame();
frame.setSize(new Dimension(500, 500));
frame.add(canvas);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Timer timer = new Timer(200, canvas);
timer.start();
new Thread()
{
public void run()
{
try {
canvas.buffImg = ImageIO.read(new URL("http://images6.fanpop.com/image/photos/33400000/Cute-Panda-beautiful-pictures-33434826-500-500.jpg"));
MyCanvas.imageLoading = false;
} catch (IOException ex) {
Logger.getLogger(CustomPainting.class.getName()).log(Level.SEVERE, null, ex);
}
}
}.start();
}
});
}
}
You can scale or draw a part of an image using Graphics.drawImage as mentioned another answer and according to Java documentation, ImageObserver argument is not needed for BufferedImage so you can just pass null.
http://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html
However, my choice would be the clipping drawing region of image instead.
Here is an example you can try:
Graphics2D g = BufferedImage.getGraphics;
g.setClip(x, y, width, height);
g.drawImage(sx, sy, x - sx, y - sy, null );
Yes there is: drawImage(Image img, int x, int y, int width, int height, ImageObserver observer)
Ok here is the thing I am making a function grapher and I want when you move your mouse over a line it will show the coordinates. So I set up just a basic drawstring on the panel to show the mouse coords but I can not get to repaint well normally. It seems to be painting just fine but it is not clearing the contents before painting here is the code I have thus far.
public class Grapher extends JPanel implements MouseMotionListener{
private final int BORDER_GAP = 15;
private final int MAX_SCORE = 20;
private final int PREF_WIDTH = 800;
private final int PREF_HEIGHT = 650;
private final int GRAPH_POINT_WIDTH = 12;
private static final int GRAPH_INTERVAL = 15;
private static Point mse;
private List<Point> values;
public Grapher(List<Point> values) {
setMse(new Point(0,0));
this.values = values;
addMouseMotionListener(this);
}
public void paintComponent(Graphics g){
super.paintComponents(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
float xScale = ((float) getWidth() - 2 * BORDER_GAP) / (values.size()-1);
float yScale = ((float) getHeight() - 2 * BORDER_GAP) / (MAX_SCORE-1);
g2d.drawString(xScale+"", 50, 50);
g2d.drawString(yScale+"", 50, 70);
g2d.drawString(getWidth()/2+"", 50, 90);
g2d.drawString(mse.x +" " + mse.y, 50, 30);
//create axis
g2d.setColor(new Color(0x7e7e7e));
//x line
g2d.drawLine(BORDER_GAP, (getHeight() - BORDER_GAP)/2, getWidth() - BORDER_GAP, (getHeight() - BORDER_GAP)/2);
//y line
g2d.drawLine(getWidth()/2, getHeight() - BORDER_GAP, getWidth()/2, BORDER_GAP);
}
public Dimension getPreferredSize(){
return new Dimension(PREF_WIDTH, PREF_HEIGHT);
}
private static void createAndShowGui(){
List<Point> values = new ArrayList<Point>();
int maxDataPoints = 20;
for (int i = -GRAPH_INTERVAL; i <= GRAPH_INTERVAL; i++) {
String val = "";
try {
val = EquationSolver.solveEquation(variableReplace('x', i));
} catch (Exception e) {
val ="0";
e.printStackTrace();
}
System.out.println(i + "= " + val);
values.add(new Point(i, Integer.parseInt(val)));
}
Grapher panel = new Grapher(values);
JFrame frame = new JFrame("Grapher");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(panel);
frame.pack();
//frame.setLocationByPlatform(true);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable(){
public void run(){
createAndShowGui();
}
});
}
#Override
public void mouseMoved(MouseEvent e) {
setMse(new Point(e.getX(), e.getY()));
removeAll();
repaint();
}
#Override
public void mouseDragged(MouseEvent e) {
setMse(new Point(e.getX(), e.getY()));
//repaint();
}
Ok here is some images as to what the code is doing
the top numbers are the mouse position.
A fresh start to program: http://snag.gy/BFrUj.jpg.
After i move the mouse around a little: http://snag.gy/lNqie.jpg
Thanks for any help.
I would suggest the major problem you are having is related to g.dispose()
The graphics context is shared, meaning that if you dispose of the graphics context, nothing else can paint to it. Unless you create the context, you should never dispose it
Your other problem is, you are not actually calling super.paintComponent, which is responsible for preparing the graphics context for painting (by clearing the are to be painted), but instead, you are calling super.paintComponents(g) ... not the s at the end...
For some reason when I draw straight onto the panel it does that overlaying effect but if i add a white rectangle as a background that solves the problem.
...
float xScale = ((float) getWidth() - 2 * BORDER_GAP) / (values.size()-1);
float yScale = ((float) getHeight() - 2 * BORDER_GAP) / (MAX_SCORE-1);
g2d.setColor(Color.white);
g2d.fillRect(0, 0, getWidth(), getHeight());
g2d.setColor(new Color(0x7e7e7e));
g2d.drawString(xScale+"", 50, 50);
g2d.drawString(yScale+"", 50, 70);
g2d.drawString(getWidth()/2+"", 50, 90);
g2d.drawString(mse.x +" " + mse.y, 50, 30);
...
That appears to be a fix for the problem. If anyone can explain why drawing straight to the panel overlays or has a better solution please do answer.