I have a square image in an ImageView contained within a FrameLayout that is right aligned (landscape layout). The FrameLayout is set to FillParent width and height and the ImageView is set to Adjust View Bounds so that the resulting ImageView is a perfect square with each side being the length of the height of the landscape layout, right aligned. However, the original image is larger than this.
I need to get the coordinates clicked on the ImageView in relation to itself (ie. the top left hand corner of the ImageView is 0,0 and the bottom right corner would be the displayed width and height coordinates) so that I can work out if the clicked point was past the mid-point of the ImageView.
I initially get the size of the ImageView using:
int myImageViewWidth = imageView.getWidth();
int myImageViewHeight = imageView.getHeight();
I've created an OnTouchListener and within this I'm using event.getX() and event.getY(), but this seems to return the coordinates relative to the image's oiginal size, not the displayed size. I've also tried the following:
Matrix m = imageView.getImageMatrix();
float[] values = new float[9];
m.getValues(values);
float relativeX = (event.getX() - values[2]) / values[0];
float relativeY = (event.getY() - values[5]) / values[4];
But again this seems to return inaccurate coordinates. Can anyone please help?
Related
In the code below, I'm trying to replace a sticker with an imageView keeping the same [Width, Height, TranslateX, TranslateY, and Rotation] of the sticker to give it to the imageView :
transX = selectedSticker.getTransX();
transY = selectedSticker.getTransY();
rotation = selectedSticker.getCurrentAngle();
ImageView mHoverView = findViewById(R.id.drawingView);
mHoverView.setLayoutParams(new FrameLayout.LayoutParams((int) stickerWidth, (int) stickerHeight));
mHoverView.setTranslationX(transX);
mHoverView.setTranslationY(transY);
mHoverView.setRotation(rotation);
mHoverView.setImageResource(R.drawable.dog);
mHoverView.setBackgroundColor(Color.BLUE);
When I click on REPLACE button to replace the sticker with imageView, everything works just fine, the problem starts when I rotate the sticker and clicks on the REPLACE button, the imageView takes the same rotation as the sticker, but it set in the wrong position (the imageView is not rotated around it center) :
e.g.
NO ROTATION :
WITH ROTATION :
Perhaps, you have to obtain correct translation values by re-calculating the transform matrix that is compatible to the View's transform.
//mHoverView.setTranslationX(transX);
//mHoverView.setTranslationY(transY);
Matrix m = new Matrix();
m.setTranslate(transX, transY);
m.postRotate(rotation);
float[] offset = { 0.0F, 0.0F };
m.mapPoints(offset);
mHoverView.setTranslationX(offset[0]);
mHoverView.setTranslationY(offset[1]);
The issue was I didn't set the PivotX and PivotY so the view is not rotated around the center, here's the full code :
float[] values = new float[9];
selectedSticker.getMatrix().getValues(values);
float dx = values[2];
float dy = values[5];
mHoverView.setPivotX(0.0f);
mHoverView.setPivotY(0.0f);
mHoverView.setTranslationX(dx);
mHoverView.setTranslationY(dy);
mHoverView.setRotation(rotation);
mHoverView.invalidate();
In the following code:
Text imageText = textX.getTextWithDefaultBoldLookAndFeel("Image:");
BufferedImage image = (pojo.getImage() != null) ? pojo.getImage() : imageX.getImageFromFileAsBufferedImage(GlobalVar.defaultImage);;
double maxHeight = 300;
double maxWidth = 150;
Pane imageViewPane = new Pane();
imageViewPane.setMaxWidth(maxWidth);
imageViewPane.setMaxHeight(maxHeight);
//Setting the image view
Image image = SwingFXUtils.toFXImage(image, null);
//Setting the image view
ImageView imageView = new ImageView(image);
//Setting the fit height and width of the image view
imageView.setFitWidth(maxWidth);
//imageView.minWidth(maxWidth); // this won't solve the problem
imageView.setFitHeight(maxImageHeight);
//imageView.minHeight(maxHeight); // this won't solve the problem
// this solves the problem but also enlarges image which I do not want
imageView.setPreserveRatio(false);
imageGridPane.add(imageText, 0, 3);
imageGridPane.add(imageView, 1, 3);
gridPane.addRow(1, imageGridPane);
I'm adding Image to ImageView which is then added to a GridPane. The images I'm adding are of different sizes - some are too small to fill the entire ImageView area (300 x 150). When this occurs it causes the parent GridPane box to be smaller than the other boxes. I do not desire this. I realize that when an image is too small I am able to resize the image by setting imageView.setPreserveRatio(false); however, while it creates uniform boxes, it also causes the image to become blurry.
I would like for the image to be displayed however big (up the max limit) or small it is (i.e, not to be enlarged if too small) but I still want a uniform size for all ImageViews so that the parent GridPane (box) are all the same size. Perhaps so sort of transparent border can be added when the image is too small so that the image is not enlarged but ImageView still takes up same space as other large images - forcing uniform box size. I was unable to accomplish this by setting minWidth and minHeight properties of parent GridPane.
How can this be achieved?
Thanks!
So I overlayed a view of another view. And try to position my arrow so that it points to the image underneath it:
The arrow is an ImageView and I set its top and left margins to position it in the right place. I did it by adding the width of the TextView underneath it that says "No photo taken today" to the TextView's left border position. But funnily, the arrow is pointing to the middle and not the end of that TextView.
int topMargin=(int)pxToDp(getRelativeTop(dailyPhotos)+(int)dailyPhotos.getHeight(),this);
int leftMargin=(int)pxToDp(getRelativeLeft(dailyPhotos)+dailyPhotos.getWidth(),this);
getRelativeLeft() I copied from this answer.
I show the width of that TextView and the screen's width in a Toast. They are both correct since that TextView's width is set to match_parent. I don't what is wrong.
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int height = displayMetrics.heightPixels;
int width = displayMetrics.widthPixels;
Toast.makeText(this,"width="+dailyPhotos.getWidth()+", screen's width="+width,Toast.LENGTH_SHORT).show();
showNote.putExtra("photoCountTopMargin", topMargin);
showNote.putExtra("photoCountLeftMargin", leftMargin);
Reading/Changing the margin of a view needs to be done in the layoutparams of the view
LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
layoutParams.topMargin = ddd (in pixels)
I want to place some images (triggered on click action) inside a layout. I have to place them such that they don't get out of the parent layout.
Code I'm using to add a new image on clicking the layout:
LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
ImageView image = new ImageView(this);
LinearLayout.LayoutParams coordinates = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
image.setLayoutParams(coordinates);
image.setImageResource(R.drawable.image);
layout.addView(image);
If I press on the layout , I must see my imageView put randomly.
Random random = new Random();
int x = random.nextInt(layout.getWidth());
int y = random.nextInt(layout.getHeight());
image.setX(x);
image.setY(y);
But this won't do it. And I see those images outside my layout too.
You are setting x & y which are upper left-top corner - starting point of image to display it. As x/y value can be right/bottom corner, therefore, your image goes out of layout in that case.
Please note - x, y are starting point from where your image will be drawn.
You need to make sure that layoutWidth - x >= imageWidth and layoutHeight - y >= imageHeight.
I'm working on image, making a feature which allows user to place tags on images (like Facebook photo tag). I have a zoomable ImageView (using Mike Ortiz's TouchImageView) as a background image, and some ImageViews as image tags.
Each tag has X and Y position, and there is no problem in displaying both background image and image tags in correct position. However, when user triggers pinch zoom, the position of background image is changed. Which means, the position of each image tags must also be changed/updated according to the current background image's zoom level and scroll position.
I'm currently using this method:
float currentZoom = mImageView.getCurrentZoom();
float zoomedX = x / currentZoom;
float zoomedY = y / currentZoom;
But when I tried, it went totally wrong. Can anyone help me finding correct method/equation?
EDIT:
I tried using Matrix.mapPoints(), but I don't understand how this matrix could help me solving my problem. Here is an image for better explanation:
I finally get the answer (thanks to pskink)! To get the exact tag position on image, all we have to do is to use Matrix.mapPoints(). But that alone will not give the new X & Y position after zoom. We have to multiply the current X & Y position with the current zoom level to get the "after zoom position".
In other words:
Matrix matrix = mImageView.getImageMatrix();
float[] pts = {0, 0};
matrix.mapPoints(pts);
float newTagX = (tagX * currentZoom) + pts[0];
float newTagY = (tagY * currentZoom) + pts[1];