Draw border around content of UIImageView

自作多情 提交于 2019-12-18 12:34:25

问题


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?

  1. We create clean context (aka canvas) with a bit bigger size then original image (for outline)
  2. We draw our image on whole canvas
  3. We fill that image with color
  4. 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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!