在 UIImageView 的内容周围绘制边框 [英] Draw border around content of UIImageView

问题描述

我有一个带有图像的 UIImageView，它是一辆具有透明背景的汽车:

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?

目前，我已经以这种方式测试过CoreGraphics，但没有很好的结果:

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();

有什么帮助吗?谢谢.

推荐答案

这就是我所做的:

我在 Swift 中做的只是为了在 playgrounds 中检查它，认为您可以轻松地将其转换为 Objective-C:

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. 我们创建干净的上下文(也称为画布)，其尺寸比原始图像(用于轮廓)略大
2. 我们在整个画布上绘制图像
3. 我们用颜色填充该图像
4. 我们在顶部绘制较小的图像

您可以通过更改此属性来更改轮廓大小:var newImageKoef:CGFloat = 1.08

You can change outline size changing this property : var newImageKoef:CGFloat = 1.08

这是我在操场上得到的结果

Here's a result that I had in playgrounds

斯威夫特 5:

extension UIImage {
    
    func drawOutlie(imageKeof: CGFloat = 0.2, color: UIColor = .white)-> UIImage? {
        let outlinedImageRect = CGRect(x: 0.0, y: 0.0, width: size.width * imageKeof, height: size.height * imageKeof)
        let imageRect = CGRect(x: self.size.width * (imageKeof - 1) * 0.5, y: self.size.height * (imageKeof - 1) * 0.5, width: size.width, height: size.height)
        UIGraphicsBeginImageContextWithOptions(outlinedImageRect.size, false, imageKeof)
        draw(in: outlinedImageRect)
        let context = UIGraphicsGetCurrentContext()
        context!.setBlendMode(.sourceIn)
        context!.setFillColor(color.cgColor)
        context!.fill(outlinedImageRect)
        draw(in: imageRect)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    }
}

这篇关于在 UIImageView 的内容周围绘制边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！