代码之家  ›  专栏  ›  技术社区  ›  Syngmaster

带剪切段和阴影的UIView

  •  1
  • Syngmaster  · 技术社区  · 8 年前

    我的问题是:我试图从自定义UIView中剪切一段,并将阴影效果应用于该视图。

    在自定义UIView类中,我做了以下操作:

    创建了两个层-阴影和遮罩。添加了阴影层作为此自定义视图的子层。然后我创建了一个新视图,将其遮罩设置为遮罩层,并将其作为子视图添加到自定义视图中。

    self.backgroundColor = [UIColor clearColor];
    CGFloat radius = 40;
    float startAngle = -M_PI;
    float endAngle = 0;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];
    
    [path moveToPoint:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMaxY(self.bounds)+radius/1.8)];
    [path addArcWithCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMaxY(self.bounds)+radius/1.8) radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    
    CAShapeLayer *shadowLayer = [[CAShapeLayer alloc] init];
    shadowLayer.frame = self.bounds;
    shadowLayer.path = path.CGPath;
    shadowLayer.shadowColor = [UIColor grayColor].CGColor;
    shadowLayer.shadowOpacity = 0.5;
    shadowLayer.shadowRadius = 2;
    shadowLayer.masksToBounds = NO;
    shadowLayer.shadowOffset = CGSizeMake(2.0, 2.0);
    shadowLayer.fillRule = kCAFillRuleEvenOdd;
    
    
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.bounds;
    maskLayer.masksToBounds = NO;
    maskLayer.path = path.CGPath;
    maskLayer.fillRule = kCAFillRuleEvenOdd;
    maskLayer.fillColor = [UIColor whiteColor].CGColor;
    
    [self.layer addSublayer:shadowLayer];
    
    UIView *view = [[UIView alloc] initWithFrame:self.bounds];
    view.backgroundColor = [UIColor whiteColor];
    view.layer.mask = maskLayer;
    [self addSubview:view];
    

    这就是我想要实现的-

    enter image description here

    这就是我真正得到的

    enter image description here

    如果我将clipToBounds设置为YES,它将切断所需的阴影效果。

    如果我想切一个半圆,绝对没有问题。因为在这种情况下,半圆路径完全位于视图边界内。

    enter image description here

    但我确实需要达到第一张图中显示的结果。 我曾想过一行一行地构建路径,但当涉及到这条弧时,问题就出现了,结果可能不会那么准确。

    有人知道怎么做吗? 非常感谢。

    1 回复  |  直到 8 年前
        1
  •  1
  •   Josh Homann    8 年前

    编辑: 如果问题是路径错误,请不要使用圆和猜测坐标在代码中合成路径。相反,您应该导出实际艺术品的坐标,并使用曲线的艺术品坐标。看起来您有一个草图文件,所以最简单的方法是复制并粘贴到 paint code 这将为您提供曲线的代码,但如果您没有绘制代码(您应该知道,这类东西太神奇了),您可以从草图中将曲线导出为SVG。如果在文本编辑器中打开生成的SVG,您将在可读的XML中看到它,您可以从那里从贝塞尔曲线中提取控制点。

    推荐文章