Abrundung UIImage und Hinzufügen eines Rahmens

Question

, also möchte ich einige Bilder als Anmerkungen auf der Karte anzeigen. Um das zu tun, muss ich die Image-Eigenschaft des MKAnnotationView hinzufügen. Ich benutze die normalen Bilder, aber ich möchte, dass sie abgerundet und mit einer Umrandung versehen sind. Also habe ich einen Weg gefunden, UIImage zu runden und ich habe den Weg gefunden, UIImage einen Rahmen hinzuzufügen, aber der Rand scheint nicht hinzuzufügen (ich habe das Bild eigentlich nicht auf dem Bildschirm, vielleicht ist das das Problem?).

Ich habe diese Antwort https://stackoverflow.com/a/29047372/4665643 mit einer leichten Änderung für die Grenze verwendet. Nämlich:

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

Aber mein Bild auf der Karte hat keine Grenze. Irgendwelche Vorschläge ?

Answer 1

imageView.layer.masksToBounds=true 
imageView.layer.borderWidth=1.5 
imageView.layer.borderColor = UIColor.whiteColor().CGColor 
imageView.layer.cornerRadius=imageView.bounds.width/2 

Versuchen Sie es.

Answer 2

Nur repariert es. Anscheinend funktionierte alles perfekt, aber ich sah die Grenze nicht. Das Originalbild ist etwa 300x300 Pixel groß und mit 1,5 Pixel Rand habe ich es beschnitten, um 40x40 Frame zu passen, so dass die Grenze kaum wahrnehmbar war. Wenn Sie die Rahmenbreite auf eine größere Zahl ändern, wird sie sichtbar.

Answer 3

Ich habe masksToBounds, und es funktioniert.

layer.masksToBounds = true 

Answer 4

Mit dieser Erweiterung 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 
} 

Verbrauch:

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

Ergebnis:

Answer 5

einfach eine Zeile Code seiner Werke für m e

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

Answer 6

Für ein Bild mit Rand abgerundet machen, können Sie das tun, von User Defined Runtime auch Attribute, keine Notwendigkeit, Code dafür zu schreiben.

Überprüfen Sie bitte auf das Bild unten für die Einstellung, dass

auch in Ihrem Code ändern

imageView.layer.clipsToBounds = true 

dazu

imageView.layer.masksToBounds = true 

Answer 7

Wenn Sie hinzufügen möchten Um eine Grenze zu Ihrem Bild zu schaffen, müssen Sie sicherstellen, dass Sie etwas mehr Platz hinzufügen Ansonsten wird Ihr Rahmen oben auf Ihrem Bild platziert. Die Lösung besteht darin, der Breite und Höhe Ihres Bildes die doppelte Breite Ihres Strichs hinzuzufügen und den contentMode auf .Center zu ändern.

extension UIImage { 
    func roundedWithBorder(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: .zero, 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) 
     defer { UIGraphicsEndImageContext() } 
     guard let context = UIGraphicsGetCurrentContext() else { return nil } 
     imageView.layer.render(in: context) 
     return UIGraphicsGetImageFromCurrentImageContext() 
    } 
} 

Spielplatz Testing:

let profilePicture = UIImage(data: try! Data(contentsOf: URL(string:"http://i.stack.imgur.com/Xs4RX.jpg")!))! 

profilePicture.roundedWithBorder(width: 100, color: .red) 

Answer 8

Leo Dabus ‚s Lösung in 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 
    } 
}