只从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)