问题
I've a UIImageView with a image with is a car with a transparent background:
And I want to draw a border around the car:
How can I reach this effect?
At the moment, I've tested CoreGraphics in this way, but without good results:
// load the image
UIImage *img = carImage;
UIGraphicsBeginImageContext(img.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor redColor] setFill];
CGContextTranslateCTM(context, 0, img.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetBlendMode(context, kCGBlendModeNormal);
CGRect rect = CGRectMake(0, 0, img.size.width * 1.1, img.size.height*1.1);
CGContextDrawImage(context, rect, img.CGImage);
CGContextClipToMask(context, rect, img.CGImage);
CGContextAddRect(context, rect);
CGContextDrawPath(context,kCGPathFill);
// generate a new UIImage from the graphics context we drew onto
UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Any help? Thanks.
回答1:
Here's what I did:
I did it in Swift just to check it in playgrounds, think you can translate it to Objective-C easily:
import UIKit
func drawOutlie(#image:UIImage, color:UIColor) -> UIImage
{
var newImageKoef:CGFloat = 1.08
var outlinedImageRect = CGRect(x: 0.0, y: 0.0, width: image.size.width * newImageKoef, height: image.size.height * newImageKoef)
var imageRect = CGRect(x: image.size.width * (newImageKoef - 1) * 0.5, y: image.size.height * (newImageKoef - 1) * 0.5, width: image.size.width, height: image.size.height)
UIGraphicsBeginImageContextWithOptions(outlinedImageRect.size, false, newImageKoef)
image.drawInRect(outlinedImageRect)
var context = UIGraphicsGetCurrentContext()
CGContextSetBlendMode(context, kCGBlendModeSourceIn)
CGContextSetFillColorWithColor(context, color.CGColor)
CGContextFillRect(context, outlinedImageRect)
image.drawInRect(imageRect)
var newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
var imageIn = UIImage(named: "158jM")
var imageOut = drawOutlie(image: imageIn, UIColor.redColor())
So how does it work?
- We create clean context (aka canvas) with a bit bigger size then original image (for outline)
- We draw our image on whole canvas
- We fill that image with color
- We draw smaller image on top
You can change outline size changing this property : var newImageKoef:CGFloat = 1.08
Here's a result that I had in playgrounds
来源:https://stackoverflow.com/questions/25807455/draw-border-around-content-of-uiimageview