I have a UIImageView. For some reason, the circle crop is not working properly. What it winds up doing is cropping the edges to a circle, but leaves the sides completely straight, any ideas why?
Here is my code:
self.avatarTwo.layer.cornerRadius = self.avatarTwo.frame.size.height /2;
self.avatarTwo.layer.masksToBounds = YES;
self.avatarTwo.layer.borderWidth = 0;
The image is 2448 by 3264 (pixels) and this is how it looks right now cropped:
Although the UIImageView is square, the UIImage's height is much larger than the width. The default content mode for UIImageView is UIViewContentModeScaleToFill which scales the content "to fit the size of itself by changing the aspect ratio of the content if necessary." To make the image centered and filling the UImageView you must use:
self.avatarTwo.contentMode = UIViewContentModeScaleAspectFill;
See contentMode for more information on this.
In essence, your UIImageView is being cropped fine, but the content in that image view is being scaled to not crop any of the content.
Related
I'm trying to scale an NSView for a larger display when I'm testing on my Mac screen, so I can see everything in proportion.
NSRect wFrame = self.window.frame;
wFrame.origin.x = 200;
wFrame.origin.y = 100; // from bottom of my screen
wFrame.size.width = 1080 * 0.5; // so it will fit on my screen
wFrame.size.height = 1920 * 0.5;
[self.window setFrame:wFrame display:YES]; // the window is smaller, but not everything is scaled (e.g., font sizes)
That creates the correct size window, and most of the contents are drawn at half size. But, some things are not scaled.
An NSButton's title text is still the original, large size. If the button contains an image, the image is scaled properly.
The content of a WebView are not rendered at the small size.
How can I scale all of the content, including button titles and Webview content?
I found the answer here: https://stackoverflow.com/a/33293423/236415
I wrapped my full sized NSView (and its subviews) in an NSScrollView (sized for my screen) and then set the magnification to 0.5.
I have an Image inside UIScrollView which i can zoom in and out.
I have a button that let the user rotate the Image 90 degrees:
(void)RotateImage {
CGAffineTransform rotateTrans = CGAffineTransformMakeRotation(-90.0 / 180.0 * 3.14);
BaseImg.transform = rotateTrans;
}
After the imaged is rotated i cannot zoom in and out.. the image is going crazy on the screen and going back to the UNRotated state.
What am i doing wrong? code examples will be great!
Thanks :)
UIScrollView likes to take over the transforms of the views it contains. There are two solutions:
Rotate the image without changing the containing view.
Create a UIView subclass that displays an image within a sublayer.
To rotate the image, see How to Rotate a UIImage 90 degrees?. If you're always and only doing 90 degree rotation, see #Peter Sarnowski's solution. To adapt it to what you're doing here, assuming that BaseImg is a UIImageView:
- (void) rotateImage
{
UIImage *sourceImage = [baseImg image];
UIImage *rotatedImage = [UIImage imageWithCGImage:[sourceImage CGImage] scale:1.0 orientation:UIImageOrientationRight];
[baseImg setImage:rotatedImage];
}
This will only rotate once. To have rotateImage work repeatedly, read the existing orientation property and move it on to the next in clockwise or anticlockwise order.
If the image is not square, you may also need to resize baseImg to reflect its new aspect ratio.
To create a UIView subclass, you need to have it store a CALayer as a sublayer of the view layer. Store the image in the sublayer, and transform the sublayer at will. This is faster, and allows arbitrary rotation, but you need to calculate your own scaling to prevent the rotate image going outside the view bounds.
To simply rotate image the code is perfect but to add zoom in and out and then add rotation you need to retain its transforms.Here is a sample code that can help you.
https://github.com/elc/iCodeBlogDemoPhotoBoard
I have a UIImageView as a subview of UIView (frame size 300 x 300). My UIImage would be either portrait, landscape or some odd sizes. How do I fill in the UIImage within the UIView frame size without stretching the image to 300 x 300?
The purpose of this, I will be adding another UIImageView as the image border.
Please help.
Thanks.
Try
[img setContentMode:UIViewContentModeScaleAspectFit];
UIViewContentModeScaleAspectFit: Scales the content to fit the size of the view by
maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent.
or [img setContentMode:UIViewContentModeScaleAspectFill];
UIViewContentModeScaleAspectFill: Scales the content to fill the size of the view. Some
portion of the content may be clipped to fill the view’s bounds.
if you are clipping subviews, then you need to do
[imgView clipToBounds:YES];
Ah I just reread what you were asking, I know what your question is now.
Your UIImageView's frame changes, and when it does so does your image. You don't want your image to change, but you do want your ImageView to adjust to fill the view it is contained in.
UPDATE
I figured it out.
[self.imageView setContentMode:UIViewContentModeCenter];
No matter what orientation, the size stays the same.
You also have the option of setting it to align top, bottom, left, right, top left, top right, bottom left, bottom right, all of which only help to align your image and NOT redraw or re-size the image.
Does that help?
[image setContentMode:UIViewContentModeScaleToFill];
Set the contentMode property of UIImageView to either of this values depending on where you want to put it in the superview:
UIViewContentModeCenter,
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
As this values:
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit,
UIViewContentModeScaleAspectFill,
Will indeed cause the image to be 300 x 300, which is what you don't want.
Use the contentMode property of UIImageView.
Edit: and set the image size to 300x300.
I'm working on making an iPhone App where there are two ImageViews and when you touch the top one, wherever you tapped, the bottom one shows instead.
Basically what I want to do is cut an ellipse/roundedrect out of an image. To do this I was thinking on either clipping the image, or changing the alpha pixels in the rect to zero. I am new to Quartz 2D Programming so I am not sure how to do this.
Assuming I have:
UIImageView *topImage;
UIImageView *bottomImage;
How do I delete a CGRect/Ellipse/RoundedRect from these images.
This is kind of like those lottery tickets that you have to scratch off to reveal if you won.
I would generally try to make a mask from a path (here containing a rounded rectangle), then masking the image with it, as demonstrated in the apple docs. The one of the benefits of this is that for hit testing all you need to do is CGPathContainsPoint with the point that was touched (as in it will test whether it was in the visible area of the image).
I tried this code:
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect frame = CGRectMake(100, 100, 100, 100);
CGPathRef roundedRectPath = [self newPathForRoundedRect:frame radius:5];
CGContextAddPath(ctx, roundedRectPath);
CGContextClip (ctx);
CGPathRelease(roundedRectPath);
(Together with the rounded rect path function you sent)
This is on a white view and beneath the view there is a gray Window, so I thought this would just show gray instead of white in CGRect frame but it didn't do anything...
I have a UIImageView that is displaying an image that is wider and taller than the UIImageView is. I would like to pan the image within the view using an animation (so that the pan is nice and smooth).
It seems to me that I should be able to just adjust the bounds.origin of the UIImageView, and the image should move (because the image should paint inside the view with that as its origin, right?) but that doesn't seem to work. The bounds.origin changes, but the image draws in the same location.
What almost works is to change the contentsRect of the view's layer. But this begins as a unit square, even though the viewable area of the image is not the whole image. So I'm not sure how I would detect that the far edge of the image is being pulled into the viewable area (which I need to avoid, since it displays by stretching the edge out to infinity, which looks, well, sub-par).
My view currently has its contentsGravity set to kCAGravityTopLeft via Interface Builder, if that makes a difference (Is it causing the image to move?). No other options seemed to be any better, though.
UPDATE: to be clear, I want to move the image inside the view, while keeping the view in the same spot.
I'd highly recommend enclosing your UIImageView in a UIScrollView. Have the UIImageView display the full image, and set the contentSize on the UIScrollView to be the same as your UIImageView's size. Your window into the image will be the size of the UIScrollView, and by using scrollRectToVisible:animated: you can pan to particular areas on the image in an animated fashion.
If you don't want scroll bars to appear, you can set the showsHorizontalScrollIndicator and showsVerticalScrollIndicatorproperties to NO.
UIScrollView also provides pinch-zooming functionality, which may or may not be useful to you.
Brad Larson pointed me down the right road with his suggestion to put the UIImageView inside a UIScrollView.
In the end I put the UIImageView inside of a UIScrollView, and set the scrollView's contentSize and the imageView's bounds to be the same size as the image in the UIImage:
UIImage* image = imageView.image;
imageView.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
scrollView.contentSize = image.size;
Then, I can animate the scrollView's contentOffset to achieve a nice panning effect:
[UIView beginAnimations:#"pan" context:nil];
[UIView setAnimationDuration:animationDuration];
scrollView.contentOffset = newRect.origin;
[UIView commitAnimations];
In my particular case, I'm panning to a random space in the image. In order to find a proper rect to pan to and a proper duration to get a nice constant speed, I use the following:
UIImage* image = imageView.image;
float xNewOrigin = [TCBRandom randomIntLessThan:image.size.width - scrollView.bounds.size.width];
float yNewOrigin = [TCBRandom randomIntLessThan:image.size.height - scrollView.bounds.size.height];
CGRect oldRect = scrollView.bounds;
CGRect newRect = CGRectMake(
xNewOrigin,
yNewOrigin,
scrollView.bounds.size.width,
scrollView.bounds.size.height);
float xDistance = fabs(xNewOrigin - oldRect.origin.x);
float yDistance = fabs(yNewOrigin - oldRect.origin.y);
float hDistance = sqrtf(powf(xDistance, 2) + powf(yDistance, 2));
float hDistanceInPixels = hDistance;
float animationDuration = hDistanceInPixels / speedInPixelsPerSecond;
I'm using a speedInPixelsPerSecond of 10.0f, but other applications might want to use a different value.