Swing - SPLessons

Swing Painting

Chapter 16

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Swing Painting

Swing Painting

shape Description

Swing Painting, Swing API provides the painting functionality to the components. Swing uses paintComponent() to paint the components, 2D and 3D type of graphics will use the Swing Painting, machines will have two types of graphical representations such as pixel images called as Raster graphics and points, lines called as Vector graphics.

Vector graphics are more efficient when compared to Raster graphics i.e these will be in smaller size and consists of ability to zoom properly and even rotating, moving the effective of the image will not be changed. The example of 2D graphics as explained in below example.

2D Graphic

shape Example

The functioning of 2D graphics has been explained in the following example.

TwoD.java

package swing;//create the package

import java.awt.BasicStroke;//import the required packages
import java.awt.Color;
import java.awt.Font;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Paint;
import java.awt.Rectangle;
import java.awt.Shape;
import java.awt.TexturePaint;
import java.awt.font.GlyphVector;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class TwoD extends JPanel {//created a class that should extend JPanel
  static final int WIDTH = 1000, HEIGHT = 300; // Size 

  public String getName() {
    return "Paints";
  }

  public int getWidth() {
    return WIDTH;
  }

  public int getHeight() {
    return HEIGHT;
  }

  /** example draw */
  public void paint(Graphics g1) {
    Graphics2D g = (Graphics2D) g1;
    // GradientPaint to paint the entire background.
    // background color varies diagonally from deep red to pale blue
    g.setPaint(new GradientPaint(0, 0, new Color(150, 0, 0), WIDTH, HEIGHT,
        new Color(200, 200, 255)));
    g.fillRect(0, 0, WIDTH, HEIGHT); // set the background

    // Use GradientPaint to draw a box.
    // This one alternates between deep opaque green and transparent green.
    // Note: the 4th arg to Color() constructor specifies color opacity
    g.setPaint(new GradientPaint(0, 0, new Color(0, 150, 0), 20, 20,
        new Color(0, 150, 0, 0), true));
    g.setStroke(new BasicStroke(15)); // use wide lines
    g.drawRect(25, 25, WIDTH - 50, HEIGHT - 50); // draw the box

    // The glyphs of fonts can be used as Shape objects, which enables
    // us to use Java2D techniques with letters Just as we would with
    // any other shape. Here we get some letter shapes to draw.
    Font font = new Font("Serif", Font.BOLD, 10); // a basic font
    Font bigfont = // a scaled up version
    font.deriveFont(AffineTransform.getScaleInstance(30.0, 30.0));
    GlyphVector gv = bigfont.createGlyphVector(g.getFontRenderContext(),
        "SPL");
    Shape jshape = gv.getGlyphOutline(0); // Shape of letter S
    Shape ashape = gv.getGlyphOutline(1); // Shape of letter P
    Shape vshape = gv.getGlyphOutline(2); // Shape of letter L

    // outline the letters with a 5-pixel wide line
    g.setStroke(new BasicStroke(5.0f));

    // We're going to fake shadows for the letters using the
    // following Paint and AffineTransform objects
    Paint shadowPaint = new Color(0, 0, 0, 100); // Translucent black
    AffineTransform shadowTransform = AffineTransform.getShearInstance(
        -1.0, 0.0); // Shear to the right
    shadowTransform.scale(1.0, 0.5); // Scale height by 1/2

    // Move to the baseline of our first letter
    g.translate(65, 270);

    // Draw the shadow of the J shape
    g.setPaint(shadowPaint);
    g.translate(15, 20); // Compensate for the descender of the J
    // transform the J into the shape of its shadow, and fill it
    g.fill(shadowTransform.createTransformedShape(jshape));
    g.translate(-15, -20); // Undo the translation above

    //  fill the J shape with a solid (and opaque) color
    g.setPaint(Color.blue); // Fill with solid, opaque blue
    g.fill(jshape); // Fill the shape
    g.setPaint(Color.black); // Switch to solid black
    g.draw(jshape); // And draw the outline of the J

    // draw the A shadow
    g.translate(75, 0); // Move to the right
    g.setPaint(shadowPaint); // Set shadow color
    g.fill(shadowTransform.createTransformedShape(ashape)); // draw shadow

    // Draw the A shape using a solid transparent color
    g.setPaint(new Color(0, 255, 0, 125)); // Transparent green as paint
    g.fill(ashape); // Fill the shape
    g.setPaint(Color.black); // Switch to solid back
    g.draw(ashape); // Draw the outline

    // Move to the right and draw the shadow of the letter V
    g.translate(175, 0);
    g.setPaint(shadowPaint);
    g.fill(shadowTransform.createTransformedShape(vshape));

    
    // combines features of both Paint classes.
    BufferedImage tile = // Create an image
    new BufferedImage(50, 50, BufferedImage.TYPE_INT_RGB);
    Graphics2D tg = tile.createGraphics(); // Get its Graphics for drawing
    tg.setColor(Color.pink);
    tg.fillRect(0, 0, 50, 50); // Fill tile background with pink
    tg.setPaint(new GradientPaint(40, 0, Color.green, // diagonal gradient
        0, 40, Color.gray)); // green to gray
    tg.fillOval(5, 5, 40, 40); // Draw a circle with this gradient

    // Use this new tile to create a TexturePaint and fill the letter V
    g.setPaint(new TexturePaint(tile, new Rectangle(0, 0, 50, 50)));
    g.fill(vshape); // Fill letter shape
    g.setPaint(Color.black); // Switch to solid black
    g.draw(vshape); // Draw outline of letter

    // Move to the right and draw the shadow of the final A
    g.translate(160, 0);
    g.setPaint(shadowPaint);
    g.fill(shadowTransform.createTransformedShape(ashape));


    g.fill(ashape); // Fill letter A
    g.setPaint(Color.black); // Revert to solid black
    g.draw(ashape); // Draw the outline of the A
  }
  public static void main(String[] a) {
    JFrame f = new JFrame();
    f.addWindowListener(new WindowAdapter() {
      public void windowClosing(WindowEvent e) {
        System.exit(0);
      }
    });
    f.setContentPane(new TwoD());
    f.setSize(800,375);
    f.setVisible(true);
  }
}
           

