【问题标题】:Swift draw shadow to a uibezier pathSwift 将阴影绘制到 uibezierpath
【发布时间】:2015-05-21 11:39:50
【问题描述】:


我有一个奇怪的问题。尽管我确实阅读了很多关于如何做到这一点的教程,但最终结果只显示了贝塞尔线,没有任何阴影。我的代码很简单:

let borderLine = UIBezierPath()
borderLine.moveToPoint(CGPoint(x:0, y: y! - 1))
borderLine.addLineToPoint(CGPoint(x: x!, y: y! - 1))
borderLine.lineWidth = 2
UIColor.blackColor().setStroke()
borderLine.stroke()
        
let shadowLayer = CAShapeLayer()
shadowLayer.shadowOpacity = 1
shadowLayer.shadowOffset = CGSize(width: 0,height: 1)
shadowLayer.shadowColor = UIColor.redColor().CGColor
shadowLayer.shadowRadius = 1
shadowLayer.masksToBounds = false
shadowLayer.shadowPath = borderLine.CGPath

self.layer.addSublayer(shadowLayer)

我做错了什么,因为我似乎没有看到任何问题,但我当然错了,因为没有出现阴影。函数是drawRect,基本的UIVIew里面没有多余的东西,x和y是框架的宽度和高度。
非常感谢!

【问题讨论】:

  • 您是否设置了 [self setClipsToBounds:NO] 和 [self.layer setMaskToBounds:NO]?
  • 我有 shadowLayer.maskToBounds = false,而不是剪辑到边界。应该是 self 还是 shadowLayer?编辑:设置 self.clipsToBounds,没有任何反应

标签: swift shadow uibezierpath cashapelayer


【解决方案1】:

我直接从我的 PaintCode 应用程序中获取这个示例。希望这会有所帮助。

//// General Declarations
let context = UIGraphicsGetCurrentContext()


//// Shadow Declarations
let shadow = UIColor.blackColor()
let shadowOffset = CGSizeMake(3.1, 3.1)
let shadowBlurRadius: CGFloat = 5

//// Bezier 2 Drawing
var bezier2Path = UIBezierPath()
bezier2Path.moveToPoint(CGPointMake(30.5, 90.5))
bezier2Path.addLineToPoint(CGPointMake(115.5, 90.5))
CGContextSaveGState(context)
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius,  (shadow as UIColor).CGColor)
UIColor.blackColor().setStroke()
bezier2Path.lineWidth = 1
bezier2Path.stroke()
CGContextRestoreGState(context)

【讨论】:

  • 我自己有paintcode,在复制代码时会出现奇怪的错误,这就是为什么我试图自己学习但我似乎没有得到它...感谢您的努力
  • 我认为删除 - 会让你很高兴(我没有添加)。您的回答对我帮助很大,即使它是从应用程序中复制的。干杯!
  • 只能用线描画阴影吗?
【解决方案2】:

我更喜欢添加阴影子层的方式。您可以轻松使用以下功能(Swift 3.0):

func createShadowLayer() -> CALayer {
    let shadowLayer = CALayer()
    shadowLayer.shadowColor = UIColor.red.cgColor
    shadowLayer.shadowOffset = CGSize.zero
    shadowLayer.shadowRadius = 5.0
    shadowLayer.shadowOpacity = 0.8
    shadowLayer.backgroundColor = UIColor.clear.cgColor
    return shadowLayer
}

最后,您只需将其添加到您的线路路径 (CAShapeLayer):

let line = CAShapeLayer()
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 50, y: 100))
path.addLine(to: CGPoint(x: 100, y: 50))
line.path = path.cgPath
line.strokeColor = UIColor.blue.cgColor
line.fillColor = UIColor.clear.cgColor
line.lineWidth = 2.0
view.layer.addSublayer(line)

let shadowSubLayer = createShadowLayer()
shadowSubLayer.insertSublayer(line, at: 0)
view.layer.addSublayer(shadowSubLayer)

【讨论】:

    【解决方案3】:

    我正在使用形状图层的阴影属性为其添加阴影。这种方法最好的部分是我不必明确提供路径。阴影跟随图层的路径。我还通过更改路径为图层设置动画。在这种情况下,阴影也可以无缝动画,无需一行代码。

    这就是我正在做的事情(Swift 4.2)

        shapeLayer.path = curveShapePath(postion: initialPosition)
        shapeLayer.strokeColor = UIColor.clear.cgColor
        shapeLayer.fillColor = shapeBackgroundColor
        self.layer.addSublayer(shapeLayer)
    
        if shadow {
            shapeLayer.shadowRadius = 5.0
            shapeLayer.shadowColor = UIColor.gray.cgColor
            shapeLayer.shadowOpacity = 0.8
        }
    

    curveShapePath方法是返回路径的方法,定义如下:

    func curveShapePath(postion: CGFloat) -> CGPath {
        let height: CGFloat = 37.0
        let path = UIBezierPath()
    
        path.move(to: CGPoint(x: 0, y: 0)) // start top left
        path.addLine(to: CGPoint(x: (postion - height * 2), y: 0)) // the beginning of the trough
    
        // first curve down
        path.addCurve(to: CGPoint(x: postion, y: height),
                      controlPoint1: CGPoint(x: (postion - 30), y: 0), controlPoint2: CGPoint(x: postion - 35, y: height))
        // second curve up
        path.addCurve(to: CGPoint(x: (postion + height * 2), y: 0),
                      controlPoint1: CGPoint(x: postion + 35, y: height), controlPoint2: CGPoint(x: (postion + 30), y: 0))
    
        // complete the rect
        path.addLine(to: CGPoint(x: self.frame.width, y: 0))
        path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
        path.addLine(to: CGPoint(x: 0, y: self.frame.height))
        path.close()
    
        return path.cgPath
    }
    

    【讨论】:

    • curveShapePath 方法是什么?
    • @cool_jb curveShapePath 方法返回带波浪线的路径。它占据该位置并在该位置的中心绘制波浪。我将编辑答案以包含此方法。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-11-16
    • 1970-01-01
    • 2012-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多