Create a margins editor component like the one in Microsoft word

I have a Java Swing application that i want to create a nice component in it like a component in Microsoft word. In Microsoft word you can change the margins of your document like in here :

The trick here is that if you change the Top margins to (Let's say) 1.5" then the Preview image will change to show this, so the lines will move down a bit in the image to show that change in the margins so the user can feel how muc开发者_如何转开发h his document will be affected by this change. So for example if i change the left margin to (4.0") the image will look like this :

What i did is create 2 images a blank page image + another image that contains lines only(Lines image), like these 2 images :

I inserted each image in a JLabel above each other, and now when i change the JSpinner top margin value, i keep the "blank page" image fixed, but i change the border of the "lines image" to move it down a bit. The trick worked fine for the top margin, but the behavior goes totally wrong if i change the bottom/right/left margins.

Here is my code that i apply when changing any JSpinner value :

private void marginSpinnerStateChanged() {
    //1. Get the approximate values of all margins :
        int topMargin = (int)( Float.valueOf( topSpinner.getValue().toString() ) * 8 );
        int bottomMargin = (int)( Float.valueOf( bottomSpinner.getValue().toString() ) * 8 );
        int leftMargin = (int)( Float.valueOf( leftSpinner.getValue().toString() ) * 8 );
        int rightMargin = (int)( Float.valueOf( rightSpinner.getValue().toString() ) * 8 );

    //2. Apply all specified margins to the lines label : 
        linesLabel.setBorder( new EmptyBorder( topMargin, leftMargin, bottomMargin, rightMargin ) );
}

Can you help me continue this to work right ?

---

You could just draw the image on top of the paper and scale the image as you go. So you would override the paintComponent() method of a JComponent to do something like:

g.drawImage(image, x, y, width, height, null);

x - would be the left margin
y - would be the top margin
width - would be (maxWidth - leftMargin - rightMargin)
height - would be (maxHeight - topMargin - bottomMargin)

If you don't like scaling the image you can always use a BufferedImage and then use the getSubImage(...) method to get an image the desired size to be painted.

---

If you notice, they don't shift the textual image. Instead, they only show half of it. This is simple image manipulation. For a good example, see this.