I'm working with an application in which I add a heavyweight (Canvas) to a JFrame. The Canvas is a 3rd party component, so I am required to keep it heavyweight. I'd like to add capabilities for the user to draw on the canvas and paint a selection rectangle.
I don't think I can do this with the glass pane since the heavyweight canvas will be displayed over the glass pane. I've tried adding a mouse listener to the canvas and drawing directly on its graphics, but that seems to give the "flicker" effect since it's not a lightweight double-buffered component.
Is there a way to achieve this smooth drawing on heavyweight components?
This is my current attempt in the paint method of the heavyweight component, but there is still the flashing.
#Override
public void paint(Graphics g)
{
super.paint(g);
if (showUserSelection)
{
Point startDrawPoint = new Point(Math.min(startSelectPoint.x,
endSelectPoint.x), Math.min(startSelectPoint.y,
endSelectPoint.y));
Point endDrawPoint = new Point(Math.max(startSelectPoint.x,
endSelectPoint.x), Math.max(startSelectPoint.y,
endSelectPoint.y));
int w = endDrawPoint.x - startDrawPoint.x;
int h = endDrawPoint.y - startDrawPoint.y;
if (w > 0 && h > 0)
{
BufferedImage img = new BufferedImage(w, h,
BufferedImage.TYPE_INT_ARGB);
Graphics2D imgGraphics = img.createGraphics();
imgGraphics.fillRect(0, 0, w, h);
g.drawImage(img, startDrawPoint.x, startDrawPoint.y, w, h,
null);
}
}
}
I'm not aware of a drop in "Host AWT/SWT in Swing" component, but you should be able to build a work around yourself.
Have you considered implementing double buffering yourself?
You're 90% of the way there with your code, just at a glance.
#Override
public void paint(Graphics g)
{
BufferedImage buffer = new BufferedImage(COMPONENT_WIDTH, COMPONENT_HEIGHT, BufferedImage.TYPE_INT_ARGB);
Graphics bufferG = buffer.getGraphics();
super.paint(bufferG);
if (showUserSelection)
{
Point startDrawPoint = new Point(Math.min(startSelectPoint.x,
endSelectPoint.x), Math.min(startSelectPoint.y,
endSelectPoint.y));
Point endDrawPoint = new Point(Math.max(startSelectPoint.x,
endSelectPoint.x), Math.max(startSelectPoint.y,
endSelectPoint.y));
int w = endDrawPoint.x - startDrawPoint.x;
int h = endDrawPoint.y - startDrawPoint.y;
if (w > 0 && h > 0)
{
bufferG.fillRect(startDrawPoint.x, startDrawPoint.y, w, h);
}
}
g.drawImage(buffer, 0, 0, null);
}
Related
In Java, I can write pixel data to an image that is then printed to the screen by overridden methods (paint and paintComponent). I can refresh the screen easily by updating the image and calling refresh(), which calls the paint/paintComponent cycle.
I'm wanting to do this in swift (3) with a UIImage. I can update the image, but I can't figure out how to repeatedly project the image onto the screen, print the screen, and repeat as I need to refresh the screen.
Firstly, what type of swift project (Single view app., Game, etc.) is best for repeatedly refreshing the screen?
And secondly how do I go about creating a (regulated) loop in Swift that refreshes the screen every so often?
In java this would look like (in a class that extends Frame):
static int width = 1440;
static int height = 900;
private BufferedImage canvas;
static Color[][] RGBMap = new Color[width][height];
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
g2.setBackground(Color.WHITE);
g2.clearRect(0, 0, width, height);
g2.drawImage(this.canvas, null, null);
paint();
}
public void paint() {
int i = 0;
while (i < width) {
int t = 0;
while (t < height) {
this.canvas.setRGB(i, t, RGBMap[i][t].getRGB());
t++;
}
i++;
}
//Refreshes RGBMap
iterate();
repaint();
}
I have a function that draws a rotated picture on a g2 component but for some reason I can't give it any colored background...
I was trying to use methods .setColor() and .setBackground() but with no use.
I have seen a similiar case here Graphics2D: Drawing black on white?
but it didn't really help. Here is my function:
public void rotateImage1(double degrees, ImageObserver o){
double sin = Math.abs(Math.sin(Math.toRadians(degrees)));
double cos = Math.abs(Math.cos(Math.toRadians(degrees)));
ImageIcon icon = new ImageIcon(this.spiral);
int w = icon.getIconWidth();
int h = icon.getIconHeight();
int neww = (int)Math.floor(w*cos+h*sin);
int newh = (int)Math.floor(h*cos+w*sin);
BufferedImage blankCanvas = new BufferedImage(neww, newh, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = (Graphics2D)blankCanvas.getGraphics();
if(PhotoEdit.black)
g2.setColor(Color.BLACK);
else
g2.setColor(Color.WHITE);
g2.translate((neww-w)/2, (newh-h)/2);
g2.rotate(Math.toRadians(degrees), icon.getIconWidth()/2, icon.getIconHeight()/2);
g2.drawImage(this.spiral, 0, 0, o);
this.spiral = blankCanvas;
}
PhotoEdit.black is a boolean variable that is true if the user selected the checkbox with black background option.
You are setting the color in graphics, but you aren't drawing it to the panel.
You can use g2.setColor(...) and g2.fillRect(...) and specify coordinates that cover the whole panel, and then draw your image on top.
Docs for fillRect: http://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html#fillRect%28int,%20int,%20int,%20int%29
Is there anyway to find the current position of a buffered image on jpanel?
I draw an image on buffer, named it currentImage. Now I want to move it around a Panel by using affine transform.
To do translation by using mouse, I have to know the current position, new position and update the new position.
But I have trouble in getting the current position of the BufferedImage. There is no method in the IDE's suggestion working.
Can anyone give me an idea how to do this ?? Thanks!
EDIT
this is my draw and paintComponent method:
private void draw(){
AlphaComposite ac = AlphaComposite.getInstance(AlphaComposite.SRC);
int w = this.getWidth(); int h = this.getHeight();
if (currentImage == null || width != w || height != h){
width = w;
height = h;
currentImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
graphics = currentImage.createGraphics();
graphics.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_GASP);
drawClearAndGradedArea(graphics);
drawActualRunway(graphics, width, height, width, height);
drawLeftToRight(graphics);
drawRightToLeft(graphics);
drawCentralLine(graphics);
graphics.setComposite(ac);
}
}
paintComponent()
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.clearRect(0,0, this.getWidth(), this.getHeight());
RenderingHints rh = new RenderingHints(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g2d.setRenderingHints(rh);
g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_GASP);
/*
* main components on panel
*/
this.draw();
this.animation();
g2d.drawImage(currentImage, transform, this);
drawNote(g2d);
g2d.dispose();
}
I have a JPanel which displays an image. In a separate class, I'm reading from an xml file points. I am firstly creating an arraylist of triangles from these points. However I need to show the triangles on the image, i.e. draw them on! (yes this should be simple). But as these points and triangles are created in another class, I do not seem to be able to draw them on the already-displayed image within the GUI class. I have tried creating a ArrayList in the JPanel itself, which I update and then want to repaint, although it will not let me do this as shown below:
Class
triangles = clips.getTriangles();
tempPanel.setTriangles(triangles){
JPanel
public void settriangles(ArrayList<Point[]> t){
triangles = t;
repaint();
}
My only other idea is for the JPanel to have a listener waiting for when triangles are returned, updating the field and hence then repainting.
Any ideas?
Thanks
Edit: Code for Drawing
public void settriangles(ArrayList<Point[]> t){
triangles = t;
repaint();
}
public void paintComponent(Graphics g) {
System.out.println("in paint component");
if (g != null) {
Graphics2D graphics = (Graphics2D) g;
try {
Rectangle back_rect = new Rectangle(0, 0, getWidth(),
getHeight());
graphics.setColor(GuiComponentGenerator.GUI_BACKGROUND_COLOUR);
graphics.fill(back_rect);
if (image != null) {
int width = Math.round(image.getWidth() * magnification);
int height = Math.round(image.getHeight() * magnification);
Rectangle image_rect = new Rectangle(offset.x, offset.y,
width, height);
graphics.setColor(Color.BLACK);
graphics.draw(image_rect);
graphics.drawImage(image, offset.x, offset.y, width,
height, null);
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
for(int pos = 0; pos < triangles.size(); pos++){
Point[] current = triangles.get(pos);
ArrayList<Point> current_triangle = new ArrayList<Point>();
current_triangle.add(current[0]);
current_triangle.add(current[1]);
current_triangle.add(current[2]);
drawRegion(graphics, current_triangle);
}
}
}
finally {
graphics.dispose();
}
}
private void drawRegion(Graphics2D graphics, ArrayList<Point> points) {
graphics.setColor(trans_grey);
Area area = getArea(points);
graphics.fill(area);
graphics.setStroke(new BasicStroke(2));
graphics.setColor(Color.BLACK);
graphics.draw(area);
}
private Area getArea(ArrayList<Point> points) {
Area area = new Area(getPath(points, true));
return area;
}
private GeneralPath getPath(ArrayList<Point> points, boolean close_path) {
GeneralPath path = new GeneralPath();
Point current_screen_point = calculateScreenPoint(points.get(0));
path.moveTo(current_screen_point.x, current_screen_point.y);
for (int point_num = 1; point_num < points.size(); point_num++) {
current_screen_point = calculateScreenPoint(points.get(point_num));
path.lineTo(current_screen_point.x, current_screen_point.y);
}
if (close_path)
path.closePath();
return path;
}
public Point calculateScreenPoint(Point image_point) {
float h_proportion = (float) image_point.x / (float) image.getWidth();
float v_proportion = (float) image_point.y / (float) image.getHeight();
float image_width_in_panel = (float) image.getWidth() * magnification;
float image_height_in_panel = (float) image.getHeight() * magnification;
Point on_screen_point = new Point(0, 0);
on_screen_point.x = offset.x
+ Math.round(h_proportion * image_width_in_panel);
on_screen_point.y = offset.y
+ Math.round(v_proportion * image_height_in_panel);
return on_screen_point;
}
Your paintComponent leaves a little to be desired ;)
Firstly, you should never get a null graphics unless the paint method has been called in correctly, which in case they deserve for it to fail.
You should try and use Graphics.create to create a copy of the incoming Graphics context. This allows you to mess with the Graphics properties (such as transforms etc) without adversly effecting the original
I don't know what the image is all about, but basically, if its null, your triangles will never paint (don't know if this is what you want or not).
I don't know what the offset relates to, but just in case, the 0x0 point is always the top, left corner of your component.
public void paintComponent(Graphics g) {
// This is important, you will to have a very good reason not to call this
super.paintComponent(g);
System.out.println("in paint component");
// Should never need this. You should never call the paintComponent
// directly.
// if (g != null) {
// Create a copy of the graphics, with which you can play...
Graphics2D graphics = (Graphics2D) g.create();
try {
Rectangle back_rect = new Rectangle(0, 0, getWidth(),
getHeight());
graphics.setColor(Color.GREEN);
graphics.fill(back_rect);
// What's this trying to do...
// Where do you produce this???
// Because I didn't know where the image was been produced
// I commented out the code, but you should be aware
// That if the image is null, you triangles will never paint...
// if (image != null) {
// int width = Math.round(image.getWidth() * magnification);
// int height = Math.round(image.getHeight() * magnification);
//
// Rectangle image_rect = new Rectangle(offset.x, offset.y,
// width, height);
// graphics.setColor(Color.BLACK);
// graphics.draw(image_rect);
// graphics.drawImage(image, offset.x, offset.y, width,
// height, null);
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
for (int pos = 0; pos < triangles.size(); pos++) {
Point[] current = triangles.get(pos);
ArrayList<Point> current_triangle = new ArrayList<Point>(3);
current_triangle.add(current[0]);
current_triangle.add(current[1]);
current_triangle.add(current[2]);
drawRegion(graphics, current_triangle);
}
//} // From the image != null
} finally {
graphics.dispose();
}
}
I'd also suggest you have a read through
2D Graphics
Performing Custom Painting in Swing
If you haven't already ;)
This article will give you all the info you need http://java.sun.com/products/jfc/tsc/articles/painting/
but I think you are missing -
super.paintComponent(g);
public class MyPanel extends JPanel {
protected void paintComponent(Graphics g) {
// Let UI delegate paint first
// (including background filling, if I'm opaque)
super.paintComponent(g);
// paint my contents next....
}
}
I worked out how to draw triangles on the image, when passing through an arrayList, where each Point[] represents the points of the triangle.
Note that this is now in a single entire class which is passed the information, rather than trying to call repaint from another class.
public AnnotatedDisplayTriangles(BufferedImage image, String image_path, ArrayList<Point[]> triangles) {
this.image = image;
this.image_path = image_path;
this.triangles = triangles;
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
// Draw image centered.
int x = (getWidth() - image.getWidth())/2;
int y = (getHeight() - image.getHeight())/2;
g.drawImage(image, x, y, this);
Stroke drawingStroke = new BasicStroke(2);
Graphics2D graph = (Graphics2D)g;
graph.setStroke(drawingStroke);
graph.setPaint(Color.black);
for(int p = 0; p < triangles.size(); p++){
Point[] current_triangles = triangles.get(p);
for(int triangle = 0; triangle < current_triangles.length; triangle++ ){
Point current = current_triangles[triangle];
Point next;
if(triangle == current_triangles.length -1 )
next = current_triangles[0];
else
next = current_triangles[triangle + 1];
Line2D line = new Line2D.Double(current.x, current.y, next.x, next.y);
graph.draw(line);
}
}
}
public static void main(String image_path,ArrayList<Point[]> triangles, String panel_name) throws IOException {
String path = image_path;
BufferedImage image = ImageIO.read(new File(path));
AnnotatedDisplayTriangles contentPane = new AnnotatedDisplayTriangles(image, path, triangles);
// You'll want to be sure this component is opaque
// since it is required for contentPanes. Some
// LAFs may use non-opaque components.
contentPane.setOpaque(true);
int w = image.getWidth();
int h = image.getHeight();
JFrame f = new JFrame(panel_name);
// f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setContentPane(contentPane);
f.setSize(w,h);
f.setLocation(200,200);
f.setVisible(true);
}
Is there a way to convert a JPanel (that has not yet been displayed) to a BufferedImage?
thanks,
Jeff
From the BufferedImage you can create a graphics object, which you can use to call paint on the JPanel, something like:
public BufferedImage createImage(JPanel panel) {
int w = panel.getWidth();
int h = panel.getHeight();
BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
Graphics2D g = bi.createGraphics();
panel.paint(g);
g.dispose();
return bi;
}
You may need to make sure you set the size of the panel first.
Basically I'm building a component
that needs to get written to an image
but not displayed
ScreenImage explains how to do what you want.
Relevant section of ScreenImage.java (slightly edited). layoutComponent forces all buttons appear in the image.
/**
* #return Renders argument onto a new BufferedImage
*/
public BufferedImage createImage(JPanel panel, int width, int height) {
BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
Graphics2D g = bi.createGraphics();
panel.setSize(width, height); // or panel.getPreferedSize()
layoutComponent(panel);
panel.print(g);
g.dispose();
return bi;
}
private void layoutComponent(Component component) {
synchronized (component.getTreeLock()) {
component.doLayout();
if (component instanceof Container) {
for (Component child : ((Container) component).getComponents()) {
layoutComponent(child);
}
}
}
}
The answer from Tom is basically correct, but invoke paint() directly is not recommended, as it is a synchronous call and can interrupt with other operation on the swing thread. Instead of using paint(), we should use print() instead
public BufferedImage createImage(JPanel panel) {
int w = panel.getWidth();
int h = panel.getHeight();
BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
Graphics2D g = bi.createGraphics();
panel.print(g);
g.dispose();
return bi;
}
Take a look at BasicTableUI. The cell renderer is drawn on image without showing and then drawn on visible table component.