Question

Building a lottery scratch-card app in Java. Have allot of it done, just need help with the scratching functionality.

Basically the program works like this:

1. create image for the background (right now its just a white background, but later would obviously be an scratchcard image with lotto symbols)
2. create the card_surface which is just a green layer than should reveal the image behind when scratched.
3. onMouseDragged() I used a stroke to draw a line from current mouse co-ordinates to newer mouse-cordinates. I have tried setting the Alphacomposite on this stroke thinking it would reveal the image underneath. Unfortunately not though.

Appreciate any help…

 import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;

import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.ImageIcon;

import java.awt.Stroke;
import java.awt.BasicStroke;
import java.awt.AlphaComposite;


public class Main {
  public static void main(String[] args) {
    JFrame frame = new JFrame();
    final DrawPad drawPad = new DrawPad();
    frame.add(drawPad, BorderLayout.CENTER);
    JButton clearButton = new JButton("New Scratch-Card");
    clearButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        drawPad.clear();
      }
    });
    frame.add(clearButton, BorderLayout.SOUTH);
    frame.setSize(500, 300);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setVisible(true);
  }

}
class DrawPad extends JComponent {
  Image image;
  Image card_surface;

  Graphics2D graphics2D;
  int currentX, currentY, oldX, oldY;



  public DrawPad() {
    final Stroke stroke = new BasicStroke (17.0F, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL);
    //image = new ImageIcon("iPhone-4-Pattern-Wallpaper-07.jpg").getImage();
    setDoubleBuffered(false);
    addMouseListener(new MouseAdapter() {
      public void mousePressed(MouseEvent e) {
        oldX = e.getX();
        oldY = e.getY();
      }
    });
    addMouseMotionListener(new MouseMotionAdapter() {
      public void mouseDragged(MouseEvent e) {
        currentX = e.getX();
        currentY = e.getY();
        if (graphics2D != null){
      graphics2D.setStroke(stroke);
          graphics2D.setPaint(Color.GRAY);
          graphics2D.setComposite(makeComposite(0.5F));
          graphics2D.drawLine(oldX, oldY, currentX, currentY);
        repaint();
        oldX = currentX;
        oldY = currentY;
      }
}
    });
  }
private AlphaComposite makeComposite(float alpha) {
    int type = AlphaComposite.SRC_OVER;
    return(AlphaComposite.getInstance(type, alpha));
  }
 public void clear() {
    image=null;
    card_surface=null;

    repaint();
  }
  public void paintComponent(Graphics g) {
    if (image == null) {

      image = createImage(getSize().width, getSize().height);
      graphics2D = (Graphics2D) image.getGraphics();
      graphics2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
          RenderingHints.VALUE_ANTIALIAS_ON);



    graphics2D.setPaint(Color.white);
        graphics2D.fillRect(0, 0, getSize().width, getSize().height);
        graphics2D.setPaint(Color.black);

    repaint();

    }

     if (card_surface == null) {
    card_surface = createImage(getSize().width, getSize().height);
        graphics2D = (Graphics2D) card_surface.getGraphics();
        graphics2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
      RenderingHints.VALUE_ANTIALIAS_ON);   

    graphics2D.setPaint(Color.green);
        graphics2D.fillRect(0, 0, getSize().width, getSize().height);

    repaint();
}


    g.drawImage(image, 0, 0, null);
    g.drawImage(card_surface, 0, 0, null);

  }


}

Answer 1

What you are trying to do is to reveal the underlying image when the user ‘scratches’ the top image, correct?

You actually need two images here : First, the original image and secondly, a blank image with a gray background that goes over the first image, hiding it. When the user ‘scratches’ the top image, you need to draw with a transparent colour OVER the gray image, revealing the underlying image.

So the steps are:

Draw original image with blank over it
When user ‘scratches’ draw with a transparent colour on the top image
Repaint the images, with the top image now having transparent sections
Repeat

It sounds complicated, but I don’t think it will be too hard, you just need to keep the two images apart and paint one over the other using a buffer. See this post How to make a color transparent in a BufferedImage and save as PNG for information on working with transparent buffered images.

I hope this helps.