Why are there jagged edges on some of the texts and images in the app i am developping?
I have tried to go through the frames, and i have not used a division to set a frame (so the 1.134234 is not an issue), and I have tried different antialiasing methods.
Does anybody have an idea?
See attached for an example.
EDIT:
The images become jagged, when downscaled. So either resize them to fit the size directly in the actual file, OR via code as suggested in other StackOverflow questions.
Now trying to figure out how to fix the text also! :)
EDIT EDIT EDIT EDIT
Answer will posted tomorrow (after 24 hours).
1) Image problem: Make sure the actual image size you are using is close to the size you are actually using it... (Feks 100 points with an image at #1x that is 100, #2x that is 200, and #3x that is 300, where 100,200, and 300 are the actual image file pixels). Or resize using code in the correct way to match.
When iOS is downscaling (as well as upscaling) an image, the pixels get disorted.
The problem in my case was using a too big an image.
2) As to the button, I don't know exactly why, but it got solved using attributedText for the title instead of the usual text. Method used is:
[button setAttributedTitle: forState:];
Solved it :D
1) Image problem: Make sure the actual image size you are using is close to the size you are actually using it... (Feks 100 points with an image at #1x that is 100, #2x that is 200, and #3x that is 300, where 100,200, and 300 are the actual image file pixels). Or resize using code in the correct way to match.
When iOS is downscaling (as well as upscaling) an image, the pixels get disorted.
The problem in my case was using a too big an image.
2) As to the button, I don't know exactly why, but it got solved using attributedText for the title instead of the usual text. Method used is:
[button setAttributedTitle: forState:];
Related
I have a very strange bug which appears randomly amongst users. In most cases, the same image loaded into a UIImageView shows perfectly, but occasionally has an artefact line running through it as in the pic attached. We cannot reproduce during testing on either the simulator or device. The image loaded is a simple png:
groupAvatarIV = [[UIImageView alloc] initWithFrame:CGRectMake(horizontalMargin, 5, 70, 70)];
groupAvatarIV.clipsToBounds = YES;
groupAvatarIV.layer.cornerRadius = 70 /2;
groupAvatarIV.image = [UIImage imageNamed:#"avatar"];
[contentV addSubview:groupAvatarIV];
I am really out of ideas how to debug this - any tips would be appreciated please.
It looks like the image contains data for a width greater than itself, so it keeps writing data in an address that becomes the next line down etc... (evidenced by the fact that it starts at the widest part of the circle)
maybe there is something wrong with the params on the image, or it might just be an apple bug...
if it is an apple bug, I would expect it to be with the behavior of clipToBounds
try to collect OS info from the users that experience it... also you could try to re-save the images using a different program, like use ffmpeg to save them as a tiff, then convert back to png (which should be a lossless route), so you know it had to re-interpret it...
Turned out the project which we took over contained multiple image files with the same name, which is what caused the artefacts.
You have mentioned that you have added the imageView in another view as a subview. It seems that the image view is not fit to the superview. You need to check the frame size of both views. Then you need to set the frame of the image view equal to or less than the superview.
I want to make a basic photo editing in my application and now I need to be able to add a text over a photo. Original photo have something like >2000 pixels width and height so it will be scaled to fit in screen without modifying its ratio.
So , I put the image in an UIImageView, dragged a Label over it and then save the image on screen with UIGraphicsGetImageFromCurrentImageContext. The problem is I will get a small image (320 X some height).
What is the best approach to accomplish this task but not shrink the resolution?
Thanks a lot!
I had this exact same problem in an app.
The thing I realised is that you can't do this by doing a screen capture. In turn, this means that dragging labels and text onto the image can't really be done (it can but bear with me) with UILabels etc...
What you need to do is keep a track of everything that's going on data-wise.
At the moment you have the frame of your UIImageView. This, in reality is irrelevant. It is purely there to show the user a representation of what is going on.
This is the same for the UILabel. It has a frame too. Again, this is irrelevant to the final image.
What you need is to store the data behind it in terms that are not absolute and then convert those values into frames for displaying on the device.
So, if you have an image that is 3200x4800 pixels (just making it easy for me) and this is displayed on the device and "shrunk" down to 320x480. Now, the user places a label with a frame of 10, 10, 100, 21 with the text "Hello, world" at a particular font size.
Storing the frame 10, 10, 100, 21 is useless because what you need when the image is output is... 100, 100, 1000, 210 (i.e. ten times the size).
So, really you should be storing information in the background like...
frame = 0.031, 0.021, 0.312, 0.044
// these are all percentages
Now, you have percentage values of where the label should be and how big it should be based on the size of the image.
So, for the shrunk image size it will return 10, 10, 100, 21 and for the full image size it will be 100, 100, 1000, 210 and so will look the same size when printed out.
You could create a compound UIView by having a UIView with a UIImageView and a UILabel then you just have to resize it to the full image size before rendering it. That would be the easy but naive way of approaching it initially.
Or you could create a UIView with CALayers backing it that display the image and text.
Or you could render out the image and text with some sort of draw method.
Either way, you can't just use a screen capture.
And yes, this is a lot more complex than it first appears.
Apologies for posting an image-related question as a new user, I need more reputation in order to include pics in my post :)
I am trying to resize an image without scaling its corners. I tried using resizableImageWithCapInsets as well as slicing through an asset catalog (although the latter only supports a deployment target of iOS 7+, which really does not make it a solution option...). I am using an image named "ViewHeaderTest.png" which is 44x100 pixels. The caps/insets should be a 16x16 pixel square in each corner.
This is the code:
UIImageView *headerTest = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"ViewHeaderTest.png"]];
headerTest.image = [headerTest.image resizableImageWithCapInsets:UIEdgeInsetsMake(8, 8, 8, 8) resizingMode:UIImageResizingModeStretch];
headerTest.frame = CGRectMake(0, 0, 22, 50);
Code as well as asset catalog slicing produce the same result for me, which, oddly, does not appear mentioned anywhere else on stackoverflow: The caps / insets work fine, but they are scaled to double their original size. Basically it appears that resizableImageWithCapInsets takes returns an image of twice its original proportions.
Any takers? :)
Solution found:
As suspected, this is a retina issue. To avoid xcode confusing retina and non-retina images when using cap insets,
Specity image name without file extension, i.e. #"FileName" instead of #"FileName.png"
Have retina AND "normal" version of the file in corresponding resolutions in your project. I.e. have FileName.png (100px x 100 px) AND FileName#2x.png (200px x 200px) in the project.
I'm happy that it works, so I have not checked if either of these is redundant :)
I just started learning obj-c the other day and i'm putting together a crappy game as practice. I have an IMG as a main character to the game and every time this character hits certain obstacles, i wanted the size of the image to change (decrease or increase depending on the circumstance).
I used photoshop the change the size of the images to the appropriate sizes but for some reason, when i run the game, the images change when i want them too, but they are way smaller than the size i set them to in photoshop......
any ideas?
i don't think its necessary to post my code for something as simple as this, right? its just a simple "if" statement followed by the instance and the UIimage named for the image name...
I assume you display the image in an UIImageView? Or do you use SpriteKit? If you use an UIImageView the image is actually automatically scaled to the size of the UIImageView.
Therefore you would just change the size of the UIImageView (you can of course also change the image inside the UIImageView.
If you are using SpriteKit, you have to remember, that your are probably testing on a 'retina' device and for this reason the image's width and height is divided by 2 (the real resolution of the current iPhone 5/5s is 1136x640 and not 568x320 !
I’m new in iOS and trying to make simple app with hierarchy of viewcontrollers. In the last one I wanna display scrollable image (which can also be zoomed at least x1,5), containing some small black and white picture and a piece of text. Initially I planned to make vector image, convert it to .jpg and use UIScrollView for displaying. But I found out that .jpg ( approx. 150 KB) didn’t provide a good quality for displaying text. As I have to use a lot of images I don’t want to increase image size. What is worse I also want it look good on retina display.
Can you recommend a way how to display image, containing text, with enough quality?
I mean that I don’t want the user see the separate pixels of letters in the text. Just like when you read text in your e-mail in iOS. Image size should be as small as possible. Planning physical size of image – approx. 5 cm x 15 cm.
Any help much appreciated
Thanks
To get good edges you would need to use png not jpg, which will make the image sizes much larger. I have a better suggestion, more code but better solution.
The answer is to not put the text into the image, but to draw it over it in real time.
You would:
associate text at some coordinate in the image (say a CGRect) with the image
create a uiimageview subclass that in the drawRect routine, after calling super, draws the text using the NSString categories on UIKit (which let you draw into a context)
To get going on this please create a small one vc project and get the subclass working there, then back port it to your primary project.