2

我正在尝试使用 Swift 将白色文本放在用户个人资料图片上，但这些图片可以是任何颜色。有谁知道如何在 Swift 中做到这一点？

Snapchat 在它的故事中这样做，它在左上角放置白色文本，并且文本在任何背景上都可见，而没有明显的背景效果或标签背景变暗。请注意，我指的不是普通的 snapchat 图片上的透明标签，而只是在 snapchat 故事上。

请参阅以下图像作为示例：

snapchat 故事示例 1

在此处输入图像描述

snapchat 故事示例 2

在此处输入图像描述

我没有成功地尝试通过创建具有低 alpha 的黑色背景的标签并使标签大小仅围绕标签文本的字符来做到这一点。

    let nameLabel = UILabel()
    nameLabel.text = "userName"
    nameLabel.textColor = UIColor.whiteColor()
    nameLabel.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.2)
    let adjustedNameSize = nameLabel.sizeThatFits(CGSize(width: 0.8*screenWidth, height: 0.1*screenHeight))
    var nameFrame = CGRectMake(0.05*screenWidth,0.05*screenHeight,0.8*screenWidth,0.1*screenHeight)
    nameFrame.size = adjustedNameSize
    nameLabel.frame = nameFrame
    nameLabel.layer.cornerRadius = 15
    nameLabel.clipsToBounds = true
4

3 回答 3

1

一个 Swift3 标签示例。

var myLabel: UILabel = {
    let label = UILabel()
    label.textColor = .white
    label.layer.shadowOpacity = 0.5
    label.layer.shadowRadius = 0.5
    label.layer.shadowColor = UIColor.gray.cgColor
    label.layer.shadowOffset = CGSize(0.0, -0.5)
    label.backgroundColor = .clear
    label.textAlignment = .center
    label.numberOfLines = 1
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()
于 2017-04-19T15:39:14.643 回答
1

您可以使用CIFilter并将其应用于图片。您可以使用多种过滤器。或者，您可以使用 CALayer 阴影属性。

这里有两个例子： 

@IBOutlet weak var img1: UIImageView!
@IBOutlet weak var img2: UIImageView!
@IBOutlet weak var nameLabel: UILabel!


override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    //Using filters 


    let beginImage = CIImage(image: img2.image!)
    let edgeDetectFilter = CIFilter(name: "CIVignetteEffect")!
    edgeDetectFilter.setValue(beginImage, forKey: kCIInputImageKey)
    edgeDetectFilter.setValue(0.3, forKey: "inputIntensity")
    edgeDetectFilter.setValue(0.2, forKey: "inputRadius")

    let newImage = UIImage(CIImage: edgeDetectFilter.outputImage!)

    img2.image = newImage

    //applying layer to the label 

    nameLabel.layer.shadowOpacity = 0.5
    nameLabel.layer.shadowRadius = 0.5
    nameLabel.layer.shadowColor = UIColor.blackColor().CGColor
    nameLabel.layer.shadowOffset = CGSizeMake(0.0, -0.5)

}

你可以在这里看到比较：

在此处输入图像描述

于 2016-08-19T00:15:25.337 回答
0

您可以通过为文本创建大纲来实现这一点。因此，如果背景颜色为白色，则文本仍然可见。只需从 UILabel 派生一个类并覆盖 drawRect 函数。如果您使用 Storyboard，只需将 UILabel 替换为此类。

class OutlinedLabel : UILabel
{
  override func drawRect(rect: CGRect)
  {
    let shadowOffset = self.shadowOffset
    let textColor = self.textColor

    let context = UIGraphicsGetCurrentContext()
    CGContextSetLineWidth(context, 1)
    CGContextSetLineJoin(context, CGLineJoin.Round)

    CGContextSetTextDrawingMode(context, CGTextDrawingMode.Stroke);
    self.textColor = UIColor.blackColor()
    super.drawTextInRect(rect)

    CGContextSetTextDrawingMode(context, CGTextDrawingMode.Fill)
    self.textColor = textColor
    self.shadowOffset = CGSizeMake(0, 0)
    super.drawTextInRect(rect)

    self.shadowOffset = shadowOffset
  }
}



let label = OutlinedLabel(frame: CGRectMake(100,100,200,200))
label.text = "Hello"

label.font = label.font.fontWithSize(80)
label.textColor = UIColor.whiteColor()
self.view.addSubview(label)
于 2016-08-19T00:43:02.347 回答