Comment dessiner en forme de coeur en UIView (iOS)?

Est venu à travers ce quand j'ai essayé de dessiner un UIBezier à base de cœur de moi-même, mais était à la recherche pour un qui avait l'air un peu plus comme sur Instagram postes.

J'ai fini par écrire ma propre extension/classe donc je pensais que je voudrais partager ici, dans les cas où il est de toute utilisation à toute autre personne qui tombe sur cela à l'avenir.

(C'est tout à Swift 3)

Tout d'abord, voici le UIBezier extension:

extension UIBezierPath {
    convenience init(heartIn rect: CGRect) {
        self.init()

        //Calculate Radius of Arcs using Pythagoras
        let sideOne = rect.width * 0.4
        let sideTwo = rect.height * 0.3
        let arcRadius = sqrt(sideOne*sideOne + sideTwo*sideTwo)/2

        //Left Hand Curve
        self.addArc(withCenter: CGPoint(x: rect.width * 0.3, y: rect.height * 0.35), radius: arcRadius, startAngle: 135.degreesToRadians, endAngle: 315.degreesToRadians, clockwise: true)

        //Top Centre Dip
        self.addLine(to: CGPoint(x: rect.width/2, y: rect.height * 0.2))

        //Right Hand Curve
        self.addArc(withCenter: CGPoint(x: rect.width * 0.7, y: rect.height * 0.35), radius: arcRadius, startAngle: 225.degreesToRadians, endAngle: 45.degreesToRadians, clockwise: true)

        //Right Bottom Line
        self.addLine(to: CGPoint(x: rect.width * 0.5, y: rect.height * 0.95))

        //Left Bottom Line
        self.close()
    }
}

Vous aurez également besoin d'ajouter quelque part dans votre projet afin que la degreesToRadians des travaux d'extension:

extension Int {
    var degreesToRadians: CGFloat { return CGFloat(self) * .pi / 180 }
}

L'aide, c'est aussi simple que l'initialisation d'un UIBezier de la même manière que vous le feriez pour un ovale:

let bezierPath = UIBezierPath(heartIn: self.bounds)

En plus de cela, j'ai fait une classe à l'aide d'afficher facilement le présent et le contrôle de certaines fonctions. Il va rendre pleinement de l'IB, avec des remplacements pour le remplir de la couleur (en utilisant la teinte de la couleur de la propriété), si oui ou non vous souhaitez un remplissage à tous, la course de la couleur et de la largeur du trait:

@IBDesignable classe HeartButton: UIButton {

@IBInspectable var filled: Bool = true
@IBInspectable var strokeWidth: CGFloat = 2.0

@IBInspectable var strokeColor: UIColor?

override func draw(_ rect: CGRect) {
    let bezierPath = UIBezierPath(heartIn: self.bounds)

    if self.strokeColor != nil {
        self.strokeColor!.setStroke()
    } else {
        self.tintColor.setStroke()
    }

    bezierPath.lineWidth = self.strokeWidth
    bezierPath.stroke()

    if self.filled {
        self.tintColor.setFill()
        bezierPath.fill()
    }
}

}

C'est un UIButton classe, mais il serait assez simple de modifier cela si vous ne voulez pas qu'il soit un bouton.

Voici à quoi il ressemble réellement:

Et avec juste la course:

OriginalL'auteur Carl Goldsmith

Donc, comme vous pouvez le voir, il y a 2 fonctions maths simples. Vous avez juste besoin de dessiner dans drawRect:
Ou, vous pouvez facilement utiliser CorePlot cadre. Exemple utile.

OriginalL'auteur Pavel Gatilov

À d'autres intrus, voici une extension pour UIBezierPath pour dessiner un cœur.

Extrait de ce composant
https://github.com/ipraba/EPShapes

 public extension UIBezierPath  {
func getHearts(originalRect: CGRect, scale: Double) -> UIBezierPath {
//Scaling will take bounds from the originalRect passed
let scaledWidth = (originalRect.size.width * CGFloat(scale))
let scaledXValue = ((originalRect.size.width) - scaledWidth) / 2
let scaledHeight = (originalRect.size.height * CGFloat(scale))
let scaledYValue = ((originalRect.size.height) - scaledHeight) / 2
let scaledRect = CGRect(x: scaledXValue, y: scaledYValue, width: scaledWidth, height: scaledHeight)
self.moveToPoint(CGPointMake(originalRect.size.width/2, scaledRect.origin.y + scaledRect.size.height))
self.addCurveToPoint(CGPointMake(scaledRect.origin.x, scaledRect.origin.y + (scaledRect.size.height/4)),
controlPoint1:CGPointMake(scaledRect.origin.x + (scaledRect.size.width/2), scaledRect.origin.y + (scaledRect.size.height*3/4)) ,
controlPoint2: CGPointMake(scaledRect.origin.x, scaledRect.origin.y + (scaledRect.size.height/2)) )
self.addArcWithCenter(CGPointMake( scaledRect.origin.x + (scaledRect.size.width/4),scaledRect.origin.y + (scaledRect.size.height/4)),
radius: (scaledRect.size.width/4),
startAngle: CGFloat(M_PI),
endAngle: 0,
clockwise: true)
self.addArcWithCenter(CGPointMake( scaledRect.origin.x + (scaledRect.size.width * 3/4),scaledRect.origin.y + (scaledRect.size.height/4)),
radius: (scaledRect.size.width/4),
startAngle: CGFloat(M_PI),
endAngle: 0,
clockwise: true)
self.addCurveToPoint(CGPointMake(originalRect.size.width/2, scaledRect.origin.y + scaledRect.size.height),
controlPoint1: CGPointMake(scaledRect.origin.x + scaledRect.size.width, scaledRect.origin.y + (scaledRect.size.height/2)),
controlPoint2: CGPointMake(scaledRect.origin.x + (scaledRect.size.width/2), scaledRect.origin.y + (scaledRect.size.height*3/4)) )
self.closePath()
return self
}
}

Attire le cœur avec une mise à l'échelle de 0,7(70% de l'original rect)

OriginalL'auteur iPrabu