Как нарисовать форму сердца в UIView (iOS)?

Question

Я хочу создать разные формы. Ниже приведено изображение. Будете ли вы предлагать мне различные формы?

Answer 1

Вы должны создать UIBezierPath. Взгляните на документы: https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIBezierPath_class/index.html

и Безье разделе Apple, в руководстве рисования: https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/BezierPaths/BezierPaths.html

Вы могли бы начать рисовать одну дугу с

+bezierPathWithArcCenter: 

, а затем добавить еще одну дугу. Теперь нарисуйте линию на нижнем пике, используя

-addCurveToPoint:controlPoint1:controlPoint2: 

Используйте контрольные точки кривой линии, как в изображении. Документы UIBezierPath для метода имеют образец изображения, описывающий использование.

Наконец, добавьте еще одну строку обратно в начальную точку и закройте путь.

Связанные документы также показывают, как рисовать путь, например. в drawRect. Другим вариантом является использование CAShapeLayer для прямого отображения пути.

Другим решением было бы использовать программное обеспечение, такое как PaintCode, , которое позволяет визуально рисовать изображения и получать код, а не писать его самостоятельно.

Answer 2

Итак, как вы можете видеть, есть 2 простые математические функции. Вам просто нужно нарисовать его в drawRect: Или вы можете легко использовать CorePlot framework. Useful example.

Answer 3

Вы можете попробовать PaintCode.

Нарисуйте его и PaintCode создайте UIBezierPath для вас.

http://www.paintcodeapp.com/

Answer 4

К другим нарушителям, здесь это расширение для UIBezierPath, чтобы нарисовать сердце.

Выдержки из этого компонента 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 
    } 
} 

Рисует сердце с масштабированием 0,7 (70% от исходного прямоугольника)

Answer 5

наткнулся на это, когда я пытался нарисуйте сердце на основе UIBezier, но искал тот, который выглядел немного больше, чем тот, который был на страницах Instagram.

Я закончил тем, что написал свое собственное расширение/класс, поэтому решил, что я поделюсь с ним здесь, если это будет полезно для всех, кто наступит на это в будущем.

(Это все в Swift 3)

Во-первых, вот расширение UIBezier:

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

Вам также нужно добавить это где-то в проекте, так что расширение degreesToRadians работы:

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

Используя это так просто, как инициализацию с UIBezier таким же образом, вы бы овалом:

let bezierPath = UIBezierPath(heartIn: self.bounds) 

В дополнение к этому, я создал класс, который поможет легко отобразить это и контролировать определенные функции. Он будет полностью отображаться в IB с переопределением цвета заливки (с использованием свойства цвета оттенка), независимо от того, хотите ли вы полностью заливать, цвет хода и ширину штриха:

@IBDesignable class 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() 
    } 
} 

}

это класс UIButton, но это было бы довольно просто, чтобы изменить это, если вы не хотите, чтобы быть кнопка.

Вот что это на самом деле выглядит следующим образом:

И только с инсультом: