I'm making a game where some objects rotate to face what they're shooting at. There's a delay in between shooting and I want the object to keep facing where it is until it shoots again. I know how to load images and I know how to rotate them using AffineTransform. But with this I need to calculate the rotate every time the object gets drawn.
So my question is how can I rotate an image and save the result into a new image that would get displayed?
how can I rotate an image and save the result into a new image that would get displayed?
Create a new BufferedImage. Get hold of a Graphics object (through BufferedImage.getGraphics(). Paint the rotated image onto this buffered image, and save the image in an array or a map based on its rotation (so that it easy to look it up when you need it).
Affline transform only works with perfect squares. The following code
is used to take any rectangle image and rotate it correctly. To do
this it chooses a center point that is half the greater length and
tricks the library to think the image is a perfect square, then it
does the rotation and tells the library where to find the correct top
left point. The special cases in each orientation happen when the
extra image that doesn't exist is either on the left or on top of the
image being rotated. In both cases the point is adjusted by the
difference in the longer side and the shorter side to get the point at
the correct top left corner of the image. NOTE: the x and y axes also
rotate with the image so where width > height the adjustments always
happen on the y axis and where the height > width the adjustments
happen on the x axis.
private BufferedImage rotate(BufferedImage image, double _theta, int _thetaInDegrees) {
AffineTransform xform = new AffineTransform();
if (image.getWidth() > image.getHeight()) {
xform.setToTranslation(0.5 * image.getWidth(), 0.5 * image.getWidth());
xform.rotate(_theta);
int diff = image.getWidth() - image.getHeight();
switch (_thetaInDegrees) {
case 90:
xform.translate(-0.5 * image.getWidth(), -0.5 * image.getWidth() + diff);
break;
case 180:
xform.translate(-0.5 * image.getWidth(), -0.5 * image.getWidth() + diff);
break;
default:
xform.translate(-0.5 * image.getWidth(), -0.5 * image.getWidth());
break;
}
} else if (image.getHeight() > image.getWidth()) {
xform.setToTranslation(0.5 * image.getHeight(), 0.5 * image.getHeight());
xform.rotate(_theta);
int diff = image.getHeight() - image.getWidth();
switch (_thetaInDegrees) {
case 180:
xform.translate(-0.5 * image.getHeight() + diff, -0.5 * image.getHeight());
break;
case 270:
xform.translate(-0.5 * image.getHeight() + diff, -0.5 * image.getHeight());
break;
default:
xform.translate(-0.5 * image.getHeight(), -0.5 * image.getHeight());
break;
}
} else {
xform.setToTranslation(0.5 * image.getWidth(), 0.5 * image.getHeight());
xform.rotate(_theta);
xform.translate(-0.5 * image.getHeight(), -0.5 * image.getWidth());
}
AffineTransformOp op = new AffineTransformOp(xform, AffineTransformOp.TYPE_BILINEAR);
return op.filter(image, null);
}
Try something like this to clone images:
BufferedImage source = new BufferedImage(50, 10, BufferedImage.TYPE_4BYTE_ABGR);
BufferedImage target = new BufferedImage(50, 10, BufferedImage.TYPE_4BYTE_ABGR);
Graphics2D tg = target.createGraphics();
AffineTransform at = new AffineTransform();
at.rotate(2);
tg.drawImage(source, at, null);
P.S.: Ignore my previous answer, I misread the question. Sorry.
Related
I am using the following texture
It is being displayed only partially and it gets repeated when I used the following code:
float scale = (float)( (float)Gdx.graphics.getWidth() / (float)(tex.getWidth()));
w = Gdx.graphics.getWidth();
h = scale * tex.getHeight();
float x = 0.0f;
float y = Gdx.graphics.getWidth() - h * splashTimer;
Sprite s = new Sprite(tex);
//s.setOriginCenter();
// s.setScale(scale);
//s.setOriginCenter();
// s.setOriginCenter();
//s.setSize(s.getWidth() * scale, s.getHeight() * scale);
//s.setOriginCenter();
s.setScale(0.1f);//1.0f + (1.0f - scale));
s.setOrigin(0, 0);
s.setPosition(x, y);
batch.begin();
batch.draw(s,0,0,Gdx.graphics.getWidth(), scale * s.getHeight());
// s.draw(batch);
batch.end();
It gets chopped and repeated in Android and looks like this:
Orange isn't even drawn. Why is this happening?
Apparently this happened because I was using mipmaps. I disabled the use of mipmaps and now it works.
I need to place an image onto a canvas with the corners at specific co-ordinates.
// Blank canvas
BufferedImage img = new BufferedImage(2338, 1654, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = img.createGraphics();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setBackground(Color.WHITE);
g2d.clearRect(0, 0, width, EXTRA_HEADER_HEIGHT);
I have all 4 corner co-ordinates that the image corners must be placed at on the background canvas. The problem is that the original image might need to be rotated. This is basically what I need to achieve:
I don't have much experience with Graphics2D but based on a quick review of the API I can't see a method to achieve this. I am hoping that I am wrong here and that somebody can save me some time but my current thinking is:
Use the co-ordinates to calculate the rotation of the placed image relative to the supplied image.
Place the image with one of its corners in the correct position.
Rotate the image around that corner (without rotating background canvas).
Any help with the above would be appreciated.
As tucuxi commented, if you really have 4 points and want the transform to place the image corners at these exact points, and affine transform won't do -- you'll need a perspective transform.
However, if you select two points of the four, you can do what you want, but you may have to scale the image. So let's say you just want to place a rotated and scaled version of your image such that its top edge goes from A' to B'. What you'll have to do is compute the affine transform, which involves determining the rotation angle, scaling factor, and translation from the segment AB to A'B'.
Here's a commented method that should do just that. I have not thoroughly tested it, but it shows how to implement the algorithm in Java.
package stackoverflow;
import java.awt.geom.AffineTransform;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;
public class ComputeImageTransform
{
public static AffineTransform computeTransform(
Rectangle2D imageBounds, Point2D a2, Point2D b2) {
double dx = b2.getX() - a2.getX();
double dy = b2.getY() - a2.getY();
// compute length of segment
double length = Math.hypot(dx, dy);
// compute scaling factor from image width to segment length
double scaling = length / imageBounds.getWidth();
// compute rotation angle
double rotation = Math.atan2(dy, dx);
// build the corresponding transform
// NOTE: the order of the individual transformations are applied is the
// reverse of the order in which the transform will apply them!
AffineTransform transform = new AffineTransform();
transform.translate(a2.getX(), a2.getY());
transform.rotate(rotation);
transform.scale(scaling, scaling);
transform.translate(-imageBounds.getX(), -imageBounds.getY());
return transform;
}
public static void main(String[] args) {
// transform top edge of image within this axis-aligned rectangle...
double imageX = 20;
double imageY = 30;
double imageWidth = 400;
double imageHeight = 300;
Rectangle2D imageBounds = new Rectangle2D.Double(
imageX, imageY, imageWidth, imageHeight);
// to the line segment a2-b2:
Point2D a2 = new Point2D.Double(100, 30);
Point2D b2 = new Point2D.Double(120, 200);
System.out.println("Transform image bounds " + imageBounds);
System.out.println(" to top edge " + a2 + ", " + b2 + ":");
AffineTransform transform = computeTransform(imageBounds, a2, b2);
// test
Point2D corner = new Point2D.Double();
corner.setLocation(imageX, imageY);
System.out.println("top left: " + transform.transform(corner, null));
corner.setLocation(imageX + imageWidth, imageY);
System.out.println("top right: " + transform.transform(corner, null));
corner.setLocation(imageX, imageY + imageHeight);
System.out.println("bottom left: " + transform.transform(corner, null));
corner.setLocation(imageX + imageWidth, imageY + imageHeight);
System.out.println("bottom right: " + transform.transform(corner, null));
}
}
This is the output:
Transform image bounds java.awt.geom.Rectangle2D$Double[x=20.0,y=30.0,w=400.0,h=300.0]
to top edge Point2D.Double[100.0, 30.0], Point2D.Double[120.0, 200.0]:
top left: Point2D.Double[100.0, 30.0]
top right: Point2D.Double[119.99999999999999, 199.99999999999997]
bottom left: Point2D.Double[-27.49999999999997, 44.999999999999986]
bottom right: Point2D.Double[-7.499999999999986, 214.99999999999997]
As you can see, you'll get some rounding errors due to the nature of floating-point computations.
I have document images of varying dimensions and I want to be able to efficiently scale and rotate them in the following manner (standard "Rotate" and "Zoom" logic). How do I do it?
An image is H pixels high and W pixels wide. Initially, it should scale to 600 pixels wide. On each rotation, the panel's width and height should swap and the scaled image should rotate 90 degrees. On each zoom, the image should scale by factor "scale".
Here's what I've tried so far on BufferedImage img... the resulting BufferedImage scales and rotates but does not translate (to be centered atop the panel after a 90-degree rotation):
double scale = zoom * 600.0 / img.getWidth();
rotation = (rotation + degrees) % 360;
int scaledWidth = (int)(scale * img.getWidth());
int scaledHeight = (int)(scale * img.getHeight());
BufferedImage bufferedImage = new BufferedImage(scaledWidth, scaledHeight, img.getType());
if (rotation % 180 == 0)
bufferedImage = new BufferedImage(scaledWidth, scaledHeight, img.getType());
else
bufferedImage = new BufferedImage(scaledHeight, scaledWidth, img.getType());
AffineTransform transform = AffineTransform.getRotateInstance(Math.toRadians(rotation), scaledWidth/2, scaledHeight/2);
transform.scale(scale, scale);
AffineTransformOp operation = new AffineTransformOp(transform, AffineTransformOp.TYPE_BILINEAR);
scaledImage = operation.filter(img, bufferedImage);
imagePanel.setPreferredSize(new Dimension(bufferedImage.getWidth(), bufferedImage.getHeight()));
Aha! The key (the JavaDoc was confusing) was realizing that on AffineTransform, rotate() and other methods transform the matrix, not the image! The following code works automagically!
/**
* Transforms the image efficiently without losing image quality.
* Scales the image to a width of (600 * scale) pixels, rotates the image,
* and translates (moves) the image to recenter it if rotated 90 or 270 degrees.
*/
protected BufferedImage transformImage(BufferedImage image)
{
int scaledWidth = (int)(scale * image.getWidth());
int scaledHeight = (int)(scale * image.getHeight());
// Methods AffineTransform.rotate(), AffineTransform.scale() and AffineTransform.translate()
// transform AffineTransform's transformation matrix to multiply with the buffered image.
// Therefore those methods are called in a counterintuitive sequence.
AffineTransform transform;
if (rotation % 180 == 0)
{
// First scale and second rotate image
transform = AffineTransform.getRotateInstance(Math.toRadians(rotation), scaledWidth/2, scaledHeight/2);
transform.scale(scale, scale);
}
else
{
// First scale, second rotate, and third translate image
transform = AffineTransform.getTranslateInstance((scaledHeight-scaledWidth)/2, (scaledWidth-scaledHeight)/2);
transform.rotate(Math.toRadians(rotation), scaledWidth/2, scaledHeight/2);
transform.scale(scale, scale);
}
AffineTransformOp operation = new AffineTransformOp(transform, AffineTransformOp.TYPE_BICUBIC);
BufferedImage transformedImage = operation.createCompatibleDestImage(image, image.getColorModel());
return operation.filter(image, transformedImage);
}
I am creating a little game in Java and I have an image which gets rotated.
As you can see in the two images below, there is a giant ship which slowly rotates in the game, but when it gets to a certain point it gets cut off (due to its own little BufferedImage).
Heres my rendering code:
public void drawImageRotated(BufferedImage img, double x, double y, double scale, double angle) {
x -= xScroll;
y -= yScroll;
BufferedImage image = new BufferedImage((int)(img.getWidth() * 1.5D), (int)(img.getHeight() * 1.5D), 2);
Graphics2D g = (Graphics2D)image.getGraphics();
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g.rotate(Math.toRadians(angle), image.getWidth() / 2, image.getHeight() / 2);
g.drawImage(img, image.getWidth() / 2 - img.getWidth() / 2, image.getHeight() / 2 - image.getHeight() / 2, null);
g2d.drawImage(image, (int)(x-image.getWidth()*scale/2), (int)(y-image.getHeight()*scale/2), (int)(image.getWidth()*scale), (int)(image.getHeight()*scale), null);
g.dispose();
}
Back to the matter at hand, how can i work out the maximum x and y size of an image during rotation so I can compensate with my buffered images size?
If you have a basically rectangular image which is rotated around its center, the maximum width and height during rotation will be when a diagonal of the image rectangle is horizontal or vertical. This diagonal distance could be computed with the Pythagorean Theorem and used for the width and height of the BufferedImage.
int size = (int) Math.sqrt((img.getWidth() * img.getWidth()) + (img.getHeight() * img.getHeight()));
BufferedImage image = new BufferedImage(size, size, 2);
// The rest of your code as before
how can i work out the maximum x and y size of an image during rotation so I can compensate with my buffered images size?
double sin = Math.abs(Math.sin(angle));
double cos = Math.abs(Math.cos(angle));
int w = image.getWidth();
int h = image.getHeight();
int neww = (int)Math.floor(w*cos+h*sin);
int newh = (int)Math.floor(h*cos+w*sin);
The above code was taken from this example: Java(SWING) working with Rotation
An alternative is to rotate the actual Graphics object, draw the image, and restore the rotation:
AffineTransform old = g2d.getTransform();
g2d.rotate(Math.toRadians(angle), x + image.getWidth() / 2, y + image.getWidth() / 2);
g2d.drawImage(image, x, y, null);
g2d.setTransform(old);
Let's consider width being the width of the original image, height its original height and angle the rotation angle value in radians.
According to my calculations, the size of the rotated image is something like this:
rotatedWidth = Math.cos(angle) * width + Math.sin(angle) * height;
rotatedHeight = Math.sin(angle) * width + Math.cos(angle) * height;
You may also need to take a look at this thread as well, as it may help.
I'm trying to rotate an image, but it's getting slightly messed up when I'm rotating it, and it looks like it's not rotating it on center. So if I go around it looks like it's being truncated. Is there a better method to get the "center" of the image?
public void RotateImageLeft() {
try {
BufferedImage newImage = new BufferedImage(originalImage.getWidth(), originalImage.getHeight(), originalImage.getType());
AffineTransform tx = new AffineTransform();
tx.rotate(Math.toRadians(-90.0), originalImage.getWidth() / 2, originalImage.getHeight() / 2);
Graphics2D g2 = newImage.createGraphics();
g2.drawImage(originalImage, tx, null);
originalImage = newImage;
this.repaint();
g2.dispose();
} catch (Exception ex) {
ex.toString();
}
//g2d.drawImage(getResImage(), rescale, x, y);
}
For full code disclosure, here's more code. Here's my painComponent overridden method:
public void paintComponent(Graphics g) {
super.paintComponent(g);
resizeImage();
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(getResImage(), rescale, x, y);
}
Here's the resizeImage() method that gets called:
public void resizeImage() {
Graphics g = getResImage().getGraphics();
g.setColor(Color.WHITE);
g.fillRect(0, 0, getResImage().getWidth(), getResImage().getHeight());
int scaledWidth = (int) ((getOriginalImage().getWidth() * getHeight()
/ getOriginalImage().getHeight()));
if (scaledWidth < getWidth()) {
int leftOffset = getWidth() / 2 - scaledWidth / 2;
int rightOffset = getWidth() / 2 + scaledWidth / 2;
g.drawImage(getOriginalImage(),
leftOffset, 0, rightOffset, getHeight(),
0, 0, getOriginalImage().getWidth(), getOriginalImage().getHeight(),
null);
} else {
int scaledHeight = (getOriginalImage().getHeight() * getWidth())
/ getOriginalImage().getWidth();
int topOffset = getHeight() / 2 - scaledHeight / 2;
int bottomOffset = getHeight() / 2 + scaledHeight / 2;
g.drawImage(getOriginalImage(),
0, topOffset, getWidth(), bottomOffset,
0, 0, getOriginalImage().getWidth(), getOriginalImage().getHeight(),
null);
}
}
I'm using the ResizeImage method since I want any image to fit correctly on my 720/432 panel.
Here's some example pictures.
Pre-rotated
Post-rotated:
New code: (new image is the correct height/width of rotated image, still getting black bars. Screens below.
public void RotateImageLeft() {
try {
BufferedImage newImage = new BufferedImage( originalImage.getHeight(),originalImage.getWidth(), originalImage.getType());
AffineTransform tx = new AffineTransform();
tx.rotate(Math.toRadians(-90.0), newImage.getWidth() / 2, (newImage.getHeight() / 2));
Graphics2D g2 = newImage.createGraphics();
g2.drawImage(originalImage, tx, null);
originalImage = newImage;
this.repaint();
g2.dispose();
} catch (Exception ex) {
ex.toString();
}
}
Post rotate:
From my answer to another similar question
If you're rotating then this will work for 90 degrees.
move image so centered "around" the origin
plain rotate() call with no extra parameters
Move image back into the center remembering that now width = old height and height = old width.
Also remember the affine transform steps work in reverse order.
AffineTransform tx = new AffineTransform();
// last, width = height and height = width
tx.translate(originalImage.getHeight() / 2,originalImage.getWidth() / 2);
tx.rotate(Math.PI / 2);
// first - center image at the origin so rotate works OK
tx.translate(-originalImage.getWidth() / 2,-originalImage.getHeight() / 2);
If you want to rotate an image without cropping you need to add black bars around it first, since a rotated rectangle will always have a bigger bounding box than an axis-aligned one (exception: rotating a square by multiples of 90 degrees).
So what you want to do is do some trigonometric calculations beforehand to decide the maximum Width/Height of the rotated image, and combine that with the original Width/Height. Resize your image (centering it) using those dimensions, rotate it, and then crop it back to the Width/Height of the rotated image.