在Swift中使用UIBezierPath创建三角形

时间:2015-12-22 12:32:03

标签: ios swift uibezierpath cashapelayer

我试图了解如何使用Swift创建三角形。我发现这个代码创建了一个三角形。

class TriangleLayer: CAShapeLayer {

  let innerPadding: CGFloat = 30.0  

  override init() {
    super.init()
    fillColor = Colors.red.CGColor
    strokeColor = Colors.red.CGColor
    lineWidth = 7.0
    lineCap = kCALineCapRound
    lineJoin = kCALineJoinRound
    path = trianglePathSmall.CGPath
  }

  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  var trianglePathSmall: UIBezierPath {
     let trianglePath = UIBezierPath()
     trianglePath.moveToPoint(CGPoint(x: 5.0 + innerPadding, y: 95.0))     // #1
     trianglePath.addLineToPoint(CGPoint(x: 50.0, y: 12.5 + innerPadding)) // #2
     trianglePath.addLineToPoint(CGPoint(x: 95.0 - innerPadding, y: 95.0)) // #3
     trianglePath.closePath()
     return trianglePath
 }

这段代码创建了这样的形状 enter image description here位于屏幕中间。

我尝试调整并玩弄它以了解它是如何工作的;然而,在这一点上,我意识到我迷失了很多逻辑。我将上面三角形的CGPoints放在我脑海中的x-y轴上,看起来像是:

 #1 x:35, y:95          #3 x:65, y:95
           #2 x:50, y: 42.5 

但如果我将点放在x-y轴上,则三角形会颠倒创建。

enter image description here

我想要达到的是轴所说的,我想实现......

         .   .                                .
                 <like this.   not this> 
           .                                .   .

3 个答案:

答案 0 :(得分:9)

你的脑斧头倒置了。坐标系从0,0开始,在X中向右延伸,在Y中向下延伸。

所以你的观点确实如此:

string sPlaintext;
cout << "\nInserisci testo : ";
getline(cin, sPlaintext);

uchar* szPlaintext = (uchar*) sPlaintext.c_str();  //dato da criptare 

获得您想要的三角形,您可以使用以下内容:

           #2 x:50, y: 42.5 
 #1 x:35, y:95          #3 x:65, y:95

答案 1 :(得分:1)

Result triangles

swift5中的代码

//TriangleView

extension UIView {

    func setRightTriangle(targetView:UIView?){
        let heightWidth = targetView!.frame.size.width //you can use triangleView.frame.size.height
        let path = CGMutablePath()

        path.move(to: CGPoint(x: heightWidth/2, y: 0))
        path.addLine(to: CGPoint(x:heightWidth, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth/2, y:heightWidth))
        path.addLine(to: CGPoint(x:heightWidth/2, y:0))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }

    func setLeftTriangle(targetView:UIView?){
        let heightWidth = targetView!.frame.size.width
        let path = CGMutablePath()

        path.move(to: CGPoint(x: heightWidth/2, y: 0))
        path.addLine(to: CGPoint(x:0, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth/2, y:heightWidth))
        path.addLine(to: CGPoint(x:heightWidth/2, y:0))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }

    func setUpTriangle(targetView:UIView?){
     let heightWidth = targetView!.frame.size.width
        let path = CGMutablePath()

        path.move(to: CGPoint(x: 0, y: heightWidth))
        path.addLine(to: CGPoint(x:heightWidth/2, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth, y:heightWidth))
        path.addLine(to: CGPoint(x:0, y:heightWidth))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }

    func setDownTriangle(targetView:UIView?){
        let heightWidth = targetView!.frame.size.width
        let path = CGMutablePath()

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x:heightWidth/2, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth, y:0))
        path.addLine(to: CGPoint(x:0, y:0))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        targetView!.layer.insertSublayer(shape, at: 0)
    }
}

答案 2 :(得分:-1)

快速4。*

使用自动版式的最简单方法:

  1. 打开情节提要,然后在UIView中拖动UIViewController,将其放置并根据需要设置大小(这就是三角形所在的位置)。将视图背景设置为透明。
  2. 创建一个新类,您可以根据需要命名(我命名为TriangleView)。这将是该类的内容:

class TriangleView: UIView {

//    predefined variables that can be changed
    var startPoint: CGPoint = CGPoint(x: 0.0, y: 0.5)
    var endPoint: CGPoint = CGPoint(x: 1.0, y: 0.5)
    var firstGradientColor: UIColor = UIColor.white
    var secondGradientColor: UIColor = UIColor.blue

    let gradient: CAGradientLayer = CAGradientLayer()

    override func draw(_ rect: CGRect) {
        let height = self.layer.frame.size.height
        let width = self.layer.frame.size.width

//        draw the triangle 
        let path = UIBezierPath()
        path.move(to: CGPoint(x: width / 2, y: 0))
        path.addLine(to: CGPoint(x: width, y: height))
        path.addLine(to: CGPoint(x: 0, y: height))
        path.close()

//        draw the triangle 'upside down'
//        let path = UIBezierPath()
//        path.move(to: CGPoint(x: 0, y: 0))
//        path.addLine(to: CGPoint(x: width, y: 0))
//        path.addLine(to: CGPoint(x: width / 2, y: height))
//        path.close()

//        add path to layer
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.lineWidth = 1.0

//        Add the gradient for the view background if needed
        gradient.colors = [firstGradientColor.cgColor, secondGradiendColor.cgColor]
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.frame = self.bounds
        gradient.mask = shapeLayer

        self.layer.addSublayer(gradient)
    }
}
  1. 转到您的Storyboard,选择UIView,然后在Identity Inspector中输入类名TriangleView

  2. 享受你的三角形! :)