Adding Transparent Circle to background images

Question

I need to make a drum instrument. I already have a background images and sound. Now I need to add 4 transparent circle to the drum to produced 4 different sound.

import javax.swing.*;
import java.awt.event.*;

public class PictureOnClickOneSound 
{

  public static void main(String args[]) 
  {
    // Create a "clickable" image icon.
    ImageIcon icon = new ImageIcon("C:\\Users\\apr13mpsip\\Pictures\\Drum2.jpg");
    JLabel label = new JLabel(icon);
    label.addMouseListener(new MouseAdapter() 
    {
      public void mouseClicked(MouseEvent me) 
      {
        sound1.Sound1.play();
        System.out.println("CLICKED");
      }
    }); 

    // Add it to a frame.
    JFrame frame = new JFrame("My Window");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.getContentPane().add(label);
    frame.pack();
    frame.setVisible(true);
  }
}

Start by taking a look at [Performing Custom Painting](http://docs.oracle.com/javase/tutorial/uiswing/painting/) and [2D Graphics](http://docs.oracle.com/javase/tutorial/2d/), in particular [Compositing Graphics](http://docs.oracle.com/javase/tutorial/2d/advanced/compositing.html) — MadProgrammer, Jul 01 '13 at 02:04
if the circle is transparent how will the user know where to click? Does the user just click randomly and hope for the best? Does your image have 4 drums and you are trying to overly the circles on each drum? — camickr, Jul 01 '13 at 02:05
Yes my image has 4 drums. And i want to place the 4 cirlce on the 4 drums — Jatjay12, Jul 01 '13 at 02:09
1) This has nothing to do with Eclipse (I.E. you do it the exact same way in Eclipse as in Netbeans or TextPad) 2) You should edit [your original post](http://stackoverflow.com/q/17390982/418556) rather than start a new one. — Andrew Thompson, Jul 01 '13 at 02:16
BTW - You might link to the (preferably small) image, so that like in [this thread](http://stackoverflow.com/q/10861852/418556) people can experiment. A picture paints a thousand words. ;) — Andrew Thompson, Jul 01 '13 at 03:44

score 2 · Answer 1 · answered Jul 01 '13 at 02:18

2

Create a Map that contains a Shape to represent a location on your image along with the Sound file to play when that location is clicked. Something like:

Map<Shape, Sound> shapes = new Hashmap<Shape, Sound>();

shapes.put(new Ellipse2D.Double(0, 0, 50, 50), soundFile1);
shapes.put(new Ellipse2D.Double(50, 50, 50, 50), soundFile2);

Then in the mouseClicked() event you need to search the map to see if the mouse was clicked in any of your shapes. Something like:

for (Shape shape: shapes.keySet())
{
    if (shape.contains(event.getPoint());
    {
        Sound sound = shapes.get(shape);
        sound.play();
    }
}

answered Jul 01 '13 at 02:18

camickr

321,443
19
166
288

if you dont mind. Can you show me where to put the sample code into – Jatjay12 Jul 01 '13 at 06:10
I showed you which code goes into the mouse listener. The other code doesn't go into the mouse listener. The code is not exact because I don't know how you play your music. The code I showed you is a concept because you will also need to determine the appropriate shape locations based on your image. – camickr Jul 01 '13 at 19:18

fmodos · Answer 2 · 2013-07-01T02:17:54.453

1

You dont need to add 'transparent circles', just use the properties getX() and getY() of the MouseEvent to identify the position it was clicked in the image and then play the relative sound to it.

For each circle, store the x, y center position and the radius.

public class Circle{
   double xCenter;
   double yCenter;
   double radius;
}

When the MouseEvent action is performed, iterate through the circles and check if the click was inside of any:

for(Circle c : circles){
   //check if the click was inside this circle
   if (Math.sqrt((c.xCenter-mouseEvent.getX())^2+(c.yCenter-mouseEvent.getY())^2) <= c.radius) {
      //play sound for c
   }
}

edited Jul 01 '13 at 02:17

answered Jul 01 '13 at 02:01

fmodos

4,472
1
16
17

if you dont mind. Can you tell me where to insert the sample that you give based on my code. – Jatjay12 Jul 01 '13 at 03:22
the for loop need to be inserted in the mouseClicked method, but you need to create the instance of the circles based in their x, y location in the image – fmodos Jul 01 '13 at 03:46

Adding Transparent Circle to background images

2 Answers2