How can I call this function?
I am trying to call this function from -viewDidLoad.
I tried [circularImageWithImage(imageView.image, myclor, 0.2)];
static UIImage *circularImageWithImage(UIImage *inputImage,
UIColor *borderColor,
CGFloat borderWidth)
{
CGRect rect = (CGRect){ .origin=CGPointZero, .size=inputImage.size };
UIGraphicsBeginImageContextWithOptions(rect.size, NO, inputImage.scale); {
// Fill the entire circle with the border color.
[borderColor setFill];
[[UIBezierPath bezierPathWithOvalInRect:rect] fill];
// Clip to the interior of the circle (inside the border).
CGRect interiorBox = CGRectInset(rect, borderWidth, borderWidth);
UIBezierPath *interior = [UIBezierPath bezierPathWithOvalInRect:interiorBox];
[interior addClip];
[inputImage drawInRect:rect];
}
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return outputImage;
}
You can try with this code.
UIImage *image = [UIImage imageNamed:#"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];//set your frame
//imageView.center = self.view.center;
UIImage *modifiedImage = circularImageWithImage(image, [UIColor redColor], 1.2);//border width >= 1.0 is better. Otherwise you may not see this
imageView.image = modifiedImage;
[self.view addSubview:imageView];
UIImage *sample = circularImageWithImage(imageView.image, myclor, 0.2);
Related
I need round and text on the round on UIImage like this Image
Sample Image here
Here is my code which i achieved already but with square not in round, i need round around the text.
+(UIImage*)drawText:(NSString*)text inImage:(UIImage*)image atPoint:(CGPoint)point
{
UIFont *font = [UIFont boldSystemFontOfSize:50];
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
CGRect rect = CGRectMake(point.x - 10, point.y - 10, image.size.width, image.size.height);
[text drawInRect:CGRectIntegral(rect) withAttributes:#{NSFontAttributeName:font,NSBackgroundColorAttributeName:[UIColor colorWithRed:0.26 green:0.32 blue:0.59 alpha:1.0],NSForegroundColorAttributeName:[UIColor whiteColor]}];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Thanks in advance.
Do something like that:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.imgview.image = [ViewController drawText:#"iOS" inImage:[UIImage imageNamed:#"eye"] atPoint:CGPointMake(30 , 30)];
self.imgview.layer.cornerRadius = self.imgview.frame.size.height/2;
self.imgview.clipsToBounds = YES;
}
+ (UIImage*)drawText:(NSString*)text inImage:(UIImage*)image atPoint:(CGPoint)point
{
UIFont *font = [UIFont boldSystemFontOfSize:20];
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
CGRect rect = CGRectMake(point.x - 10, point.y - 10, image.size.width, image.size.height);
[text drawInRect:CGRectIntegral(rect) withAttributes:#{NSFontAttributeName:font,NSBackgroundColorAttributeName:[UIColor colorWithRed:0.26 green:0.32 blue:0.59 alpha:1.0],NSForegroundColorAttributeName:[UIColor whiteColor]}];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
UPDATE
For this you have to add some more logic like below.
- (void)viewDidLoad {
[super viewDidLoad];
self.imgview.image = [ViewController drawText:#"iOS Dev" inImage:[UIImage imageNamed:#"Lion"] bgCircleRect:CGRectMake(15, 15, 100, 100)];
}
+ (UIImage*)drawText:(NSString*)text inImage:(UIImage*)image bgCircleRect:(CGRect) bgCircleRect
{
UIFont *font = [UIFont boldSystemFontOfSize:20];
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
CGRect rect = CGRectMake(bgCircleRect.origin.x+10, bgCircleRect.origin.y+35, bgCircleRect.size.width, bgCircleRect.size.height);
UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect: bgCircleRect cornerRadius: 50];
[UIColor.redColor setFill];
[path fill];
[text drawInRect:CGRectIntegral(rect) withAttributes:#{NSFontAttributeName:font,NSBackgroundColorAttributeName:[UIColor redColor],NSForegroundColorAttributeName:[UIColor whiteColor]}];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Output
For making the UIImageView round, First check whether the length and width is same, then apply the following code in the viewDidLoad()
yourpic.layer.cornerRadius = yourpic.frame.size.width / 2;
yourpic.clipsToBounds = YES;
I think this will do.
I think you are looking for corner radius :
+(void)drawText:(NSString*)text inImage:(UIImage*)image atPoint:(CGPoint)point{
UIImageView *imageView = [[UIImageView alloc] init];
UIFont *font = [UIFont boldSystemFontOfSize:50];
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
CGRect rect = CGRectMake(point.x - 10, point.y - 10, image.size.width, image.size.height);
[text drawInRect:CGRectIntegral(rect) withAttributes:#{NSFontAttributeName:font,NSBackgroundColorAttributeName:[UIColor colorWithRed:0.26 green:0.32 blue:0.59 alpha:1.0],NSForegroundColorAttributeName:[UIColor whiteColor]}];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
imageView.center = point;
imageView.image = newImage; }
Add image to imageView and add that as subView to your main view
how to use SVGKImage change SVG fill color?
SVGKImage *svgImage = [SVGKImage imageNamed:#"card.svg"];
svgImage.size = self.bounds.size;
SVGKLayeredImageView *imageLayer = [[SVGKLayeredImageView alloc] initWithSVGKImage:svgImage];
SVGKLayer *layer = (SVGKLayer *)imageLayer.layer;
self.layer.mask = layer;
Here, I find a easy way to get the CAShapeLayer
SVGKImage *svgImage = [SVGKImage imageNamed:#"test.svg"];
CAShapeLayer *thisLayer = svgImage.CALayerTree;
//thisLayer has the UIBezierPath info in test.svg,so,you can do anything with it.
You have to use the CALayer sub-layers to changing the color :
SVGKImage *svgImage = [SVGKImage imageNamed:#"Anchor.svg"];
SVGKLayeredImageView *svgImageView = [[SVGKLayeredImageView alloc] initWithSVGKImage:svgImage];
[capturedImageView addSubview:svgImageView];
CALayer* layer = svgImageView.layer;
for (CALayer *subLayer in layer.sublayers) {
DLog(#"%#", [subLayer class]);
for (CALayer *subSubLayer in subLayer.sublayers) {
DLog(#"%#", [subSubLayer class]);
for (CALayer *subSubSubLayer in subSubLayer.sublayers) {
DLog(#"%#", [subSubSubLayer class]);
if( [subSubSubLayer isKindOfClass:[CAShapeLayer class]]){
CAShapeLayer* shapeLayer = (CAShapeLayer*)subSubSubLayer;
shapeLayer.fillColor = [UIColor redColor].CGColor;
}
}
}
}
Hope this helps.
Source : https://github.com/SVGKit/SVGKit/issues/98
I know a method that can change the color of an UIImage.
So, we should get the UIImage from SVGKImage firstly.
UIImage *img = [SVGKImage imageNamed:#"imageName"].UIImage;
And then, we can define a method like this:
- (UIImage *)changeTintColorWithImage:(UIImage *)img color:(UIColor *)tintColor {
UIImage *imageIn = img;
CGRect rect = CGRectMake(0, 0, imageIn.size.width, imageIn.size.height);
CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageIn.CGImage);
BOOL opaque = alphaInfo == kCGImageAlphaNoneSkipLast
|| alphaInfo == kCGImageAlphaNoneSkipFirst
|| alphaInfo == kCGImageAlphaNone;
UIGraphicsBeginImageContextWithOptions(imageIn.size, opaque, imageIn.scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, imageIn.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGContextClipToMask(context, rect, imageIn.CGImage);
CGContextSetFillColorWithColor(context, tintColor.CGColor);
CGContextFillRect(context, rect);
UIImage *imageOut = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return imageOut;
}
OK. this method can help us change the color of an image.It mainly use some APIs in CoreGraphics.
And I suggest you can create a category with UIImage, it will be convenient to use.
Now you can change the color of png image itself.
Objective C:
UIImage *img = [UIImage imageNamed:#"imagename"];
UIImage *tintedImage = [img imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIImageView *imgVw = [[UIImageView alloc] initWithImage:tintedImage];
imgVw.frame = CGRectMake(0, 20, 100, 100);
imgVw.tintColor = [UIColor greenColor];
[self.view addSubview:imgVw];
SWIFT:
let img = UIImage(named: "imagename")
let tintedImage: UIImage? = img?.withRenderingMode(.alwaysTemplate)
let imgVw = UIImageView(image: tintedImage)
imgVw.frame = CGRect(x: 0, y: 20, width: 100, height: 100)
imgVw.tintColor = UIColor.green
view.addSubview(imgVw)
cheers!!!
I am using this library to crop image form appropriate path.
Seems it works perfect, but after modification the image has another size, that I can't understand how to control.
I have added image with the same size as a container. Sizes = 320 x 524
There is an method in the sources that return cropping image:
- (UIImage *)deleteBackgroundOfImage:(UIImageView *)image
{
NSArray *points = [self.croppingPath points];
CGRect rect = CGRectZero;
rect.size = image.image.size;
UIBezierPath *aPath;
UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0.0);
{
[[UIColor blackColor] setFill];
UIRectFill(rect);
[[UIColor whiteColor] setFill];
aPath = [UIBezierPath bezierPath];
// Set the starting point of the shape.
CGPoint p1 = [MZCroppableView convertCGPoint:[[points objectAtIndex:0] CGPointValue] fromRect1:image.frame.size toRect2:image.image.size];
[aPath moveToPoint:CGPointMake(p1.x, p1.y)];
for (uint i=1; i<points.count; i++)
{
CGPoint p = [MZCroppableView convertCGPoint:[[points objectAtIndex:i] CGPointValue] fromRect1:image.frame.size toRect2:image.image.size];
[aPath addLineToPoint:CGPointMake(p.x, p.y)];
}
[aPath closePath];
[aPath fill];
}
UIImage *mask = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0);
{
CGContextClipToMask(UIGraphicsGetCurrentContext(), rect, mask.CGImage);
[image.image drawAtPoint:CGPointZero];
}
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGRect croppedRect = aPath.bounds;
croppedRect.origin.y = rect.size.height - CGRectGetMaxY(aPath.bounds);//This because mask become inverse of the actual image;
croppedRect.origin.x = croppedRect.origin.x*2;
croppedRect.origin.y = croppedRect.origin.y*2;
croppedRect.size.width = croppedRect.size.width*2;
croppedRect.size.height = croppedRect.size.height*2;
CGImageRef imageRef = CGImageCreateWithImageInRect(maskedImage.CGImage, croppedRect);
maskedImage = [UIImage imageWithCGImage:imageRef];
return maskedImage;
}
When I debug maskedImage before maskedImage = [UIImage imageWithCGImage:imageRef]; line it seems the method remove background correct, but by some reason after the method CGImageCreateWithImageInRect(maskedImage.CGImage, croppedRect); modify frame of cropped image. I tried to set cropped rect manually in CGImageCreateWithImageInRect to crop just needed frame.
CGImageRef imageRef = CGImageCreateWithImageInRect(maskedImage.CGImage, CGRectMake(0, 0, 320, 100));
But it return nothing for me.
How can I extract appropriate rect?
Also this lines multiply rect x2:
croppedRect.origin.x = croppedRect.origin.x*2;
croppedRect.origin.y = croppedRect.origin.y*2;
croppedRect.size.width = croppedRect.size.width*2;
croppedRect.size.height = croppedRect.size.height*2;
So when I debug it:
origin=(x=242, y=874) size=(width=191, height=164)
So as you can see the Y point out of my image height size 524, but by some reason it works.
I am setting a UIButton's ImageView.Image property to an image that was captured from an ImagePickerController. In my app, the image is captured and rounded with a border. The image is saved and I am loading the image into the button. Problem is, the button is showing only a blue circle and not the image inside... This only seems to happen on buttons.
Here is my code to round the image and set the border:
-(UIImage *)makeRoundedImage:(UIImage *) image
radius: (float) radius;
{
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
imageLayer.contents = (id) image.CGImage;
imageLayer.backgroundColor = [[UIColor clearColor] CGColor];
imageLayer.masksToBounds = YES;
imageLayer.cornerRadius = radius;
imageLayer.borderWidth = 40;
UIColor *ios7BlueColor = [UIColor colorWithRed:0.0 green:122.0/255.0 blue:1.0 alpha:1.0];
imageLayer.borderColor = ios7BlueColor.CGColor;
UIGraphicsBeginImageContext(image.size);
[imageLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return roundedImage;
}
And here is how I am setting the button image:(player.playerImage is a cordite string with the path to the saved image)
-(void)ViewController:(UIViewController *)sender didUpdatePlayerImage:(NSString *)playerImagePath
{
player.playerImage = playerImagePath;
[_editImageButton setImage:[UIImage imageWithContentsOfFile:player.playerImage] forState:UIControlStateNormal];
}
Is this a limitation to the UIButton's ImageView implementation or am I missing something?
You are not actually writing the original image into the context.
Try the following:
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
[imageLayer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
That should render the image into the context, followed by your layer.
I have the following method that for some reason does NOT display the image:
- (void)drawRect:(CGRect)rect
{
float cornerRadius = self.bounds.size.width/RADIUS_RATIO;
UIBezierPath *roundedRect = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:cornerRadius];
[roundedRect addClip];
[[UIColor whiteColor] setFill];
UIRectFill(self.bounds);
[[UIColor blackColor] setStroke];
[roundedRect stroke];
CGRect imageRect = CGRectInset(self.bounds,
self.bounds.size.width * 0.5,
self.bounds.size.height * 0.5);
if (self.faceUp)
{
UIImage *cardFace = [UIImage imageNamed:[NSString stringWithFormat:
#"%#%#.png",[self rankAsStrings],self.suit]];
if (cardFace)
{
NSLog(#"%#%#.png",[self rankAsStrings],self.suit);
[cardFace drawInRect:imageRect];
} else {
NSLog(#"No Image Found: %#%#.png",[self rankAsStrings],self.suit);
}
} else {
[[UIImage imageNamed:#"Back.png"] drawInRect:imageRect];
}
}
Can someone shed some light on this?
P.S. The images are present and I do get the "NSLog(#"%#%#.png",[self rankAsStrings],self.suit);" message in the console.
TIA
I think your imageRect has 0.0 width and 0.0 height. Check the docs for CGRectInset method - it reduces original rect by 2*dx and 2*dy.
I would have done it like this :
myView.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: #"MyProfilePic.png"]];