I have an image saved in my database that is passed to an image as a byte array and then loaded to the Image view. However, I can't get it to fill the imageView. I use the following code:
package com.example.AppPrototipo.ui.tourist;
imports...
#Component
public class ExperienceController {
#FXML
Pane imagePane;
#FXML
ImageView imageViewPrincipal;
private final ExperienceRepository experienceRepository;
public ExperienceController(ExperienceRepository experienceRepository) {
this.experienceRepository = experienceRepository;
}
#FXML
private void initialize(){
Experience experience = experienceRepository.findById(1);
Image image = new Image(new ByteArrayInputStream(experience.getImages().get(0).getImageData()));
imageViewPrincipal.setImage(image);
imageViewPrincipal.fitWidthProperty().bind(imagePane.widthProperty());
imageViewPrincipal.fitHeightProperty().bind(imagePane.heightProperty());
}
}
This is the result i get:
The desired result would be that the image fills the whole width (fill the black side) by cropping the top and bottom sides and remaining centered. Would anyone be able to help me?
Assuming you're setting the preserveRatio property to true on the ImageView, and as matt stated is his comment, you only need to set one of them, say fitWidth, and the fitHeight will be calculated using the image ratio.
the problem is that the ratios of the image and the pane don't match so you need to do some cropping using setViewport, and it would be best to do the cropping when the pane's height or width change.
What you need to do is to calculate the ratio of the image, and compare it to the ratio of the pane, the comparison will let you decide whether to keep the original width or original height of the image, and you'll calculate the other using the pane's ratio.
Not really sure if that's the best practice but here's the code for what i have described
double oldImageWidth = image.getWidth(), oldImageHeight = image.getHeight(); //saving the original image size and ratio
double imageRatio = oldImageWidth / oldImageHeight;
imageViewPrincipal.setImage(image);
ChangeListener<Number> listener = (obs, ov, nv) -> {
double paneWidth = imagePane.getWidth();
double paneHeight = imagePane.getHeight();
double paneRatio = paneWidth / paneHeight; //calculating the new pane's ratio
//after width or height changed
double newImageWidth = oldImageWidth, newImageHeight = oldImageHeight;
if (paneRatio > imageRatio) {
newImageHeight = oldImageWidth / paneRatio;
} else if (paneRatio < imageRatio) {
newImageWidth = oldImageHeight * paneRatio;
}
imageViewPrincipal.setViewport(new Rectangle2D( // The rectangle used to crop
(oldImageWidth - newImageWidth) / 2, (oldImageHeight - newImageHeight) / 2, //MinX and MinY to crop from the center
newImageWidth, newImageHeight) // new width and height
);
imageViewPrincipal.setFitWidth(paneWidth);
};
imagePane.widthProperty().addListener(listener);
imagePane.heightProperty().addListener(listener);
And here is how it looks
Related
I have a method that rotates an image and uses the drawImage method to display it onto a canvas. However, when rotating the image, the image shrinks and grows because the width and height change (say you rotate a square, the width and height of the image changes). Here is the method:
public void rotateImage(GraphicsContext gc, double speed) {
erase(gc); // erases the previous image
imgView.setRotate(imgView.getRotate() + speed);
SnapshotParameters params = new SnapshotParameters();
params.setFill(Color.TRANSPARENT);
image = imgView.snapshot(params, null);
gc.drawImage(image, pos.x, pos.y, width, height);
}
Any help would be appreciated, and I can post the rest of the code if needed.
A snapshot with the provided parameters uses the dimensions of the node in the parent to determine the size of the image. Rotating an image yields dimensions different to those of the original image in most cases. In those cases the snapshot is bigger than the original image. (Consider a square image rotated by 45°; The width and height of the rotated image is the size of the diagonal of the original image, i.e. larger by a factor of sqrt(2) = 1.41...).
Since drawImage scales the drawn image to fit into a rectangle of size width x height, the snapshot that is larger than this size is scaled down.
Use the transforms of the GraphicsContext instead to avoid creating a new Image instance with each call of the method and avoid scaling the image.
Example
#Override
public void start(Stage primaryStage) {
Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/240px-Smiley.svg.png");
Canvas canvas = new Canvas(500, 500);
GraphicsContext context = canvas.getGraphicsContext2D();
Slider slider = new Slider(0, 360, 0);
Button btn = new Button("draw");
VBox root = new VBox(canvas, slider, btn);
btn.setOnAction(evt -> {
context.setFill(Color.TRANSPARENT);
context.fillRect(0, 0, canvas.getWidth(), canvas.getHeight());
double posX = 200;
double posY = 150;
context.save();
// apply transformation that puts makes (posX, posY) the point
// where (0,0) is drawn and rotate
context.translate(posX, posY);
context.rotate(slider.getValue());
// draw with center at (0, 0)
context.drawImage(image, -image.getWidth()/2, -image.getHeight()/2);
// undo transformations
context.restore();
});
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
I had searched about it but I did not get straight forward answer.
I want a buffered image to be rotated but not cropped
I knew the new dimensions are gonna be some thing like this
int w = originalImage.getWidth();
int h = originalImage.getHeight();
double toRad = Math.toRadians(degree);
int hPrime = (int) (w * Math.abs(Math.sin(toRad)) + h * Math.abs(Math.cos(toRad)));
int wPrime = (int) (h * Math.abs(Math.sin(toRad)) + w * Math.abs(Math.cos(toRad)));
Provide me a method for that.
BTW is there any way to rotate a JLabel with an ImageIcon?
Intention: adding to panels and layered pane and also saving it to file (saving the layered pane).
Or can we rotate the layered pane?
How to rotate a buffered image without cropping it?
You had already half of the work by calculating the size of the rotated BufferedImage.
The other half is actually creating the rotated BufferedImage.
You can do that by using Graphics2D
and applying some coordinate transformations before drawing the original image onto the new one. Furthermore, it makes sense to paint the "excess" area with some background color.
public BufferedImage rotateImage(BufferedImage originalImage, double degree) {
int w = originalImage.getWidth();
int h = originalImage.getHeight();
double toRad = Math.toRadians(degree);
int hPrime = (int) (w * Math.abs(Math.sin(toRad)) + h * Math.abs(Math.cos(toRad)));
int wPrime = (int) (h * Math.abs(Math.sin(toRad)) + w * Math.abs(Math.cos(toRad)));
BufferedImage rotatedImage = new BufferedImage(wPrime, hPrime, BufferedImage.TYPE_INT_RGB);
Graphics2D g = rotatedImage.createGraphics();
g.setColor(Color.LIGHT_GRAY);
g.fillRect(0, 0, wPrime, hPrime); // fill entire area
g.translate(wPrime/2, hPrime/2);
g.rotate(toRad);
g.translate(-w/2, -h/2);
g.drawImage(originalImage, 0, 0, null);
g.dispose(); // release used resources before g is garbage-collected
return rotatedImage;
}
Here is a test example from the above code:
Original image
Rotated image (by 30 degree)
BTW is there any way to rotate a JLabel with an ImageIcon?
The easier way is to rotate the Icon, not the label.
Check out Rotated Icon for a class that does the rotation and recalculates the size of the Icon as it is rotated.
Intention: adding to panels and layered pane and also saving it to file (saving the layered pane).
Don't know exactly what that means, but if you just want to save an "image" of the layered pane then check out Screen Image.
My app, which uses ZXing to scan QR codes, can't read a QR Code unless the phone is VERY far away from the code (see picture, 6-7+ inches away and still not reading). The code is centered and well within the framingRect, but the camera seems to only be picking up result points from the top 2 positioning squares. I have increased the size of the framing rectangle through some code which I found here, which does yield a much better result.
Code: (replaces getFramingRect from zxing.camera.cameramanager.Java)
public Rect getFramingRect() {
if (framingRect == null) {
if (camera == null) {
return null;
}
Point screenResolution = configManager.getScreenResolution();
int width = screenResolution.x * 3 / 4;
int height = screenResolution.y * 3 / 4;
Log.v("Framing rect is : ", "width is "+width+" and height is "+height);
int leftOffset = (screenResolution.x - width) / 2;
int topOffset = (screenResolution.y - height) / 2;
framingRect = new Rect(leftOffset, topOffset, leftOffset + width, topOffset + height);
Log.d(TAG, "Calculated framing rect: " + framingRect);
}
return framingRect;
}
For reasons beyond my comprehension, with this new larger framing rectangle, codes can be read as soon as they fit inside the rect width, whereas previously the code had to occupy a small region at the center of the rect (see pic).
My Question:
How can I make code scan as soon as it is within the bounds of the framing rect, without increasing the size of the rectangle? Why Is this happening?
Increase the width and height to 4/4 (just leave them as the screen resolution) and then change the framing rect visual representation to make it seem as if the scanner is only inside that. Worked for my app.
In my android camera app, Im trying to make it so that the camera layout view fills the width of the screen and then is proportional (to a square) for the height of the layout. But its cropping it too small for some reason:
example of what is happening..
The green arrow represents where it should go to.
Ive tried fill_parent, etc. So, how can I make it go to the end of the screen?
I believe this is the problem. I know I did this because I was not sure how to make it automatically stretch to the right proportion.
int width = 352;
int height = 288;
camPreview = new CameraSurfaceView(width, height);
myCamHolder.addCallback(camPreview);
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = width*288/352;
Maybe you don't need 288/352, but rather preview size.height/preview size.width
The view got pixilated during animation I just wanted to attain a little tilt while the I try to scroll. I am using the Universal-Image-Library to hanle the animation. I'd like to attain a 3D look when tilting the view.
The first picture, is what I want.
But this picture below, I what I have. The View below got pixilated.
private void rotateLeftFrag(View af) {
if (af != null) {
ObjectAnimator.ofFloat(af, "rotationY", 5, 0)
.setDuration(100).start();
}
}
ObjectAnimator com.nineoldandroids.animation.ObjectAnimator.ofFloat(Object target, String
propertyName, float... values)
Are there any resolve to this to attain smooth animation or titling of the view? Thanks
Update:
float density = getResources().getDisplayMetrics().density;
float scale = getResources().getDisplayMetrics().density;
af.setCameraDistance(density * scale);
ObjectAnimator.ofFloat(af, "rotationY", .5f, 0).setDuration(500).start();
I think this video could help you:
http://www.youtube.com/watch?v=pMcu35-tVls
At 2:10 the guy talks about adding 1 extra transparent pixel to each side of a rotating rectangle. That should help smoothing out the edges because they would be inside the rectangle, not on the border.
Link to the source code is below the video.
In case you can't see it:
http://developer.android.com/shareables/devbytes/CardFlip.zip
Class you want to see is CardView, method bitmapWithBorder:
private static final int ANTIALIAS_BORDER = 1;
/**
* Adding a 1 pixel transparent border around the bitmap can be used to
* anti-alias the image as it rotates.
*/
private BitmapDrawable bitmapWithBorder(BitmapDrawable bitmapDrawable) {
Bitmap bitmapWithBorder = Bitmap.createBitmap(bitmapDrawable.getIntrinsicWidth() +
ANTIALIAS_BORDER * 2, bitmapDrawable.getIntrinsicHeight() + ANTIALIAS_BORDER * 2,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmapWithBorder);
canvas.drawBitmap(bitmapDrawable.getBitmap(), ANTIALIAS_BORDER, ANTIALIAS_BORDER, null);
return new BitmapDrawable(getResources(), bitmapWithBorder);
}
Please try to turn off hardware rendering
if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) {
mHeaderImage.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}