仅从UIView的3个侧面绘制阴影

Question

我成功实现了在我周围画一个阴影UIView:

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

现在会发生什么是我有一个长方形的UIView,我想提请阴影周围三面,留下底部的IT方面没有影子.

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

显然,设置layer.shadowOffset不会对我有用.

提前致谢!

Answer 1

我知道你说设置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;

并且为了让您了解最新情况,这里是您刚刚绘制的实际阴影路径:)

可以在其他行之前或之后移动该额外中间点以选择将省略哪一侧.

Answer 2

其他答案有所改进,感谢Ashok R的快速代码.

由于我们在视图的背景中创建了一个三角形视图,并且所有边都有阴影,因此不需要在阴影上使用白色三角形.

如果视图宽度比高度大,则会中断.

解决方法是将不需要阴影的线的路径移向视图的一侧,而不是完全创建三角视图路径.

我为此创建了一个扩展 -

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
    }

并为您希望阴影出现的那一侧设置布尔值true

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)