I am trying to draw a bounding box around the monkey's face in this image. The coordinates I want to use are the following:
64,111
347,111,
64,304,
347,304
I am displaying the image with resizeMode = contain which results in the bounding box being misplaced and the wrong size.
I think the top-left of the rectangle should be at 64,111 using position absolute and the width and height should just be the difference between the points (width = 283 and height = 193). I know that since the image is not being displayed at its full height and width I need to scale down the bounding box accordingly. However, I can't figure out what the image's final size is after it has been resized. How can I figure this out in order to display my bounding box correctly?
Here is my code so far: https://snack.expo.dev/#melampus123/forlorn-raisins
Related
If you specify dimensions in the style prop of an <Image> component in React Native, adding resizeMode={'contain'} causes the image to preserve its aspect ration and fit entirely in the box whose dimensions you've specified in style. It will also center the image horizontally and vertically within that box.
However, as far as I can tell, center does the same thing as contain. What's the difference?
The difference is how the image fits in the Image container.
Center: the image will be centered in the image container according to the size of the container. It will have uniform space on left, right and top, bottom sides because the image is centered.
Contain: the image is fitted inside the image container keeping the aspect ratio of the image. This means the image will touch the container walls from either width or height or both depending on which side is larger or smaller.
Container is the Image component itself.
In order to see the differences in action, give background color to the Image component.
See the expo slack to better understand it: https://snack.expo.io/#saadqbal/resizemode
From the official document it says:
center:
Center the image in the view along both dimensions. If the
image is larger than the view, scale it down uniformly so that it is
contained in the view.
contain:
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be
equal to or less than the corresponding dimension of the view (minus
padding).
To get the clear idea about it I would suggest a small trick.
Take a view of 50*50 and put image inside it. Now take rectangle(with more height) and square image. See the difference.
When you use contain it satisfies the following condition
Scale Image Width ≤ Image View Dimension Width
Scale Image Height ≤ Image View Dimension Height
When you use center if image is smaller than the view it will have empty spaces in both x and y directions depending on the image size.
If it is larger then ( unless if you specified the scale ) by default it scales down to contain in it ( this is the situation where it appears to be acting similar to contain )
If the image is larger than the view, scale it down uniformly so that it is contained in the view. Documetation
Check this explanation Understanding “resizeMode” in React Native by Mehran Khan
I want to know how to find the length and width of the image that has been re-sized to fit in the picturebox zoom mode
I tried this code but I got the original image size which I don't want.
PictureBox2.Width
PictureBox2.Height
I'm trying to make an NSTextField with only two rounded corners on the top-left and bottom-left. I tried to do the following, but in this case I get all corners rounded:
[self.myTextField:YES];
self.myTextField.layer.cornerRadius = 5;
What should I do to have only two (or for example one) rounded corners?
I'm a little out of my lane in OS X, but what you want to do is embed whatever corner art you like into an image and present those on an image view behind the NSTextField.
Resize the image view exactly as you do the text field, but first set the image's capInsets property. Size the insets to exclude the corners from scaling as the extent of the image changes. (Make sure your corner art is placed at the extreme edges of the image).
i have some picture which is 675x503. I would like to make more width on it and let's say to 1024 and in height to 400. How to do that without cutting my image and keep quality? I just would like to have this image on my website top. I got photoshop 6. I tried with Image->image size but its not what i need.
If you don't want to cut the picture at all, this will distort the image due to different height and width ratios. If this is not an issue, you could simply hit ctrl(or cmd)+t when the layer with the picture is selected. It will let you resize and rotate the entire image. There is also an option in the Image -> Image Size menu called "Bicubic Sharper", found in the drop-down list at the bottom of the menu(Photoshop CS6). It's meant for image reduction and should also solve your problem.
I am trying to render the image of a scroll view even to the areas which is outside the visible area of the screen. I am resizing the frame of the scroll view to include the content size width and height.After resizing, I am doing a renderInContext and finally taking the image by UIGraphicsGetImageFromCurrentImageContext.
All I am getting is a square box of black color of certain bytes. If i do not resize the frame of the view, i get the image with incorrect frame.
Does changing the frame affect renderInContext? What can i do to get the correct image after resizing?