如何在UIView(iOS)中绘制心形？

Question

我想创造不同的形状.下图是一个例子.你能告诉我如何塑造不同的形状吗？

Answer 1

当我试图自己绘制一个基于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类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类,但如果你不想让它成为一个按钮,那么改变它就会非常简单.

这是它的实际情况:

只有中风:

Answer 2

你可以试试PaintCode.

绘制它,PaintCode为您生成UIBezierPath.

http://www.paintcodeapp.com/

Answer 3

因此，如您所见，有 2 个简单的数学函数。您只需要在 drawRect: 中绘制它：或者，您可以轻松使用CorePlot framework。有用的例子。

Answer 4

您必须创建一个 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 等软件，它可以直观地绘制图像并生成代码，而不是您自己编写。