We Keep Coding

Graphics2D rotate before saving file

I create this image with g2d:
Here is the code:
BufferedImage bufferedImage = new BufferedImage(408, 408, BufferedImage.TYPE_INT_RGB);
Graphics2D g2d = bufferedImage.createGraphics();
List<Pixel> pixels = cacheRepo.findAll();
pixels.stream().forEach(pixel -> {
g2d.setColor(getColorFromPixel(pixel));
g2d.fillRect(getPos(pixel.getPosition().x), getPos(pixel.getPosition().y), 20, 20);
});
Now I am trying to rotate it 90° anticlok so that the bleu square appear on the lower left:
So I add this:
g2d.rotate(Math.toRadians(90));
g2d.drawRenderedImage(bufferedImage, null);
But the rotation doesn't occur (I still have the same image).
Here is the complete piece of code, with the part that save image:
// Constructs a BufferedImage of one of the predefined image types.
BufferedImage bufferedImage = new BufferedImage(408, 408, BufferedImage.TYPE_INT_RGB);
// Create a graphics which can be used to draw into the buffered image
Graphics2D g2d = bufferedImage.createGraphics();
List<Pixel> pixels = cacheRepo.findAll();
pixels.stream().forEach(pixel -> {
g2d.setColor(getColorFromPixel(pixel));
g2d.fillRect(getPos(pixel.getPosition().x), getPos(pixel.getPosition().y), 20, 20);
});
g2d.rotate(Math.toRadians(90));
g2d.drawRenderedImage(bufferedImage, null);
g2d.dispose();
// Save as PNG
File file = new File("myimage.png");
try {
ImageIO.write(bufferedImage, "png", file);
} catch (IOException e) {
e.printStackTrace();
}

Transformations should be applied BEFORE any operations you want to be effected by them, transformations won't affect anything that was done before it...
BufferedImage bufferedImage = new BufferedImage(408, 408, BufferedImage.TYPE_INT_RGB);
// Create a graphics which can be used to draw into the buffered image
Graphics2D g2d = bufferedImage.createGraphics();
g2d.rotate(Math.toRadians(90));
List<Pixel> pixels = cacheRepo.findAll();
pixels.stream().forEach(pixel -> {
g2d.setColor(getColorFromPixel(pixel));
g2d.fillRect(getPos(pixel.getPosition().x), getPos(pixel.getPosition().y), 20, 20);
});
//g2d.rotate(Math.toRadians(90));
// Not sure what you're hoping to achieve here
//g2d.drawRenderedImage(bufferedImage, null);
g2d.dispose();
If you prefer, use two BufferedImages. Render the "normal" content to the first, then use the second to paint the first, but with a rotation transformation ... because transformations do my head in 😝
using your code draw a black image
You probably need to supply a anchor point around which the image can be rotated, otherwise it will be rated about the top/left corner
And you'll forgive me, but it's not like this kind of think hasn't been asked before
Java rotate image turns part of background black
Rotate a buffered image in Java
Rotating Image with AffineTransform
Rotating an Image object
I'm rotating image in java but want to save rotated image
How to save rotated buffered image in another buffered image?
BufferedImage rotated, change resulting background

JavaFX create a new image from an existing one

In JavaFX u can create a new Image from a string(path), how would i go about creating a new Image from an existing javafx.scene.image.image?
as following:
Image image2 = new Image("my/res/flower.png", 100, 150, false, false);
But instead of the path an actual image object.
I want to change the size of the image.

There is typically no need to create a new Image instance in order to perform rescaling. The API allows you to view or draw scaled versions of an existing Image instance. For example, given
Image image = new Image("my/res/flower.png");
you can create an ImageView that displays a scaled version with
ImageView imageView = new ImageView(image);
imageView.setFitWidth(100);
imageView.setFitHeight(150);
or you can draw a scaled version to a canvas with
Canvas canvas = ... ;
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.drawImage(image, 0, 0, image.getWidth(), image.getHeight(), 0, 0, 100, 150);

A late response, but since I ran into the same issue (I needed an Image to pass to setDragView() ), here is the solution I have implemented:
Image makeThumbnail(Image original) {
ImageView i = new ImageView(original);
i.setFitHeight(64); i.setFitWidth(64);
return i.snapshot(new SnapshotParameters(), new WritableImage(64, 64));
}

Draw Line or Rectangular on Jpg image and Save it in Android app

I have the coordinates and I would like to draw a line or rectangular on a jpg image which is saved in my android device and then save the new file.
Is it possible? I am trying to us ImageIO but it isn't available in android or something goes wrong and it isn't acceptable?
Any idea or code?

This is how I was able to draw a green box on an existing JPEG.
Bitmap workingBitmap = BitmapFactory.decodeFile( mFullFilePath );
Bitmap mutableBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true);
// bitmap needs to be mutable
Canvas tmpCanvas = new Canvas(mutableBitmap);
// setup paint parameters
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth( 5 );
paint.setColor(Color.GREEN);
// Rect object was passed; use below to test
// Rect rect = new Rect( 0, 0, 10, 10 );
tmpCanvas.drawRect(rect, paint);
// write the updated file out as a JPG
writeExternalToCache( mutableBitmap, mFullFilePath );
see also:
https://stackoverflow.com/a/13119762/3474698
https://stackoverflow.com/a/8801391/3474698

