Drawing on top

Is it possible to layer a see through pane on top of my contents pane so that i can effectively draw on top of my current image without having to call paintComponent().
how can i do it?

from the desciption of panes glasspane seems to be what you want but i never have done anything with theese panes so don't count on it.

Similar Messages

How can I draw on top of an image?

I'm using a JApplet with three JPanel's inside of it.
Inside one of those JPanel's I would like to place an image and a button. When the button is clicked, I want to draw an oval on top of the image . Each subsequent time the button is clicked, the oval will move to a different location.
So here are my questions:
1) What should I use to draw the image? (a JLabel with an ImageIcon on it?)
2) Could I simply use g.drawOval() in paintComponent() to directly draw on top of the image/JLabel?
Any help will be greatly appriciated.

Here's a sample to study;-import java.awt.*;
import java.awt.event.*;
public class DrawOnImage extends java.applet.Applet{
int xPos, yPos;
Image img;
public void init() {
    add(new Label("Hello World") );
    Button press = new Button("press");
    add(press);
    press.addActionListener(new ActionListener(){
      public void actionPerformed(ActionEvent e){
        xPos = (int)(Math.random()*270);
        yPos = (int)(Math.random()*170)+30;
        repaint();
    img = getImage(getDocumentBase(), "anImage.JPG");
public void paint(Graphics g){
    g.drawImage(img,0,30,this);
    if(yPos>=30)g.fillOval(xPos, yPos, 45, 45);
}

Draw on top of the system's Window Chrome?

We'd like to use the system chrome for our desktop app, but we'd also like to be able to draw on top of it. We would like to show a button that prompts them to purchase the trial version of our software for example, or notify them that there is an update available. I don't want to use custom Chrome because we want whatever is there by default. We simply want to draw on top of it. Is that an option? My Googling and experiments have not yielded much!
Many thanks for any help you can offer!

You can uninstall your current Persona and revert to the Default theme (Tools > Add-ons > Themes).
See [[Personas]] and http://kb.mozillazine.org/Themes (Lightweight theme)

Photo editor: fade a photo and draw on top of it?

I want to "fade" JPG pictures of people and then draw on top of them with a brush tool to emphasize posture (for instructional purposes) and save as a JPG. By "fade" I mean lighten the pic so that my drawn lines will stand out.
It appears that GIMP will do this. Can you also do that with SeaShore? In their documentation it is not clear to me; I get bogged down with tech lingo about layers and transparent colors and so on. My goal is to find a tool to do the above without getting something way more sophisticated than I need. Thanks for any help.
Fran

I'm not familar with GIMP, but I can shed some light onto the layers and transparency you would need to use.
Layers are quite simple. They are like a stack of papers, you can see the page on top, and the page below if it sticks out beyond the edges of the top sheet. The same is true in photo programs. You will see the top layer, and things behind it will be obscured by the objects or images on the top layer.
Transparency is the "fade" you are looking for. Note that Opacity is the opposite of transparency (as in 100% opaque is 0% transparent). My reducing transparency on a layer, you allow the layers behind it to become partially visible, IE you allow them to sneak through.
To accomplish your goal, should should take the images, and fade them by reducing their opacity. I would start with reducing it to 70%, but you'll have to play with it to get things just right.
After doing this, create a new layer, and be sure the new layer is on top off the image layer. In this new layer, take a brush tool and draw whatever you like. You should see you drawing ontop of the photo. If not, I suspect you have actually placed your line layer behind your photo layer, and you should simply trade their locations.
Hope this helps,

Any App for Drawing on top of iMovie film?

Hi,
im trying to find an app or some software for Imovie which could allow me to draw with my mouse on to my moving films. Ive seen the FX used in adverts and music videos where flowers for example grow up buildings and are animated , coming to life over the actual film itself. Its not a cartoonr app but something obviusly a bit more advanced. Any ideas. It dosent even have to be for Imovie really I just want to source this product.
I want to make a music video and be able to draw things over me as if Im being covered in drawing.

If you want to draw something on top the image in your component then
simply call Graphics.drawImage() before drawing shapes in the same paing method.
If you want to produce copy of image with some text drawn on top of it
then you have to get Graphics from the image (BufferedImage.getGraphics())
and use it to draw shapes/text.
Easiest way to load/save image from BufferedImage is to use ImageIO.

Drawing on top of a component

Hi there.
if I have JPanel that contains a JLabel that contains is a 600x800 image, how can i draw a shape like circle on top of the image? I would like to be able to see the image with the circle on it. How can i make this possible?
Right now i can draw the circle on its own JPanel, but that is not what i want.
Thanks

Notably, that you have a inner class referencing
image variables defined in the class it's nested in.Inner classes can access all members of the declaring class,
even private members. In fact, the inner class itself is said to be
a member of the class; therefore, following the rules of
object-oriented engineering, it should have access to all
members of the class.
The inner class does nothing to set it's own size,
, since as far as that JLabel instance knows, it
contains nothing.
But this is not corrected, it's
only relying on the BorderLayout to fill the frame
with the label.
While your sample works fine as is, it's not very
portable. As the OP posted after, he attempted to
use your code adding a JPanel in between the content
pane and the label, and it wouldn't work because of
the layout issues. To solve that, one might tend
towards defining a null layout and setting the bounds
explicitly, or one might add a setMinimumSize or
setPreferredSize call to get a size.
But that's adding more code to fix a problem that has
a much simpler solution. Which is to just give the
label the image directly, let the label size itself
automatically based on that image, let the label draw
the image itself and only override paint to get the
custom drawing done on top.
Myself, I understand what you were saying in your
code. But clearly the OP did not, and I suspect was
heading to starting patching what wasn't working by
applying more code when one could more cleanly use
less code and take advantage of what JLabel will
already do for you.Agreed. But this problem can also be easily solved with "setPreferredSize(new Dimension(200,200));" in the constructor of "Picture".

Drawing on top of a gif image.

I need to be able to have a JPanel that holds a .gif image, have another JPanel over top of it that can be drawn upon. An example of this is placing a map on a table and laying a piece of clear plastic over top of it, then drawing on the plastic the route you want to take. Just as in this example, I want to be able to erase lines on the top image, but I can probably figure that part out OK, I just need the code to layer the drawing panel on top on the image.
How can this be done?
Thanks.

Exactly what problem are you having with getting a layered pane? The Java Tutorial on this site can give you all the basics regarding setting one up.

HOWTO: Draw on top of a JPanel without it beeing repainted?

Hey,
I have made a JPanel which draws some graphics with the use of the paintComponent() method. What I want now is a layer on top of this JPanel where I can draw a filled circle where the mousepointer is. How can this be achieved without the underlying JPanel beeing redrawn?
- KHM

Reminds me of The Glass Pane example
http://java.sun.com/docs/books/tutorial/uiswing/components/rootpane.html

How to get Border to draw only top and bottom?

Does anyone know a way to get a Border to only draw on specific sides? i.e. create an EtchedBorder, then only have it draw the border on the top and bottom?

You can easily make your own border class and draw it yourself. Open up the source for Etched Border, copy it to your own border class, then modify it. That is legal to do. Then, you can provide the ability to allow the sides to be painted as options to your class. It is actually pretty easy to do.

Drawing on top camera view

i just begining to create an application for mobile phone. Im have tried to put the camera preview (VideoControl) on GameCanvas.
but i can't draw something else on top of the preview window because it is always covered by the preview.
So, how can i do that? How can i draw something else on top of the camera preview?
TiA

but i want it stay visible... so it seems impossible... am i right?
and another question : i can't get a snapshot if the controller is invisible? is there anyway to get a snapshot while the controller (the camera preview) is invisible???
TiA

Skin is drawing on top of components

I have a skin with HostComponent of SkinnableContainer. It looks like this:
<s:BitmapImage source="@Embed(source='/img/skinGraphics/footer.png')" />
    <s:Group id="contentGroup">
    </s:Group>
The skinnable container looks like this:
<s:SkinnableContainer>
     <s:HGroup width="1000">
        <s:HGroup width="100%" height="100%" top="4" horizontalAlign="left" id="leftBtnGroup"/>
        <s:HGroup height="100%" top="4" horizontalAlign="right" id="rightBtnGroup" />
    </s:HGroup>
</s:SkinnableContainer>
I dynamically add some buttons to the leftBtnGroup and the rightBtnGroup and they are being drawn behind the footer.png image. What am I doing wrong?
Thanks..

The footer is contained within the main view UI like this:
<s:SkinnableContainer skinClass="skins.BPSApplicationSkinGrey">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <view:TitleBar theModuleTitle="{breadCrumbStr}" top="43" left="0"/>
        <views:TestView id="testView" includeIn="TestView"/>
        <views:TestBrowser id="testBrowser" includeIn="TestBrowser"/>
        <com:Footer id="footer" bottom="8"/>
    </s:SkinnableContainer>
The buttons are attached on the enterState() function of testBroswer.
public function enterState():void{
                btnDelete = new Button();
                btnDelete.setStyle("skinClass", skins.FooterButtonGreenSkin);
                btnDelete.addEventListener(MouseEvent.CLICK, deleteBtnClickHandler);
                parentDocument.footer.addLeftButton(btnDelete);
                btnDelete.label = "DELETE TEST";
public function addLeftButton(btn:Button):void{
                leftBtnGroup.addElement(btn);

Drawing on top of an image

Hello!
I am trying to create a Panel on which I can draw stuff using the mouse. I have managed to get it working, apart from one small part. I want to have an image (jpg) as a background, and as soon as I try to add an image either the image does not show or the drawing stuff stops working.
Here is my working drawing code (i.e. without image):
public void paintComponent(Graphics g) {
         super.paintComponent(g);
         if (image == null || image.getWidth(null) != getWidth()
               || image.getHeight(null) != getHeight()) {
            image = (BufferedImage) createImage(getWidth(), getHeight());
            graph = (Graphics2D) image.getGraphics();
            graph.fillRect(0, 0, getWidth(), getHeight());
            graph.setColor( Color.white );
            graph.setStroke(new BasicStroke(3));
            graph.addRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING,
                  RenderingHints.VALUE_ANTIALIAS_ON));
         Rectangle r = g.getClipBounds();
         g.drawImage(image, r.x, r.y, r.x + r.width, r.y + r.height, r.x, r.y,
               r.x + r.width, r.y + r.height, null);
         if (endPoint != null) {
            g.setColor(currentColor);
            if (shapeType == 0)
               g.drawLine(startPoint.x, startPoint.y, endPoint.x, endPoint.y);
            if (shapeType == 1)
               g.drawOval(pn.x, pn.y, pn.width, pn.height);
            if (shapeType == 2)
               g.drawRect(pn.x, pn.y, pn.width, pn.height);
         public void mouseDragged( MouseEvent m ) {
            if (shapeType > 3 && shapeType != 8)
               return;
            if (endPoint == null)
               endPoint = new Point();
            repaint(pn.x, pn.y, pn.width + 1, pn.height + 1);
            pn.x = Math.min(startPoint.x, m.getX());
            pn.y = Math.min(startPoint.y, m.getY());
            pn.width = Math.abs(m.getX() - startPoint.x);
            pn.height = Math.abs(m.getY() - startPoint.y);
            if (shapeType == 0) {
               endPoint.setLocation(m.getPoint().getLocation());
            if (shapeType == 3) {
               graph.setColor(currentColor);
               graph.drawLine(startPoint.x, startPoint.y, m.getX(), m.getY());
               startPoint = m.getPoint();
            repaint(pn.x, pn.y, pn.width + 1, pn.height + 1);
         public void mouseReleased(MouseEvent m) {
            if (endPoint != null)
               draw();
            endPoint = null;
         public void mousePressed(MouseEvent m) {
            startPoint = m.getPoint();
         public void draw() {
            graph.setColor(currentColor);
            if (shapeType == 0)
               graph.drawLine(startPoint.x, startPoint.y, endPoint.x, endPoint.y);
            if (shapeType == 1)
               graph.drawOval(pn.x, pn.y, pn.width, pn.height);
            if (shapeType == 2)
               graph.draw(pn);
            repaint(pn.x, pn.y, pn.width + 1, pn.height + 1);
         }To me it seemed logical to add:
graph.drawImage(my_gif, 0, 0, this);at the end of the if statement, but that did not work.
Where and how should I add the image?
Thanks!

Thanks for answering!
Here is the entire code:
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import java.awt.image.BufferedImage;
import javax.swing.JApplet;
import javax.swing.JLabel;
import javax.swing.JPanel;
@SuppressWarnings("serial")
public class ImageExample extends JApplet {
   private static final Dimension DRAWING_AREA_SIZE = new Dimension(300,300);
   private static final Point DRAWING_AREA_UPPER_LEFT = new Point(100,50);
   private static final Color BACKGROUND_COLOR = Color.black;
   private Image my_gif;
   private Color currentColor = Color.white;
   private JLabel currentColorIndicator;
   private JPanel pane = new JPanel(null);
   Point startPoint, endPoint;
   Rectangle pn = new Rectangle();
   BufferedImage image;
   Graphics2D graph;
   int shapeType = 3;
   public void init() {
      setContentPane(pane);
      my_gif = getImage( getDocumentBase(), "fractal.gif" );
      pane.setOpaque(true);
      pane.setBackground(BACKGROUND_COLOR);
      createColorMap();
      DrawingPanel drawingPanel = new DrawingPanel();
      drawingPanel.setBounds(DRAWING_AREA_UPPER_LEFT.x, DRAWING_AREA_UPPER_LEFT.y, DRAWING_AREA_SIZE.width,
            DRAWING_AREA_SIZE.height);
      pane.add(drawingPanel);
   // Private methods
   private void createColorMap() {
      ColorPickerListener listener = new ColorPickerListener();
      JLabel colorText = new JLabel("Color");
      colorText.setBounds(10, DRAWING_AREA_UPPER_LEFT.y-20, 50, 25);
      colorText.setForeground(Color.white);
      pane.add(colorText);
      JLabel redColor = new JLabel("");
      redColor.addMouseListener(listener);
      redColor.setBackground(Color.RED);
      redColor.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+10, 50, 30);
      redColor.setOpaque(true);
      pane.add(redColor);
      JLabel blueColor = new JLabel("");
      blueColor.addMouseListener(listener);
      blueColor.setBackground(Color.blue);
      blueColor.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+40, 50, 30);
      blueColor.setOpaque(true);
      pane.add(blueColor);
      JLabel whiteColor = new JLabel("");
      whiteColor.addMouseListener(listener);
      whiteColor.setBackground(Color.white);
      whiteColor.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+70, 50, 30);
      whiteColor.setOpaque(true);
      pane.add(whiteColor);
      JLabel greenColor = new JLabel("");
      greenColor.addMouseListener(listener);
      greenColor.setBackground(Color.green);
      greenColor.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+100, 50, 30);
      greenColor.setOpaque(true);
      pane.add(greenColor);
      JLabel blackColor = new JLabel("");
      blackColor.addMouseListener(listener);
      blackColor.setBackground(Color.black);
      blackColor.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+130, 50, 30);
      blackColor.setOpaque(true);
      pane.add(blackColor);
      JLabel grayColor = new JLabel("");
      grayColor.addMouseListener(listener);
      grayColor.setBackground(Color.gray);
      grayColor.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+160, 50, 30);
      grayColor.setOpaque(true);
      pane.add(grayColor);
      JLabel yellowColor = new JLabel("");
      yellowColor.addMouseListener(listener);
      yellowColor.setBackground(Color.yellow);
      yellowColor.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+190, 50, 30);
      yellowColor.setOpaque(true);
      pane.add(yellowColor);
      // Display currently chosen color
      JLabel currentColorText = new JLabel("Current");
      currentColorText.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+230, 50, 25);
      currentColorText.setForeground(Color.white);
      pane.add(currentColorText);
      currentColorIndicator = new JLabel("");
      currentColorIndicator.setBounds(10, DRAWING_AREA_UPPER_LEFT.y+260, 50, 30);
      updateCurrentColorLabel();
      currentColorIndicator.setOpaque(true);
      pane.add(currentColorIndicator);
   private void updateCurrentColorLabel() {
      currentColorIndicator.setBackground(currentColor);
      currentColorIndicator.setForeground(new Color(255 - currentColor.getRed(), 255 - currentColor.getGreen(),
            255 - currentColor.getBlue()));
   // Private classes
   private class DrawingPanel extends JPanel implements MouseListener, MouseMotionListener {
      BufferedImage image;
      public DrawingPanel() {
         addMouseMotionListener(this);
         addMouseListener(this);
      public void paintComponent(Graphics g) {
         super.paintComponent(g);
         if (image == null || image.getWidth(null) != getWidth()
               || image.getHeight(null) != getHeight()) {
            image = (BufferedImage) createImage(getWidth(), getHeight());
            graph = (Graphics2D) image.getGraphics();
            graph.fillRect(0, 0, getWidth(), getHeight());
            graph.setColor( Color.white );
            graph.setStroke(new BasicStroke(3));
            graph.addRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING,
                  RenderingHints.VALUE_ANTIALIAS_ON));
            graph.drawImage(my_gif, 0, 0, this);
            System.out.println(my_gif + " <- my_gif");
            System.out.println(my_gif.getWidth(this) + " <- my_gif.getWidth(this)");
            System.out.println(my_gif.getHeight(this) + " <- my_gif.getheight(this)");
         Rectangle r = g.getClipBounds();
         g.drawImage(image, r.x, r.y, r.x + r.width, r.y + r.height, r.x, r.y,
               r.x + r.width, r.y + r.height, null);
         if (endPoint != null) {
            g.setColor(currentColor);
            if (shapeType == 0)
               g.drawLine(startPoint.x, startPoint.y, endPoint.x, endPoint.y);
            if (shapeType == 1)
               g.drawOval(pn.x, pn.y, pn.width, pn.height);
            if (shapeType == 2)
               g.drawRect(pn.x, pn.y, pn.width, pn.height);
         public void mouseDragged( MouseEvent m ) {
            if (shapeType > 3 && shapeType != 8)
               return;
            if (endPoint == null)
               endPoint = new Point();
            repaint(pn.x, pn.y, pn.width + 1, pn.height + 1);
            pn.x = Math.min(startPoint.x, m.getX());
            pn.y = Math.min(startPoint.y, m.getY());
            pn.width = Math.abs(m.getX() - startPoint.x);
            pn.height = Math.abs(m.getY() - startPoint.y);
            if (shapeType == 0) {
               endPoint.setLocation(m.getPoint().getLocation());
            if (shapeType == 3) {
               graph.setColor(currentColor);
               graph.drawLine(startPoint.x, startPoint.y, m.getX(), m.getY());
               startPoint = m.getPoint();
            repaint(pn.x, pn.y, pn.width + 1, pn.height + 1);
         public void mouseReleased(MouseEvent m) {
            if (endPoint != null)
               draw();
            endPoint = null;
         public void mousePressed(MouseEvent m) {
            startPoint = m.getPoint();
         public void draw() {
            graph.setColor(currentColor);
            if (shapeType == 0)
               graph.drawLine(startPoint.x, startPoint.y, endPoint.x, endPoint.y);
            if (shapeType == 1)
               graph.drawOval(pn.x, pn.y, pn.width, pn.height);
            if (shapeType == 2)
               graph.draw(pn);
            repaint(pn.x, pn.y, pn.width + 1, pn.height + 1);
         public void mouseClicked(MouseEvent arg0) {}
         public void mouseEntered(MouseEvent arg0) {         }
         public void mouseExited(MouseEvent arg0) {         }
         public void mouseMoved(MouseEvent arg0) {         }
   //Listeners
   private class ColorPickerListener extends MouseAdapter {
      public void mouseClicked(MouseEvent e) {
         JLabel color = (JLabel) e.getSource();
         currentColor = color.getBackground();
         updateCurrentColorLabel();
}So the problem might be that the system.outs in there put out:
sun.awt.image.ToolkitImage@1a0c10f <- my_gif
-1 <- my_gif.getWidth(this)
-1 <- my_gif.getheight(this)I don't know how to fix so that the height and width are set. Isn't it enough to do the:
      my_gif = getImage( getDocumentBase(), "fractal.gif" );before initializing the drawing panel?
Thanks again!

Draw shape on top of button with existing image

Hi all,
I have a button with an action. The action has an associated image (i.e. the Action.SMALL_ICON value is set to be an image from my resources).
I want to draw on top of my button and add a little triangle in the corner. I don't want to add this to the original image, nor add it to the action (if such a thing were even possible), because I don't necessarily want it always drawn. (Note, this is part of implementing my "Adobe-like popup buttons in a toolbar," which I already have another post on).
What's the best way to add this. Do I add it to the draw method of the button? Of the action? Something completely different?
Thanks!
Sam

Darryl.Burke wrote:
You really find it easier to do custom painting?
Well, in this case, yeah. The method above was really simple (ignoring the settings of the ints, which are just to make it easy to read, it's only like three lines of code).
I can be sure that there will always be a triangle, perfectly set in the corner of the button, pointing directly down into the corner. I don't need to worry about whether they have the font installed and whether it will look the same on a PC or Mac. When I position it I don't need to do any weird rotating of the character to 45 degrees. I can put it so that it's in the bottom-right corner without needing to first figure out the width and height of the character in the user's version of the font. Also, it will continue to work perfectly well if I decide to add text to the button, which would be very complicated with your method if it's even possible.
I liked your suggestion as thinking outside the box, but in the end I thought this was easier and more effective.
Thanks for all the help though!

How do you type multiple lines on a path? (label for top slope of bottle)

Ill describe the best I can...
I am making a label that will wrap around the top half of a bottle, the part that slopes to the spout. Because of this, the label is actually shaped more like an arch so when it goes onto the bottle, it will look more straight. The top part of the label of course will be a tighter arch than the bottom half. This is part of why its hard to make things look right. I know I can bend a line at the same angle and type on it and it looks right but I have a paragragh I have to do this with, about 5 lines worth. I dont want to have to make a different path line for each one because that would be a nightmare to get each line perfect with each other. Is there a way to do the "type on a path" to work with multiple lines at once?

Scott Falkner wrote:
You can't. Each line of text requires an explicit path. You could draw the top line and the bottom line, then make a three-step blend between the two. Expand the blend then link the paths so that text from path 1 flows to path 2, and so on. In the example below each path is linked to the one below. I only needed to paste text into the top path. I was able to link to each following path by clicking on the red + at the end of the previous path, then clicking on the path below.
You could also design the label flat and use a distortion envelope or Warp effect to bend it. This is how I have done such labels in the past. That method requires more experimentation, but makes edits easier.
That seems to be something that might work out. How do you separate each of the strokes from the blend to make them typable though?

Very simple question-how to fill a shape I draw with color

hi. I am new to photoshop and having a lot of trouble selecting any shape that I draw. I am trying to do a tutorial that involves filling a canvas with gray, then drawing a smaller white rectangle inside of the larger gray canvas/rectangle. (I did not forget to unlock the background).
My question: how do i select and fill (with white) the second rectangle I draw on top of the larger gray rectangle???
In general, I cannot figure out how to select and/or fill any shape I draw using the rectangle tool. Likewise, the marque shape tools are no help as I cannot seem to draw a marque on my gray rectangle in order to select it and fill it with a white fill. I have also tried to use a "fill layer."
I am almost certain that something is wrong with my computer(I reset the settings), but then again I have not used photoshop in over a year. Any help will be greatly appreciated.

The Rectangle Tool sgould create a Work Path, Shape Layer or Fill Pixels according to the Settings in the Options Bar.
The Rectangular Marquee Tool should create a Selection, which you could Edit > Fill or use as a Layer Mask for a Solid Color Layer.
Could you please post a screenshot with the pertinent Panels visible?

Drawing on top

Similar Messages

Maybe you are looking for