我目前正在制作一个欢迎页面，我遇到了这个有趣的设计:

我正在尝试在底部制作一个按钮，其中的文本会穿过它后面的半透明 View 。我尝试了以下代码，但它似乎不起作用:

let transparent = UIColor(red: 0, green: 0, blue: 0, alpha: 0)
let semiwhite = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.15)        
bottomView.backgroundColor = semiwhite
loginButton.backgroundColor = semiwhite
loginButton.setTitleColor(transparent, forState: .Normal)
loginButton.layer.cornerRadius = 10
loginButton.layer.masksToBounds = true
loginButton.layer.borderWidth = 2.5
loginButton.layer.borderColor = transparent.CGColor

有人知道怎么做吗？

最佳答案

我建议您不要使用“透明”文本。相反，您可能希望将其视为带有“ mask ”的白色 View ， mask 是文本的轮廓，允许显示下面的图像。这有点复杂，因为 mask 实际上与我们通常 mask 图像的方式相反(例如，“使用 Facebook 登录”文本不是 mask ，而是它周围的空白区域)。但是 Core Graphics 提供了非常容易做到这一点的方法。

因此，虽然在您最喜欢的图像编辑工具中创建此图形可能最简单，但如果您想以编程方式执行此操作，则可以在 Swift 3 或更高版本中执行类似以下操作:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let image1 = maskedImage(size: button1.bounds.size, text: "Sign in with Facebook")
    button1.setImage(image1, for: .normal)

    let image2 = maskedImage(size: button2.bounds.size, text: "Sign-up with Email")
    button2.setImage(image2, for: .normal)
}

func maskedImage(size: CGSize, text: String) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(size, true, 0)

    let context = UIGraphicsGetCurrentContext()
    context?.scaleBy(x: 1, y: -1)
    context?.translateBy(x: 0, y: -size.height)

    // draw rounded rectange inset of the button's entire dimensions

    UIColor.white.setStroke()
    let pathRect = CGRect(origin: .zero, size: size).insetBy(dx: 10, dy: 10)
    let path = UIBezierPath(roundedRect: pathRect, cornerRadius: 5)
    path.lineWidth = 4
    path.stroke()

    // draw the text

    let attributes: [NSAttributedStringKey: Any] = [
        .font: UIFont.preferredFont(forTextStyle: .caption1),
        .foregroundColor: UIColor.white
    ]
    let textSize = text.size(withAttributes: attributes)
    let point = CGPoint(x: (size.width - textSize.width) / 2, y: (size.height - textSize.height) / 2)
    text.draw(at: point, withAttributes: attributes)

    // capture the image and end context

    let maskImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // create image mask

    guard let cgimage = maskImage?.cgImage, let dataProvider = cgimage.dataProvider else { return nil }

    let bytesPerRow = cgimage.bytesPerRow
    let bitsPerPixel = cgimage.bitsPerPixel
    let width = cgimage.width
    let height = cgimage.height
    let bitsPerComponent = cgimage.bitsPerComponent

    guard let mask = CGImage(maskWidth: width, height: height, bitsPerComponent: bitsPerComponent, bitsPerPixel: bitsPerPixel, bytesPerRow: bytesPerRow, provider: dataProvider, decode: nil, shouldInterpolate: false) else { return nil }

    // create the actual image

    let rect = CGRect(origin: .zero, size: size)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    UIGraphicsGetCurrentContext()?.clip(to: rect, mask: mask)
    UIColor.white.withAlphaComponent(0.9).setFill()
    UIBezierPath(rect: rect).fill()
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // return image

    return image
}

这里要注意的技术是 CGImage(maskWidth:...) 的使用，它让我们创建一个图像蒙版，除了我们绘制的白色文本和边框之外的所有内容。然后当我们创建最终图像时，我们可以使用 clip(to:mask:) 将其剪辑到这个“图像蒙版”。

通常，当我们谈论 mask 图像时，我们是用 UIBezierRect 或其他图像 mask 它们(其中非零 alpha channel 显示应该 mask 的内容和不应该 mask 的内容)。但在这里我们使用 Core Graphics“图像 mask ”进行 mask ，这给了我们更多的控制权。有关使用图像掩码和使用图像进行掩码之间差异的讨论，请参阅 Quartz 2D 编程指南的 Masking Images 章节。

有关 Swift 2 版本，请参阅 previous revision of this answer。

关于ios - 如何设置按钮的样式以具有透明文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36808080/