I am adding a frame to an image in JavaFX by first adding the frame to the canvas and then the image,
so that it overlaps and the image seems to have a frame.
For some reason my image gets distorted, it scales poorly and makes everything in it look "fat".
If I try to show the image in an ImageView (variable named "image" in the code) it looks normal,
so I tried to get the values (width and height) from the normal looking ImageView, yet still no luck:
Image i = new Image(path.toUri().toString());
image.setImage(i);
canvas.setWidth(image.getFitWidth() + 20);
canvas.setHeight(image.getFitHeight() + 20);
GraphicsContext gc1 = canvas.getGraphicsContext2D();
gc1.drawImage(rimage, 0, 0, image.getFitWidth() + 20, image.getFitHeight() + 20);
GraphicsContext gc = canvas.getGraphicsContext2D();
image.preserveRatioProperty();
gc.drawImage(i, 10, 10, image.getFitWidth(), image.getFitHeight());
Original image:
Framed and distorted (the head looks rounder):
I haven't tested this myself, but theres a few things I noticed about your code.
First, the line
image.preserveRatioProperty();
doesn't actually change any state for the ImageView, all it does is tell you whether or not the ImageView is set to preserve ratios.
what you probably want instead is:
image.setPreserveRatio(true);
which I believe will probably do what you want.
If it doesn't it might be because the image has already been loaded, so if this still doesn't work, try putting image.setPreserveRatio(true); before image.setImage(i);
Isn't the window just too wide for your image? Try to crop the image using another drawImage where you can define which part of the image you want to use. Or change the window size. Or use a width and height to draw with that is relative to the one in the image.
Related
So since I seem to can't put font into a Table and expand it to top and right, I wonder what is the solution to draw fonts on top right of the screen.
I'm trying with this:
highScoreFont.draw(batch, "" + getHighScore, Gdx.graphics.getWidth() - 1070, Gdx.graphics.getHeight() - 650);
which aligns it perfectly when I'm testing it on my Xperia Z1 which has resolution of 1920x1080. But when I test it on Nexus S which is 800x400 the alignment is completly wrong, the font draws itself in the on the bottom left part of the screen.
Any solutions?
Using scene2d, you can use a BitmapFont with Tables, you just need to use a Label, not the BitmapFont directly.
BitmapFont font = ...;
Label label = new Label(new LabelStyle(font, Color.WHITE));
Table table = new Table();
table.add(label).expand().top().right();
This is preferred, as scenes will size to your device and you won't have to worry about the device's screen size.
Using Gdx.graphics.getWidth() returns the device's width, not necessarily your viewport's width, so positioning elements using that value will result in inconsistencies across devices. Hardcoding positions typically becomes very difficult to maintain, but if you want to go this route I'd suggest looking into positioning elements based on the viewport size, not the value returned from Gdx.graphics.
I'd like to draw a gradient background for a FigureCanvas. Unfortunately the code which works for Composites or similars does not work for my FigureCanvas. Where it makes a perfect gradient background on my Composite it simply puts one color as background of my FigureCanvas.
Here is a snippetof how it works with all my other Controls.
Rectangle rect = parent.getClientArea();
Image newImage = new Image(parent.getDisplay(), 1, Math.max(1,
rect.height));
GC gc = new GC(newImage);
gc.setForeground(composite.getDisplay().getSystemColor(SWT.COLOR_WHITE));
gc.setBackground(composite.getDisplay().getSystemColor(SWT.COLOR_BLUE));
gc.fillGradientRectangle(0, 0, 1, rect.height, true);
gc.dispose();
composite.setBackgroundImage(newImage);
Am i missing something here? Or is it simply not possible without overwriting or extending something (if so what?)? I also tried using the same backgroundImage as another Composite has it, where it works fine.
Thank you for answers!
turns out the problem was not the FigureCanvas itself but GEF which overwrote it somewhere else.
I am using GC (org.eclipse.swt.graphics.GC) to combine some pictures into one image (using drawImage). The problem is that, by default GC has got white background. Is it possible to set background to transparent? Or any other solution to cut part from one picture and paste into second?
Simply, GC is a pen, pen can't control canvas's transparency. It just can only draws something on canvas. So, GC can't manipulate image itself, just GC can draw something on Image.
However, You can directly control transparency data with ImageData API.
You should have to know what there is no advanced drawing API except setPixel(x, y, pixel), setAlpha(x, y, alpha) on ImageData.
You could use a Canvas with no background
Canvas canvas = new Canvas(parent, SWT.NO_REDRAW_RESIZE | SWT.NO_BACKGROUND);
And then you could (like in this example) make one(or more) colors of the image transparent.
ImageData ideaData = new ImageData(getClass().getResourceAsStream("Idea.jpg"));
int whitePixel = ideaData.palette.getPixel(new RGB(255,255,255));
ideaData.transparentPixel = whitePixel;
Image transparentIdeaImage = new Image(display,ideaData);
Could someone explain why this line of code isn't working. No errors are given. It simply doesn't resize the image.
image = ImageIO.read(file);
image.getScaledInstance(ImageDisplayBox.getWidth(), ImageDisplayBox.getHeight());
ImageDisplayBox.setIcon(new ImageIcon(image));
I've looked at the other answers on Stackoverflow and noticed a lot of people using the .getScaledInstance method.
I (think) it might be the fact that I have it as .setIcon - Although I'm not the best with Java.
The image is printed but displays only the top left of the image due to size.
You're ignoring the returned value. You want:
image = image.getScaledInstance(ImageDisplayBox.getWidth(),
ImageDisplayBox.getHeight(), 5);
Or maybe to make things clearer:
Image scaled = image.getScaledInstance(ImageDisplayBox.getWidth(),
ImageDisplayBox.getHeight(), 5);
ImageDisplayBox.setIcon(new ImageIcon(scaled));
From the docs:
Creates a scaled version of this image. A new Image object is returned which will render the image at the specified width and height by default. The new Image object may be loaded asynchronously even if the original source image has already been loaded completely.
Note that that doesn't say anything about changing the existing image. It just creates a new image with the given size.
Yes
This should work
Image scaled =image.getScaledInstance(ImageDisplayBox.getWidth(),
ImageDisplayBox.getHeight(), 5);
ImageDisplayBox.setIcon(new ImageIcon(scaled));
How make a framed Image?? i.e. put a frame around a bitmap Image??
the sample image is attached..
I have different frames. I want to put these frames around bitmap Images.. any suggestion will be helpful...
( I am developing an Image Processing application and want to put framed effect)
I assume you do not expect people to help you with code or you would have accepted some of the answers to your previous questions. So here is a start:
Create an image capable of being tiled as the background of the frame.
Create a new canvas that is (Picture.Width + 50px * 2) x (Picture.Height + 50px * 2) in size. Replace 50px with whatever you want the border size to be.
Tile your background image over the whole canvas.
Put your bitmap on the canvas at point (50, 50). Replace 50 with your actual border size.
Good luck.