使用 CoreGraphics 绘制自定义 UIView

Posted 2023-03-13

技术标签:

【中文标题】使用 CoreGraphics 绘制自定义 UIView【英文标题】：Issue drawing custom UIView with CoreGraphics 【发布时间】：2014-07-17 16:54:01 【问题描述】：

我正在尝试使用 CoreGraphics 进行自定义垂直开关。我在单独的视图中有切换背景和切换拇指绘图，但由于某种原因，我似乎无法将拇指视图的背景颜色设置为 clearcolor。任何帮助将不胜感激！

![import UIKit
import QuartzCore

class ThumbView:UIView 

    var thumbPath = UIBezierPath()
    init(frame: CGRect) 
        super.init(frame: frame)
       // self.opaque = false
      //  self.backgroundColor = UIColor.clearColor()
    

    init(coder aDecoder: NSCoder!) 
        super.init(coder: aDecoder)
        self.opaque = false
        self.backgroundColor = UIColor.clearColor()
    

    override func drawRect(rect: CGRect) 
        let contentFrame = rect
        let context = UIGraphicsGetCurrentContext()

        let bgPath = UIBezierPath(rect: self.frame)
        let bgColor = UIColor.clearColor()
        bgColor.setFill()
        bgPath.fill()

        self.backgroundColor = bgColor;

        let white = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
        let shadowOffset = CGSizeMake(0.1, 3.1)
        let shadowBlurRadius: CGFloat = 5
        let shadow = UIColor.darkGrayColor()

        CGContextSaveGState(context)
        //// thumb Drawing
        thumbPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, rect.size.height, rect.size.width))
        CGContextSaveGState(context)
        CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, shadow.CGColor)
        white.setFill()
        thumbPath.fill()
        CGContextRestoreGState(context)
    


class VerticalSwitch: UIView 

    var switchBackgroundPath = UIBezierPath()
    var thumbView = ThumbView()

    init(frame: CGRect) 
        super.init(frame: frame)
    

    init(coder aDecoder: NSCoder!) 
        super.init(coder: aDecoder)
        self.clipsToBounds = true
        thumbView = ThumbView()
        NSLog("%@", NSStringFromCGRect(self.frame))
        self.addSubview(thumbView)
    

    override func layoutSubviews() 
        thumbView.frame = CGRectMake(5, 5, self.frame.size.width - 10, self.frame.size.width - 10)
    

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect)
    
        let contentFrame = rect
        //// General Declarations
        let context = UIGraphicsGetCurrentContext()

        //// Color Declarations
        let gDGreen = UIColor(red: 0.157, green: 0.475, blue: 0.153, alpha: 1.000)

        //// Shadow Declarations
        let innerShadow = UIColor.darkGrayColor().colorWithAlphaComponent(0.9)
        let innerShadowOffset = CGSizeMake(0.1, -5.1)
        let innerShadowBlurRadius: CGFloat = 10

        //// switchBackground Drawing
        switchBackgroundPath.moveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.23095 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.11274 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.17184 * contentFrame.height))
        switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.76905 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.82816 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.88726 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + 1.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + 1.02255 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.76905 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.88726 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX, contentFrame.minY + 0.82816 * contentFrame.height))
        switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.23095 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX, contentFrame.minY + 0.17184 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.11274 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + -0.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + -0.02255 * contentFrame.height))
        switchBackgroundPath.closePath()
        gDGreen.setFill()
        switchBackgroundPath.fill()

        ////// switchBackground Inner Shadow
        CGContextSaveGState(context)
        CGContextClipToRect(context, switchBackgroundPath.bounds)
        CGContextSetShadow(context, CGSizeMake(0, 0), 0)
        CGContextSetAlpha(context, CGColorGetAlpha(innerShadow.CGColor))
        CGContextBeginTransparencyLayer(context, nil)
        let switchBackgroundOpaqueShadow = innerShadow.colorWithAlphaComponent(1)
        CGContextSetShadowWithColor(context, innerShadowOffset, innerShadowBlurRadius, switchBackgroundOpaqueShadow.CGColor)
        CGContextSetBlendMode(context, kCGBlendModeSourceOut)
        CGContextBeginTransparencyLayer(context, nil)

        switchBackgroundOpaqueShadow.setFill()
        switchBackgroundPath.fill()

        CGContextEndTransparencyLayer(context)
        CGContextRestoreGState(context)
    

    override func touchesBegan(touches: NSSet!, withEvent event: UIEvent!) 

    
]

【问题讨论】：

在获得当前上下文后尝试添加CGContextClearRect(context, rect)。 @Keenle 不起作用，仍然有同样的问题。在init方法中尝试设置self.layer.backgroundColor = UIColor.clearColor().CGColor @Keenle 不，同样的问题。我也尝试在 ThumbView 中将 self.opaque 设置为 false，但随后整个视图消失了。 【参考方案1】：

您应该使用带有 frame 参数的构造函数来创建 thumbView：

thumbView = ThumbView(frame: CGRectMake(0,0, 0, 0))

ThumbView init(frame: CGRect) 应该是：

init(frame: CGRect) 
    super.init(frame: frame)
    self.opaque = false
    self.backgroundColor = UIColor.clearColor()

或者，您可以在 ThumbView 中创建无参数构造，但必须调用 super.init(frame:CGRectMake(0,0, 0, 0)) 并设置不透明和背景属性。

更新：

你也忘了在ThumbView drawRect: 方法中调用CGContextRestoreGState。应在方法末尾添加。并且忘记在 VerticalSwitch drawRect: 方法中调用 CGContextEndTransparencyLayer。应该在另一个 CGContextEndTransparencyLayer 方法调用之后立即添加。

