Question

所以我想在地图上显示一些图片作为注释。为此，我需要添加MKAnnotationView的image属性。我正在使用常规图像，但我希望它们是圆形的并带有边框。所以我找到了一种圆形UIImage的方法，我找到了为UIImage添加边框的方法，但边框似乎没有添加（我实际上并没有在屏幕上显示图像，也许这就是问题？）。

我使用了这个答案https://stackoverflow.com/a/29047372/4665643，略微修改了边框。即：

imageView.layer.borderWidth = 1.5
imageView.layer.borderColor = UIColor.whiteColor().CGColor
imageView.clipsToBounds = true

但我在地图上的图像没有任何边框。有什么建议吗？

Answer 1

imageView.layer.masksToBounds = true
imageView.layer.borderWidth = 1.5
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.cornerRadius = imageView.bounds.width / 2

试试这个。

Answer 2

如果您想为图片添加边框，则需要确保为其添加一些额外的空间，否则您的边框将放置在图像的顶部。解决方案是将笔划宽度的两倍添加到图像的宽度和高度。

extension UIImage {
    var isPortrait:  Bool    { return size.height > size.width }
    var isLandscape: Bool    { return size.width > size.height }
    var breadth:     CGFloat { return min(size.width, size.height) }
    var breadthSize: CGSize  { return CGSize(width: breadth, height: breadth) }
    var breadthRect: CGRect  { return CGRect(origin: .zero, size: breadthSize) }
    func rounded(with color: UIColor, width: CGFloat) -> UIImage? {
        let bleed = breadthRect.insetBy(dx: -width, dy: -width)
        UIGraphicsBeginImageContextWithOptions(bleed.size, false, scale)
        defer { UIGraphicsEndImageContext() }
        guard let cgImage = cgImage?.cropping(to: CGRect(origin: CGPoint(
            x: isLandscape ? ((size.width-size.height)/2).rounded(.down) : 0,
            y: isPortrait  ? ((size.height-size.width)/2).rounded(.down) : 0),
            size: breadthSize))
        else { return nil }
        UIBezierPath(ovalIn: CGRect(origin: .zero, size: bleed.size)).addClip()
        var strokeRect =  breadthRect.insetBy(dx: -width/2, dy: -width/2)
        strokeRect.origin = CGPoint(x: width/2, y: width/2)
        UIImage(cgImage: cgImage, scale: 1, orientation: imageOrientation).draw(in: strokeRect.insetBy(dx: width/2, dy: width/2))
        color.set()
        let line = UIBezierPath(ovalIn: strokeRect)
        line.lineWidth = width
        line.stroke()
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

游乐场测试：

let profilePicture = UIImage(data: try! Data(contentsOf: URL(string:"http://i.stack.imgur.com/Xs4RX.jpg")!))!
let pp = profilePicture.rounded(with: .red, width: 10)

Answer 3

为了使用边框对图像进行舍入，您也可以从用户定义的运行时属性执行此操作，无需为此编写代码。

请检查下面的图像以进行设置

同样在您的代码中，更改

imageView.layer.clipsToBounds = true

到此，

imageView.layer.masksToBounds = true

Answer 4

将此扩展名用于UIImageView：

func cropAsCircleWithBorder(borderColor : UIColor, strokeWidth: CGFloat)
{
    var radius = min(self.bounds.width, self.bounds.height)
    var drawingRect : CGRect = self.bounds
    drawingRect.size.width = radius
    drawingRect.origin.x = (self.bounds.size.width - radius) / 2
    drawingRect.size.height = radius
    drawingRect.origin.y = (self.bounds.size.height - radius) / 2

    radius /= 2

    var path = UIBezierPath(roundedRect: CGRectInset(drawingRect, strokeWidth/2, strokeWidth/2), cornerRadius: radius)
    let border = CAShapeLayer()
    border.fillColor = UIColor.clearColor().CGColor
    border.path = path.CGPath
    border.strokeColor = borderColor.CGColor
    border.lineWidth = strokeWidth
    self.layer.addSublayer(border)

    path = UIBezierPath(roundedRect: drawingRect, cornerRadius: radius)
    let mask = CAShapeLayer()
    mask.path = path.CGPath
    self.layer.mask = mask
}

用法：

        self.circleView.cropAsCircleWithBorder(UIColor.redColor(), strokeWidth: 20)

结果：

Answer 5

Leo Dabus 在Swift 3中的解决方案：

extension UIImage {
    func roundedImageWithBorder(width: CGFloat, color: UIColor) -> UIImage? {
        let square = CGSize(width: min(size.width, size.height) + width * 2, height: min(size.width, size.height) + width * 2)
        let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
        imageView.contentMode = .center
        imageView.image = self
        imageView.layer.cornerRadius = square.width/2
        imageView.layer.masksToBounds = true
        imageView.layer.borderWidth = width
        imageView.layer.borderColor = color.cgColor
        UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, scale)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        imageView.layer.render(in: context)
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result
    }
}

Answer 6

我设置了maskToBounds，它可以工作。

layer.masksToBounds = true

Answer 7

简单的一行代码对我有用

self.profileImage.layer.cornerRadius = self.profileImage.frame.size.width / 2

Answer 8

您可以创建一个IBDesignable类并将其设置为您的Image。然后通过实时更改在Storyboard中更改属性

@IBDesignable class CircularImageView: UIImageView {

@IBInspectable var borderWidth : CGFloat {
    get { layer.borderWidth }
    set {
        layer.masksToBounds = true
        layer.borderWidth = newValue
        layer.cornerRadius = frame.size.width / 2
    }
}

@IBInspectable var borderColor: UIColor? {
    set {
        guard let uiColor = newValue else { return }
        layer.borderColor = uiColor.cgColor
    }
    get {
        guard let color = layer.borderColor else { return nil }
        return UIColor(cgColor: color)
    }
}

}

Answer 9

修好它。显然一切都很完美，但我没有看到边界。原始图像大约为300x300像素，并且具有1.5像素边框，我将其裁剪为适合40x40帧，因此边框几乎不可察觉。将边框宽度更改为更大的数字使其可见。

舍入UIImage并添加边框

9 个答案: