Develop Reference

java static map doesn't update in other class

Hi there and thanks for reading,
I have a Map initialized as follows:
static HashMap<Point, Tile> map = new HashMap<Point, Tile>();
a Tile is a small class that holds an image and a function called addFloor(int tileCode):
class Tile {
BufferedImage img;
int imgHeight, imgWidth;
public Tile(BufferedImage img) {
this.img = img;
imgHeight = img.getHeight();
imgWidth = img.getWidth();
}
public Tile addFloor(int tileCode) {
BufferedImage newImg = Helper.joinBufferedImageFloor(this.img, Map.buildings.get(tileCode).img);
Tile newTile = new Tile(newImg);
return newTile;
}
}
The addFloor(int tileCode) function just puts an image obtained by another map via the tileCode as key (Map is just another class that holds the map of Tiles and maps of asset images, and also some unimportant functions for now) on top of the Tile image (this.img) with an offset.
(Are you still with me or do i need to give more info?)
and now:
Tile tileDebug = Map.map.get(new Point(10, 10));
Map.map.replace(new Point(10, 10), Map.map.get(new Point(10, 10)).addFloor(tileCode)); //I've also tried map.put()
tileDebug = Map.map.get(new Point(10, 10)); //MARK 1
panel.repaint();
I checked via eclipse debugger and I checked the addFloor(int tileCode) function seperated:
-the addFloor(int tileCode) function works perfectly. It creates a new image and returns a completely new Tile with the correct image.
-using the debugger I saw that the Tile updated, it changed its image and has another hash now (same as returned by addFloor(int tileCode)).
-Currently the paintComponent(Graphics g) function has just one call to drawMap(Graphics2D g2d) which draws Tile by Tile.
-Since the map.replace() call the map hasn't been edited.
private void drawMap(Graphics2D g2d) {
if (map != null) {
for (int y = 1; y <= 100; y++) {
for (int x = 1; x <= 100; x++) {
Tile currentTile = Map.map.get(new Point(x, y)); //MARK 2
if (x == 10 && y == 10) {
//This line is just so I can add a breakpoint to debug the tile currentTile
System.out.println("");
} //Unimportant from here, just positioning and drawing, that works perfectly
int dx = 350, dy = 0;
dx += Main.viewX;
dy += Main.viewY;
int posX, posY;
posX = (int) ((x * 64 + y * -64));
posY = (int) ((x * 32 + y * 32));
posX -= currentTile.imgWidth;
posY -= currentTile.imgHeight;
g2d.drawImage(currentTile.img, posX + dx, posY + dy, this);
}
}
}
}
The problem is that the drawn Tile isn't the old Tile, it isn't the Tile that got returned by addFloor(int tileCode). The drawn Tile is a new one, with its own hash and image. The image that is drawn is the second image passed to joinBufferedImageFloor(BufferedImage img1, BufferedImage img2) (the one obtained via the tileCode in addFloor(int tileCode).
I followed my entire program from //MARK 1 to //MARK 2, but the map never got explicitly edited but the return value of
Map.map.get(new Point(10, 10))
changed from the correct Tile (MARK 1) to the third Tile (MARK 2)
Is it because the Map is static? (Note: Only 2 Threads explicitly edit the Map, the Main Thread and a KeyListener Thread, but in this use case this Thread wasn't involved)
Whats wrong here?
Am I getting something wrong about Java Maps?
Any help appreciated thanks in advance
Edit 1min after posting it:
I think I described it a bit confusing here and there so please ask any question that might be unanswered in this description.
On wish I can also provide you with the full Project setup etc...
Edit few Hours after:
Edited the Question according to the how-to-ask section of StackOverflow
Edit for anyone interested the joinBufferedImageFloor(BufferdImage img1, BufferedImage img2) function:
public static BufferedImage joinBufferedImageFloor(BufferedImage img1, BufferedImage img2) {
int offsetX = 16;
int offsetY = -32;
int width = img1.getWidth();
int height = img1.getHeight() - offsetY;
BufferedImage newImage = new BufferedImage(width, height,
BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = newImage.createGraphics();
Color oldColor = g2.getColor();
g2.setColor(Color.BLACK);
g2.fillRect(0, 0, width, height);
g2.setColor(oldColor);
g2.drawImage(img1, null, 0, -offsetY);
g2.drawImage(img2, null, offsetX, 0);
g2.dispose();
return newImage;
}

Java: Rotation of a buffered image around its centre is skewed

I am trying to rotate a buffered image in Java (a plane icon on the map) around its centre using help from here:
Rotating BufferedImage instances
When I use this code:
AffineTransform at = new AffineTransform();
at.rotate(Math.toRadians(planeHeading),origImage.getWidth() / 2, origImage.getHeight() / 2);
AffineTransformOp op = new AffineTransformOp(at, AffineTransformOp.TYPE_BILINEAR);
origImage = op.filter(origImage, null);
g.drawImage(origImage, x-origImage.getWidth() / 2, y-origImage.getHeight() / 2, null);
on rotation of 180-270 degree, the image is placed higher and a bit to the left of its centre:
If I use this code:
AffineTransform at = new AffineTransform();
at.translate(x, y);
at.rotate(Math.toRadians(planeHeading));
at.translate(-origImage.getWidth()/2, -origImage.getHeight()/2);
g.drawImage(origImage, at, null);
the image is rotated correctly, however the image itself gets very pixelated on its edges.
Can someone please help find the culprit?
This is the whole method:
#Override
public void paintWaypoint(Graphics2D g, JXMapViewer viewer, MapPlane w)
{
g = (Graphics2D)g.create();
try
{
origImage = ImageIO.read(getClass().getResource("/images/map/mapPLANE.png"));
Point2D point = viewer.getTileFactory().geoToPixel(w.getPosition(), viewer.getZoom());
// Center coordinates
int x = (int)point.getX();
int y = (int)point.getY();
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// Get heading of the plane and rotate the image
String planeHeadingStr = w.getHeading();
try
{
double planeHeading = Double.parseDouble(planeHeadingStr);
AffineTransform at = new AffineTransform();
//Do the actual rotation
at.rotate(Math.toRadians(planeHeading),origImage.getWidth() / 2, origImage.getHeight() / 2);
AffineTransformOp op = new AffineTransformOp(at, AffineTransformOp.TYPE_BILINEAR);
origImage = op.filter(origImage, null);
// Draw the image
g.drawImage(origImage, x-origImage.getWidth() / 2, y-origImage.getHeight() / 2, null);
}
catch(NumberFormatException e)
{
}
g.dispose();
}
catch (Exception ex)
{
log.warn("couldn't read mapPLANE.png", ex);
}
}
Thanks a lot!

To achieve the same bilinear interpolation that you got for your AffineTransformOp in the second case where you draw directly using an AffineTransform, you should set another RenderingHint:
g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
Otherwise, in your case, it defaulted to NEAREST_NEIGHBOUR interpolation.

Mirror Shape in JAVA(Swing)

Helo everyone,
I have a homework which involves drawing and manipulating shapes in a Swing GUI.
I got into a problem that I dont get the results I want when I try to mirror my shapes.
The drawallnodes method is called in Jpanels paintComponent.
public void drawallnodes(ArrayList<DevicesEditor> nodes, Graphics2D g2)
{
int arraysize = nodes.size();
ArrayList<DevicesEditor> temparray;
AffineTransform at = new AffineTransform();
if (nodes.size() != 0)
{
System.out.println("nodes.size " + nodes.size());
if (currentarrayindex >= 0)
{
AffineTransform afx = new AffineTransform();// for rotate
for (int i = 0; i <= currentarrayindex; i++)
{
if (nodes.get(i).getWasAngleChanged())
{
afx.rotate(
Math.toRadians(nodes.get(i).getAngleInDegrees()),
nodes.get(i).getCenter().x,
nodes.get(i).getCenter().y);
nodes.get(i).setShape(
afx.createTransformedShape(nodes.get(i).getShape()));
nodes.get(i).setWasAngleChanged(false);
nodes.get(i).setokrajRectangle();
}
try
{
Rectangle r = nodes.get(i).getShape().getBounds();
}
catch (Exception e)
{
System.out.println(
"Exception found at getbounds, no shape with getbounds found");
}
AffineTransform saveXform = g2.getTransform();
g2.setColor(nodes.get(i).getColor());
int w = getWidth();
// it gets the JPanels width, which is set to 758px
at = AffineTransform.getTranslateInstance(w, 0);
System.out.println("*********Get width of shape: " + w);
at.scale(-1, 1); // mirror -x, y
g2.setPaint(Color.red);
g2.draw(at.createTransformedShape(nodes.get(i).getShape()));
try
{
g2.drawString(nodes.get(i).getText(),
(int) nodes.get(i).getCenter().getX(),
(int) nodes.get(i).getCenter().getY());
}
catch (Exception e)
{
System.err.println("No text found at node");
}
try
{
g2.draw((Shape) nodes.get(i).getShape());
}
catch (Exception e)
{
System.err.println("No shape found at node");
}
// g2.transform(AffineTransform.getRotateInstance(0, 1));
g2.setTransform(saveXform);
}
}
}
}
When I mirror the Shape,for example I draw on the right side,but the mirrorred image appears on the left side...I want to mirror the shape and get the mirrorred shape at the same place not accros my jpanel....
Thank you for your help

When you transform the shape with a simple affine transform like scale(-1,1) then it will be mirrored horizontally at x=0. That is, when you have an object at (300,100), it will afterwards be at (-300,100).
In order to mirror the object "in place" (that is, at the x-coordinate of its center point) you have to
Move the object so that its center is at x=0
Mirror the object
Move the object back to its original position
This sequence of transforms can (and should) be represented by a single AffineTransform that can be obtained by concatenating AffineTransforms that represent the individual steps. For example, you could create a method like
private static Shape mirrorAlongX(double x, Shape shape)
{
AffineTransform at = new AffineTransform();
at.translate(x, 0);
at.scale(-1, 1);
at.translate(-x, 0);
return at.createTransformedShape(shape);
}
In order to paint a shape that is flipped horizontally (i.e. mirrored) at its center, you can then call
g.fill(mirrorAlongX(shape.getBounds2D().getCenterX(), shape));
BTW: Get rid of all these Exceptions being caught there! That's a horrible style. E.g. replace the exception check that prints "No text found at node" with something like
String text = nodes.get(i).getText();
if (text != null)
{
g2.drawString(text, ...);
}
else
{
System.err.println("No text found at node"); // May not even be necessary...
}

JPanel repaint from another class

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);
}

Drawing an image using sub-pixel level accuracy using Graphics2D

I am currently attempting to draw images on the screen at a regular rate like in a video game.
Unfortunately, because of the rate at which the image is moving, some frames are identical because the image has not yet moved a full pixel.
Is there a way to provide float values to Graphics2D for on-screen position to draw the image, rather than int values?
Initially here is what I had done:
BufferedImage srcImage = sprite.getImage ( );
Position imagePosition = ... ; //Defined elsewhere
g.drawImage ( srcImage, (int) imagePosition.getX(), (int) imagePosition.getY() );
This of course thresholds, so the picture doesn't move between pixels, but skips from one to the next.
The next method was to set the paint color to a texture instead and draw at a specified position. Unfortunately, this produced incorrect results that showed tiling rather than correct antialiasing.
g.setRenderingHint ( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON );
BufferedImage srcImage = sprite.getImage ( );
g.setPaint ( new TexturePaint ( srcImage, new Rectangle2D.Float ( 0, 0, srcImage.getWidth ( ), srcImage.getHeight ( ) ) ) );
AffineTransform xform = new AffineTransform ( );
xform.setToIdentity ( );
xform.translate ( onScreenPos.getX ( ), onScreenPos.getY ( ) );
g.transform ( xform );
g.fillRect(0, 0, srcImage.getWidth(), srcImage.getHeight());
What should I do to achieve the desired effect of subpixel rendering of an Image in Java?

You can use a BufferedImage and AffineTransform, draw to the buffered image, then draw the buffered image to the component in the paint event.
/* overrides the paint method */
#Override
public void paint(Graphics g) {
/* clear scene buffer */
g2d.clearRect(0, 0, (int)width, (int)height);
/* draw ball image to the memory image with transformed x/y double values */
AffineTransform t = new AffineTransform();
t.translate(ball.x, ball.y); // x/y set here, ball.x/y = double, ie: 10.33
t.scale(1, 1); // scale = 1
g2d.drawImage(image, t, null);
// draw the scene (double percision image) to the ui component
g.drawImage(scene, 0, 0, this);
}
Check my full example here: http://pastebin.com/hSAkYWqM

You can composite the image yourself using sub-pixel accuracy, but it's more work on your part. Simple bilinear interpolation should work well enough for a game. Below is psuedo-C++ code for doing it.
Normally, to draw a sprite at location (a,b), you'd do something like this:
for (x = a; x < a + sprite.width; x++)
{
for (y = b; y < b + sprite.height; y++)
{
*dstPixel = alphaBlend (*dstPixel, *spritePixel);
dstPixel++;
spritePixel++;
}
dstPixel += destLineDiff; // Move to start of next destination line
spritePixel += spriteLineDiff; // Move to start of next sprite line
}
To do sub-pixel rendering, you do the same loop, but account for the sub-pixel offset like so:
float xOffset = a - floor (a);
float yOffset = b - floor (b);
for (x = floor(a), spriteX = 0; x < floor(a) + sprite.width + 1; x++, spriteX++)
{
for (y = floor(b), spriteY = 0; y < floor (b) + sprite.height + 1; y++, spriteY++)
{
spriteInterp = bilinearInterp (sprite, spriteX + xOffset, spriteY + yOffset);
*dstPixel = alphaBlend (*dstPixel, spriteInterp);
dstPixel++;
spritePixel++;
}
dstPixel += destLineDiff; // Move to start of next destination line
spritePixel += spriteLineDiff; // Move to start of next sprite line
}
The bilinearInterp() function would look something like this:
Pixel bilinearInterp (Sprite* sprite, float x, float y)
{
// Interpolate the upper row of pixels
Pixel* topPtr = sprite->dataPtr + ((floor (y) + 1) * sprite->rowBytes) + floor(x) * sizeof (Pixel);
Pixel* bottomPtr = sprite->dataPtr + (floor (y) * sprite->rowBytes) + floor (x) * sizeof (Pixel);
float xOffset = x - floor (x);
float yOffset = y - floor (y);
Pixel top = *topPtr + ((*(topPtr + 1) - *topPtr) * xOffset;
Pixel bottom = *bottomPtr + ((*(bottomPtr + 1) - *bottomPtr) * xOffset;
return bottom + (top - bottom) * yOffset;
}
This should use no additional memory, but will take additional time to render.

I successfully solved my problem after doing something like lawrencealan proposed.
Originally, I had the following code, where g is transformed to a 16:9 coordinate system before the method is called:
private void drawStar(Graphics2D g, Star s) {
double radius = s.getRadius();
double x = s.getX() - radius;
double y = s.getY() - radius;
double width = radius*2;
double height = radius*2;
try {
BufferedImage image = ImageIO.read(this.getClass().getResource("/images/star.png"));
g.drawImage(image, (int)x, (int)y, (int)width, (int)height, this);
} catch (IOException ex) {
Logger.getLogger(View.class.getName()).log(Level.SEVERE, null, ex);
}
}
However, as noted by the questioner Kaushik Shankar, turning the double positions into integers makes the image "jump" around, and turning the double dimensions into integers makes it scale "jumpy" (why the hell does g.drawImage not accept doubles?!). What I found working for me was the following:
private void drawStar(Graphics2D g, Star s) {
AffineTransform originalTransform = g.getTransform();
double radius = s.getRadius();
double x = s.getX() - radius;
double y = s.getY() - radius;
double width = radius*2;
double height = radius*2;
try {
BufferedImage image = ImageIO.read(this.getClass().getResource("/images/star.png"));
g.translate(x, y);
g.scale(width/image.getWidth(), height/image.getHeight());
g.drawImage(image, 0, 0, this);
} catch (IOException ex) {
Logger.getLogger(View.class.getName()).log(Level.SEVERE, null, ex);
}
g.setTransform(originalTransform);
}
Seems like a stupid way of doing it though.

Change the resolution of your image accordingly, there's no such thing as a bitmap with sub-pixel coordinates, so basically what you can do is create an in memory image larger than what you want rendered to the screen, but allows you "sub-pixel" accuracy.
When you draw to the larger image in memory, you copy and resample that into the smaller render visible to the end user.
For example: a 100x100 image and it's 50x50 resized / resampled counterpart:
See: http://en.wikipedia.org/wiki/Resampling_%28bitmap%29