GradientPaint to paint the entire background.Background color varies diagonally from deep red to pale blue.

g.setPaint(new GradientPaint(0, 0, new Color(150, 0, 0), WIDTH, HEIGHT,
        new Color(200, 200, 255)));
    g.fillRect(0, 0, WIDTH, HEIGHT);

Use GradientPaint to draw a box.

g.setPaint(new GradientPaint(0, 0, new Color(0, 150, 0), 20, 20,
        new Color(0, 150, 0, 0), true));
    g.setStroke(new BasicStroke(15)); // use wide lines
    g.drawRect(25, 25, WIDTH - 50, HEIGHT - 50);

The glyphs of fonts can be used as Shape objects, which enables us to use Java2D techniques with letters Just as we would with any other shape. Here we get some letter shapes to draw.

Font font = new Font("Serif", Font.BOLD, 10); // a basic font
    Font bigfont = // a scaled up version
    font.deriveFont(AffineTransform.getScaleInstance(30.0, 30.0));
    GlyphVector gv = bigfont.createGlyphVector(g.getFontRenderContext(),
        "SPL");

Outline the letters with a 5-pixel wide line.

g.setStroke(new BasicStroke(5.0f));

Combines features of both Paint classes.

BufferedImage tile = // Create an image
    new BufferedImage(50, 50, BufferedImage.TYPE_INT_RGB);
    Graphics2D tg = tile.createGraphics(); // Get its Graphics for drawing
    tg.setColor(Color.pink);
    tg.fillRect(0, 0, 50, 50); // Fill tile background with pink
    tg.setPaint(new GradientPaint(40, 0, Color.green, // diagonal gradient
        0, 40, Color.gray)); // green to gray
    tg.fillOval(5, 5, 40, 40); 

Output:

If  above code executed successfully,output will be as follows.

Image Paint

shape Example

Displaying the image is the good feature provided by the Swing API and pixels of an array is called image ,these pixels indicates colors at different levels.The flow of image code as shown follows.

ImagePaint.java

package swing;//create the package

import java.awt.Dimension;//import all the required packages
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

class Sai extends JPanel {//created class name that should extend JPanel

    Image img;

    public Sai() {
        
        loadImage();//image loading method
        Dimension dm = new Dimension(img.getWidth(null), img.getHeight(null));//to set the image height and width
        setPreferredSize(dm);
    }
    
    private void loadImage() {
        img = new ImageIcon("E:/splessons.png").getImage();//setting path of the image
    }

    private void doDrawing(Graphics g) {

        Graphics2D g2d = (Graphics2D) g;

        g2d.drawImage(img, 0, 0, null);
    }

    @Override
    public void paintComponent(Graphics g) {

        super.paintComponent(g);
        doDrawing(g);
    }
}

public class ImagePaint extends JFrame {//created a class name that should extend the JFrame and programme should be save with tje ImagePaint.java

    public ImagePaint() {//created consrtuctor
        initUI();
    }

    public final void initUI() {

        DrawPanel dpnl = new DrawPanel();
        add(dpnl);

        setTitle("Image");//set the title
        pack();
        setLocationRelativeTo(null);//set the location of the on the screen
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//to close the window
    }

    public static void main(String[] args) {//created the main method

        SwingUtilities.invokeLater(new Runnable() //The invokeLater() method places the application on the Swing Event Queue. It is used to ensure that all UI updates are concurrency-safe.
 
            @Override
            public void run() {
                FileChooserEx fcd = new FileChooserEx();
                fcd.setVisible(true);
            }
        });
    }
}
{
            @Override
            public void run() {
                ImagePaint ex = new ImagePaint();
                ex.setVisible(true);
            }
        });
    }
}

Create image loading method and create dimensions such as height, width of and image.

loadImage();//image loading method
        Dimension dm = new Dimension(img.getWidth(null), img.getHeight(null));//to set the image height and width.
        setPreferredSize(dm);

Set the path to load an image into the imageload() method.

private void loadImage() {
        img = new ImageIcon("E:/splessons.png").getImage();
}

Output:

If above code executed successfully, output will be as follows.Where imported path of an image of the SPlessons logo.

Summary

shape Points

  • Swing Painting – JLabel is one of the efficient component to display the image.
  • Swing Painting – DrawImage () method will be use full in swing painting to draw the image.
  • Swing Painting – JPanel gives minimum use full requirements to the components which are light weight.