模拟器截图：

所有代码（有修复）：

import Foundation
import UIKit
import QuartzCore

class ThumbView:UIView 

    var thumbPath = UIBezierPath()
    init(frame: CGRect) 
        super.init(frame: frame)
         self.opaque = false
          self.backgroundColor = UIColor.clearColor()
    

    init(coder aDecoder: NSCoder!) 
        super.init(coder: aDecoder)
        self.opaque = false
        self.backgroundColor = UIColor.clearColor()
    

    override func drawRect(rect: CGRect) 
        let contentFrame = rect
        let context = UIGraphicsGetCurrentContext()

        let bgPath = UIBezierPath(rect: self.frame)
        let bgColor = UIColor.clearColor()
        bgColor.setFill()
        bgPath.fill()

        self.backgroundColor = bgColor;

        let white = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
        let shadowOffset = CGSizeMake(0.1, 3.1)
        let shadowBlurRadius: CGFloat = 5
        let shadow = UIColor.darkGrayColor()

        CGContextSaveGState(context)
        //// thumb Drawing
        thumbPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, rect.size.height, rect.size.width))
        CGContextSaveGState(context)
        CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, shadow.CGColor)
        white.setFill()
        thumbPath.fill()
        CGContextRestoreGState(context)
        CGContextRestoreGState(context)
    


class VerticalSwitch: UIView 

    var switchBackgroundPath = UIBezierPath()
    var thumbView = ThumbView()

    init(frame: CGRect) 
        super.init(frame: frame)
    

    init(coder aDecoder: NSCoder!) 
        super.init(coder: aDecoder)
        self.clipsToBounds = true
        thumbView = ThumbView(frame: CGRectMake(0,0, 0, 0))
        NSLog("%@", NSStringFromCGRect(self.frame))
        self.addSubview(thumbView)
    

    override func layoutSubviews() 
        thumbView.frame = CGRectMake(5, 5, self.frame.size.width - 10, self.frame.size.width - 10)
    

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect)
    
        let contentFrame = rect
        //// General Declarations
        let context = UIGraphicsGetCurrentContext()

        //// Color Declarations
        let gDGreen = UIColor(red: 0.157, green: 0.475, blue: 0.153, alpha: 1.000)

        //// Shadow Declarations
        let innerShadow = UIColor.darkGrayColor().colorWithAlphaComponent(0.9)
        let innerShadowOffset = CGSizeMake(0.1, -5.1)
        let innerShadowBlurRadius: CGFloat = 10

        //// switchBackground Drawing
        switchBackgroundPath.moveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.23095 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.11274 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.17184 * contentFrame.height))
        switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.76905 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 100, contentFrame.minY + 0.82816 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 95.12, contentFrame.minY + 0.88726 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.93236 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + 1.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + 1.02255 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.76905 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.88726 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX, contentFrame.minY + 0.82816 * contentFrame.height))
        switchBackgroundPath.addLineToPoint(CGPointMake(contentFrame.minX, contentFrame.minY + 0.23095 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 14.64, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX, contentFrame.minY + 0.17184 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 4.88, contentFrame.minY + 0.11274 * contentFrame.height))
        switchBackgroundPath.addCurveToPoint(CGPointMake(contentFrame.minX + 85.36, contentFrame.minY + 0.06764 * contentFrame.height), controlPoint1: CGPointMake(contentFrame.minX + 34.17, contentFrame.minY + -0.02255 * contentFrame.height), controlPoint2: CGPointMake(contentFrame.minX + 65.83, contentFrame.minY + -0.02255 * contentFrame.height))
        switchBackgroundPath.closePath()
        gDGreen.setFill()
        switchBackgroundPath.fill()

        ////// switchBackground Inner Shadow
        CGContextSaveGState(context)
        CGContextClipToRect(context, switchBackgroundPath.bounds)
        CGContextSetShadow(context, CGSizeMake(0, 0), 0)
        CGContextSetAlpha(context, CGColorGetAlpha(innerShadow.CGColor))
        CGContextBeginTransparencyLayer(context, nil)
        let switchBackgroundOpaqueShadow = innerShadow.colorWithAlphaComponent(1)
        CGContextSetShadowWithColor(context, innerShadowOffset, innerShadowBlurRadius, switchBackgroundOpaqueShadow.CGColor)
        CGContextSetBlendMode(context, kCGBlendModeSourceOut)
        CGContextBeginTransparencyLayer(context, nil)

        switchBackgroundOpaqueShadow.setFill()
        switchBackgroundPath.fill()

        CGContextEndTransparencyLayer(context)
        CGContextEndTransparencyLayer(context)
        CGContextRestoreGState(context)
    

    override func touchesBegan(touches: NSSet!, withEvent event: UIEvent!)

【讨论】：

试过了，但是 ThumbView 仍然没有显示。这真的对你有用吗？如何初始化 VerticalSwitch？可以分享一下代码吗？只是使用故事板。所以 init(coder aDecoder: NSCoder!) 正在被调用。让我在代码中尝试一下。我使用 xCode 6 beta 3。该视图刚刚放入根视图，我在属性检查器中指定了您的类。尝试清理项目并重建。好吧尝试重置模拟器。

以上是关于使用 CoreGraphics 绘制自定义 UIView的主要内容，如果未能解决你的问题，请参考以下文章

iOS边练边学--(Quartz2D)基本图形的绘制#附加自定义进度控件的练习

使用 CoreGraphics 循环绘制会产生性能问题

绘制白色会产生透明色

使用CoreGraphics绘制圆形矩形

在 Swift 中使用 CoreGraphics 在屏幕上绘制像素

1-渐变阴影和文本