如何在蒙面的 UIView 周围绘制阴影？

Posted 2023-03-13

【中文标题】如何在蒙面的 UIView 周围绘制阴影？

【英文标题】：How to draw shadow around the masked UIView?

【发布时间】：2017-05-09 17:32:00

【问题描述】：

我想制作一个UIView，其形状类似于图 1。并且在我的视图形状周围也应该有阴影。

我正在使用下面的代码来绘制CAShaperLayer 和UIBezierPath

 UIBezierPath *bezier = [UIBezierPath bezierPath];
  [bezier moveToPoint:CGPointMake(0,7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-15, 7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-10,0)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width-5, 7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width, 7)];
  [bezier addLineToPoint:CGPointMake(self.menuView.frame.size.width, self.menuView.frame.size.height)];
  [bezier addLineToPoint:CGPointMake(0, self.menuView.frame.size.height)];
  [bezier closePath];
   
   CAShapeLayer *maskLayer = [CAShapeLayer layer];
   maskLayer.path = [bezier CGPath];
   
  self.menuView.layer.mask = maskLayer;
    

以及用于添加阴影

self.menuView.layer.shadowColor = [[UIColor colorWithRed:8.0f/255.0f green:37.0f/255.0f blue:82.0f/225.0f alpha:1] CGColor];
    self.menuView.layer.shadowOffset = CGSizeZero;
    self.menuView.layer.shadowOpacity = 0.3f;
    self.menuView.layer.shadowRadius = 5.0f;
    self.menuView.layer.masksToBounds=NO;

我的问题：

在 menuView 上屏蔽CAShaperLayer 后，阴影消失了。 图2

我也尝试在其上添加 Sublayer，而不是 Masking View

[self.menuView.layer addSublayer:maskLayer]

但这会隐藏我所有的 SubViews 的 MenuView 图 3

（我将 CASahperLayer 颜色更改为黑色只是为了显示）

???? 我的问题是：

如 图 1 所示，获得完美阴影形状的最佳方法是什么？？

（提前致谢）

【问题讨论】：

透明视图完全被背景图像视图覆盖怎么样。该 imageView 中的图像可以具有（从边缘向内）透明边缘、阴影和带有三角形的白色主体。如果菜单有可变数量的项目，则可以使用大写插图调整图像的大小。

如果我必须采用ImageView，最好在顶部采用三角形形状图像，而不是在我的视图上放置阴影，这将起作用..我认为这是替代解决方案,,,但我正在寻找最好的方法来做到这一点,,,,,以编程方式@danh

你为什么要屏蔽/添加子层？你不应该这样做吗：self.layer.shadowPath = someBezierPath？

不添加/屏蔽视图，我会得到吗？我可能只会得到影子@Gocy015

@Dhiru ，所以您正在使用 CAShapeLayer 在顶部创建那个小三角形。为图层添加蒙版肯定会剪裁其阴影。解决方法可能是添加一个超级视图来保存整个视图，然后在超级视图上添加阴影，或者覆盖drawRect 来绘制那个三角形。

【参考方案1】：

extension UIView

    func viewShadowBorder()  
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOpacity = 1
        self.layer.shadowOffset = CGSize.zero
        self.layer.shadowRadius = 2
        self.layer.cornerRadius = 2
    
    

【讨论】：

@Dhiru 检查您的视图背景是否清晰，然后它将无法正常工作。所以

我尝试了所有的东西，我认为当我们用CAShaperLayer 屏蔽任何视图时，我们将无法再访问CALayer 的视图。