钻石般的 UIView [英] Diamond-like UIView

问题描述

我正在尝试创建一个带有菱形角的 UIView，如图所示:

I am trying to create a UIView with corners like a shape of a diamond, as shown in the picture:

我熟悉圆角:

myView.layer.cornerRadius = 10

但是，我想要一个不同的形状.我怎么能创造这种效果?感谢您的帮助！

However, I want a different shape. How could I create this effect? Thanks for your help!

推荐答案

解决此类问题的最佳方法是使用 CAShapeLayer.这是一种可行的方法:将它粘贴到操场上，看看它是如何从角落里剪下来的.

Best way to solve a problem like this is by using CAShapeLayer. Here's the kind of thing that would work: paste it into a playground and see how it clips off the corners.

import UIKit
import XCPlayground

extension UIView {
    func maskCorners(inset: CGFloat) {
        let path = UIBezierPath()
        path.moveToPoint(CGPoint(x: bounds.origin.x + inset,y: 0))
        path.addLineToPoint(CGPoint(x: CGRectGetMaxX(bounds) - inset,y: 0))
        path.addLineToPoint(CGPoint(x: CGRectGetMaxX(bounds), y: bounds.origin.y + inset))
        path.addLineToPoint(CGPoint(x: CGRectGetMaxX(bounds), y: CGRectGetMaxY(bounds) - inset))
        path.addLineToPoint(CGPoint(x: CGRectGetMaxX(bounds) - inset,y: CGRectGetMaxY(bounds)))
        path.addLineToPoint(CGPoint(x: bounds.origin.x + inset,y: CGRectGetMaxY(bounds)))
        path.addLineToPoint(CGPoint(x: 0,y: CGRectGetMaxY(bounds) - inset))
        path.addLineToPoint(CGPoint(x: 0,y: bounds.origin.y + inset))
        path.addLineToPoint(CGPoint(x: bounds.origin.x + inset,y: 0))

        let mask = CAShapeLayer()
        mask.frame = bounds
        mask.path = path.CGPath
        layer.mask = mask
    }
}

let diamond = UIView(frame: CGRect(x:0, y: 0, width: 100, height:100))
diamond.backgroundColor = UIColor.redColor()
XCPlaygroundPage.currentPage.liveView = diamond
diamond.maskCorners(25)

这篇关于钻石般的 UIView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！