Search code examples
javaswinggraphicsdrawingjapplet

How to dynamically resize rectangle from bottom to top. Java


So I am trying to make a Applet that uses two JSliders to resize a rectangle. I would like to have the height to go from bottom to top to match with what a Vertical JSlider looks like.

The only problem I am running into is that to draw in Java the drawing is from x & y which are both located at 0, moving x left(West), and y is going south. Resizing the width is simple since I am just using a method with a single parameter to increase or decrease width. With height, moving it up is fine (I have y set at 340 since that is the base I'd like to stay at). When I move the JSlider down, it moves down but will not reach the same height it was once at. I would really like to make is seem like the rectangle is moving the same way the JSlider is moving.

Main Applet Page (Where the JSliders are located):

import java.awt.BorderLayout;
import java.awt.Color;

import javax.swing.JApplet;
import javax.swing.JLabel;
import javax.swing.JSlider;
import javax.swing.SwingConstants;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;


public class ResizeRectangle extends JApplet {
    private JSlider sliderHeight;
    private JSlider sliderWidth;
    private JLabel title;
    private Contents content;
    private int oldValue = 0;
    public void init(){

        setLayout(new BorderLayout());

        title = new JLabel("Rectangle Resizer");
        content = new Contents();

        content.setBackground(Color.WHITE);

        //Slider for increasing the height
        sliderHeight = new JSlider(SwingConstants.VERTICAL, 10, 100, 10);
        sliderHeight.setMajorTickSpacing(10);
        sliderHeight.setPaintTicks(true);

        sliderHeight.addChangeListener(
                new ChangeListener(){
                    public void stateChanged(ChangeEvent e){
                        //If sliderHeight is greater than oldValue pass true for increase
                        if(sliderHeight.getValue() > oldValue){
                            content.setHeight(sliderHeight.getValue(), true);
                        }
                        //Else if sliderHeight is less than oldValue pass false for increase
                        else if(sliderHeight.getValue() < oldValue){
                            content.setHeight(sliderHeight.getValue(), false);
                        }
                        //Sets the value of sliderHeight to the value of oldValue to compare later
                        oldValue = sliderHeight.getValue();
                    }
                }
        );
        //Slider for increasing the widht
        sliderWidth = new JSlider(SwingConstants.HORIZONTAL, 10, 100, 10);
        sliderWidth.setMajorTickSpacing(10);
        sliderWidth.setPaintTicks(true);

        sliderWidth.addChangeListener(
                new ChangeListener(){
                    public void stateChanged(ChangeEvent e){
                        content.setWidth(sliderWidth.getValue());
                    }
                }
        );

        content.setBackground(Color.WHITE);
        add(title, BorderLayout.NORTH);
        add(content, BorderLayout.CENTER);
        add(sliderWidth, BorderLayout.SOUTH);
        add(sliderHeight, BorderLayout.EAST);

    }
}

This is the code for setting the height (as well as width):

import java.awt.Component;
import java.awt.Graphics;



public class Contents extends Component {

    private int height = 10;
    private int width = 10;
    //Initialize y to 340.
    private int y = 340;

    //Draw the rectangle
    public void paint(Graphics g){
        g.fillRect(5, y, width, height);
    }

    public void setHeight(int h, boolean increase){
        //If the slider is increasing, decrease y and increase height to give it the
        // look of rising 
        if(increase){
            y = y - h;
            height = height + h;
        }
        //else do the opposite
        else{
            y = y + h;
            height = height - h;
        }
        //For debugging purposes
        System.out.println("h = "+h);
        System.out.println("y = "+y);
        System.out.println("height = "+height+"\n\n");
        //Repaint the rectangle
        repaint();

    }
    //Set the width and repaint
    public void setWidth(int w){
        width = w;
        repaint();
    }
}

This is my third month of learning Java and I would greatly appreciate any feedback. Thank you in advance.


Solution

  • You have a logic issue with your code. The call used to change the height inside the change listener is

    content.setHeight(sliderHeight.getValue(), ...);
    

    which looks reasonable on first sight. However the method setHeight does not do what the name suggest (i.e. setting the hight) but instead increases or decreases the height by the amount given as first argument:

    if(increase){
        y = y - h;
        height = height + h;
    } else {
        y = y + h;
        height = height - h;
    }
    

    Thus if the slider changes from 10 to 20 and back to 10 you have the following change of values:

    // initial values
    y = 340
    height = 10     
    
    // change from 10 to 20, thus h=20 and increase as arguments for the method
    y -> 340 - 20 = 320
    height -> 10 + 20 = 30
    
    
    // change from 20 back to 10, i.e. h=10 and decrease
    y -> 320 + 10 = 330
    height -> 30 - 10 = 20
    

    What the method should do instead is indeed set the height, i.e.

    y = 340 - h;
    height = h;