只从UIView的三面画阴影

我已经成功实现了在我的UIView绘制阴影,如下所示:

 block1.layer.masksToBounds = NO; block1.layer.shadowOffset = CGSizeMake(0, 0); block1.layer.shadowRadius = 1; block1.layer.shadowOpacity = 0.7; 

现在发生的事情是我有一个矩形UIView ,我想在它的三面画阴影, 没有阴影留下它的底部

我知道我必须通过创build一个新的UIBezierPath来指定block1.layer.shadowPath ,但我不知道该怎么做。

显然,设置layer.shadowOffset不会为我做的伎俩。

提前致谢!

我知道你说设置layer.shadowOffset不会为你工作,但你可以把负值设置它layer.shadowOffset = CGSizeMake(0.0, -2.0)会接近你要找的效果,但当然,我希望你希望它甚至在三面。

所以在这里我们去layer.shadowPath

 UIView *block1 = [[UIView alloc] initWithFrame:CGRectMake(32.0, 32.0, 128.0, 128.0)]; [block1 setBackgroundColor:[UIColor orangeColor]]; [self.view addSubview:block1]; block1.layer.masksToBounds = NO; block1.layer.shadowOffset = CGSizeMake(0, 0); block1.layer.shadowRadius = 1; block1.layer.shadowOpacity = 0.7; UIBezierPath *path = [UIBezierPath bezierPath]; // Start at the Top Left Corner [path moveToPoint:CGPointMake(0.0, 0.0)]; // Move to the Top Right Corner [path addLineToPoint:CGPointMake(CGRectGetWidth(block1.frame), 0.0)]; // Move to the Bottom Right Corner [path addLineToPoint:CGPointMake(CGRectGetWidth(block1.frame), CGRectGetHeight(block1.frame))]; // This is the extra point in the middle :) Its the secret sauce. [path addLineToPoint:CGPointMake(CGRectGetWidth(block1.frame) / 2.0, CGRectGetHeight(block1.frame) / 2.0)]; // Move to the Bottom Left Corner [path addLineToPoint:CGPointMake(0.0, CGRectGetHeight(block1.frame))]; // Move to the Close the Path [path closePath]; block1.layer.shadowPath = path.CGPath; 

为了让你知道发生了什么,这里是你刚刚绘制的实际阴影path:)

在这里输入图像说明

可能只是在其他线路之前或之后移动这个额外的中间点,以select哪一侧将被省略。

更新Ryan Poolos回答Swift 3.0

感谢Ryan Poolos

 class sampleViewController: UIViewController { var block1: UIView! = nil override func viewDidLoad() { super.viewDidLoad() block1 = UIView(frame: CGRect(x: 32.0, y: 32.0, width: 128.0, height: 128.0)) block1.backgroundColor = UIColor.orange self.view.addSubview(block1) block1.layer.masksToBounds = false block1.layer.shadowOffset = CGSize(width: 0.0, height: 0.0) block1.layer.shadowRadius = 1.0 block1.layer.shadowOpacity = 0.7 let path = UIBezierPath() // Start at the Top Left Corner path.move(to: CGPoint(x: 0.0, y: 0.0)) // Move to the Top Right Corner path.addLine(to: CGPoint(x: block1.frame.size.width, y: 0.0)) // Move to the Bottom Right Corner path.addLine(to: CGPoint(x: block1.frame.size.width, y: block1.frame.size.height)) // This is the extra point in the middle :) Its the secret sauce. path.addLine(to: CGPoint(x: block1.frame.size.width/2.0, y: block1.frame.size.height/2.0)) // Move to the Bottom Left Corner path.addLine(to: CGPoint(x: 0.0, y: block1.frame.size.height)) path.close() block1.layer.shadowPath = path.cgPath } } 

结果:

在这里输入图像说明

对于其他答案有一些改进,这要归功于Ashok R的快速代码。

由于我们在四面都有阴影的背景中创build了一个三angular形的视图,并且不需要在边上有一个白色的三angular形。

在宽度比高度大的情况下打破。

在这里输入图像说明

解决方法是将不需要阴影的线的path转移到该视图的一侧, 而不是完全创build三angular形视图path

我为此创build了一个扩展 –

 extension UIView { func addshadow(top: Bool, left: Bool, bottom: Bool, right: Bool, shadowRadius: CGFloat = 2.0) { self.layer.masksToBounds = false self.layer.shadowOffset = CGSize(width: 0.0, height: 0.0) self.layer.shadowRadius = shadowRadius self.layer.shadowOpacity = 1.0 let path = UIBezierPath() var x: CGFloat = 0 var y: CGFloat = 0 var viewWidth = self.frame.width var viewHeight = self.frame.height // here x, y, viewWidth, and viewHeight can be changed in // order to play around with the shadow paths. if (!top) { y+=(shadowRadius+1) } if (!bottom) { viewHeight-=(shadowRadius+1) } if (!left) { x+=(shadowRadius+1) } if (!right) { viewWidth-=(shadowRadius+1) } // selecting top most point path.move(to: CGPoint(x: x, y: y)) // Move to the Bottom Left Corner, this will cover left edges /* |☐ */ path.addLine(to: CGPoint(x: x, y: viewHeight)) // Move to the Bottom Right Corner, this will cover bottom edge /* ☐ - */ path.addLine(to: CGPoint(x: viewWidth, y: viewHeight)) // Move to the Top Right Corner, this will cover right edge /* ☐| */ path.addLine(to: CGPoint(x: viewWidth, y: y)) // Move back to the initial point, this will cover the top edge /* _ ☐ */ path.close() self.layer.shadowPath = path.cgPath } 

并将布尔值设置为你希望阴影出现在哪一边

myView.addshadow(top: false, left: true, bottom: true, right: true, shadowRadius: 2.0)

//阴影半径在上面是可选的,在2.0中被设置为默认值

在这里输入图像说明

myView.addshadow(top: true, left: true, bottom: true, right: true, shadowRadius: 2.0) 在这里输入图像说明

myView.addshadow(top: false, left: false, bottom: true, right: true, shadowRadius: 2.0)

在这里输入图像说明