Window resizing in the PDE Processing

I hope someone can help me here. I'm pretty much a noob trying to make an interactive graphic showing soccer teams moving up or down FIFA rankings. I loaded pictures I created outside of Processing to represent the teams and I want them to move based on a mouseclick event.
My problem right now is that when I test the app it doesn't size according to the settings I put in. Most of the images get cut off. I tried frame.setResizable() and while I can manipulate the size of the window to a degree my images are still cut off.
Below is my code and I am working on Processing 2.0B7 on a Macbook Pro running on OS X:
//Setting up the images that will go into the sketch
PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img7;
PImage img8;
PImage img9;
PImage img10;
PImage img11;
PImage img12;
PImage img13;
PImage img14;
PImage img15;
PImage img16;
PImage img17;
//loading the images from the file
void setup() {
size(600, 1200);
frame.setResizable(true);
img1 = loadImage("Click.png");
img2 = loadImage("Team_Algeria.png");
img3 = loadImage("Team_Angola.png");
img4 = loadImage("Team_BurkinaFaso.png");
img5 = loadImage("Team_CapeVerde.png");
img6 = loadImage("Team_DRCongo.png");
img7 = loadImage("Team_Ethiopia.png");
img8 = loadImage("Team_Ghana.png");
img9 = loadImage("Team_IvoryCoast.png");
img10 = loadImage("Team_Mali.png");
img11 = loadImage("Team_Morocco.png");
img12 = loadImage("Team_Niger.png");
img13 = loadImage("Team_Nigeria.png");
img14 = loadImage("Team_SouthAfrica.png");
img15 = loadImage("Team_Togo.png");
img16 = loadImage("Team_Tunisia.png");
img17 = loadImage("Team_Zambia.png");
}
int a = 0;
//Drawing the images into the sketch
void draw() {
background(#000000);
image(img1, 400, 100);
image(img2, 100, 200);
image(img3, 100, 260);
image(img4, 100, 320);
image(img5, 100, 380);
image(img6, 100, 440);
image(img7, 100, 500);
image(img8, 100, 560);
image(img9, 100, 620);
image(img10, 100, 680);
image(img11, 100, 740);
image(img12, 100, 800);
image(img13, 100, 860);
image(img14, 100, 920);
image(img15, 100, 980);
image(img16, 100, 1040);
image(img17, 100, 1100);
}

I am not sure what you mean by cutoff, but remember you are only stating positions, so if the image is bigger (in your case than 60 height), they will overlap on top of each other. What is the exact size of the png images you are loading?
Try assigning also size to the images, i.e. adding two more arguments as per the ref:
image(img2, 100, 200, whateverWidth, 60); // I put 60 since it is the vertical space you are leaving between images
Does this help?

how to merge Android canvas?

I was wondering, how do I merge/join Android canvases. In the code below I have cnv_left which contains a left part of a button. cnv_center contains the center part. And cnv_text contains text.
What I need is to merge them all in cnv_joined , so that
cnv_left would go first.
then cnv_center.
cnv_text would be in center of cnv_center.
and a flipped cnv_left would be the last.
Here's my code so far:
public void drawButt()
{
float buttonScale = 1.0f; /// general button scale ratio
float buttonScaleCnt = 6.0f; /// button's center part stretch ratio
LinearLayout LinLay = (LinearLayout)findViewById(R.id.linearLayout1);
ImageView iv1 = new ImageView(this);
Bitmap bit_left = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_left = new Canvas(bit_left);
cnv_left.scale(buttonScale,buttonScale);
SVG svg_left = SVGParser.getSVGFromResource(getResources(), R.raw.btleft);
Picture picture_left = svg_left.getPicture();
picture_left.draw(cnv_left);
Bitmap bit_center = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_center = new Canvas(bit_center);
cnv_center.scale(buttonScaleCnt, buttonScale);
SVG svg_center = SVGParser.getSVGFromResource(getResources(), R.raw.btcnt);
Picture picture_cnt = svg_center.getPicture();
picture_cnt.draw(cnv_center);
Bitmap bit_text = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_text = new Canvas(bit_text);
cnv_text.scale(buttonScale, buttonScale);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(Color.WHITE); paint.setTextSize(20);
cnv_text.drawText("R", 2, 30, paint);
Bitmap bit_joined = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
Canvas cnv_joined = new Canvas(bit_joined);
/// somehow need to somehow join the above canvases into this cnv_joined...
iv1.setImageBitmap(bit_joined);
iv1.setPadding(5, 5, 5, 5);
LinLay.addView(iv1);
}
Any ideas? Oh, and one more thing, when I create empty bitmaps for my canvas ( Bitmap.createBitmap(100, 100... ), does it matter what size I give them? If yes, where should I get the correct sizes for them?
Thanks!

Size of Bitmaps matter. If you do Picture.draw to canvas smaller than Picture, image will be cropped to size of bitmap.
Call SVG.getBounds to get bounds and put them in Bitmap constructor.
To join Bitmaps together you have to draw bit_left, bit_center and bit_text on cnv_joined using drawBitmap.
Better way will be to draw SVGs and text directly on cnv_joined.