1

就我而言，我需要这样的东西（绿色形状是动画的）： 在此处输入图像描述

图片是用 PaintCode 创建的。为了实现这一点，我使用了 3 个对象：1）带有灰色文本颜色的标签，混合是“差异”2）带有绿色圆角的自定义形状 3）标签 - 与 1 相同，但具有不同的混合和颜色参数 - 白色，混合是“叠加”

PaintCode 生成的代码：

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

//// Color Declarations
let color2 = UIColor(red: 0.388, green: 0.714, blue: 0.557, alpha: 1.000)
let color3 = UIColor(red: 0.733, green: 0.733, blue: 0.733, alpha: 1.000)

//// Text Drawing
context.saveGState()
context.setBlendMode(.difference)

let textRect = CGRect(x: 49, y: 30, width: 108, height: 21)
let textTextContent = "Hello, World!"
let textStyle = NSMutableParagraphStyle()
textStyle.alignment = .left
let textFontAttributes = [
    .font: UIFont.systemFont(ofSize: UIFont.labelFontSize),
    .foregroundColor: color3,
    .paragraphStyle: textStyle,
] as [NSAttributedString.Key: Any]

let textTextHeight: CGFloat = textTextContent.boundingRect(with: CGSize(width: textRect.width, height: CGFloat.infinity), options: .usesLineFragmentOrigin, attributes: textFontAttributes, context: nil).height
context.saveGState()
context.clip(to: textRect)
textTextContent.draw(in: CGRect(x: textRect.minX, y: textRect.minY + (textRect.height - textTextHeight) / 2, width: textRect.width, height: textTextHeight), withAttributes: textFontAttributes)
context.restoreGState()

context.restoreGState()


//// Rectangle Drawing
let rectanglePath = UIBezierPath(roundedRect: CGRect(x: 64, y: 30, width: 57, height: 47), byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 20, height: 20))
rectanglePath.close()
color2.setFill()
rectanglePath.fill()


//// Text 3 Drawing
context.saveGState()
context.setBlendMode(.overlay)

let text3Rect = CGRect(x: 49, y: 30, width: 108, height: 21)
let text3TextContent = "Hello, World!"
let text3Style = NSMutableParagraphStyle()
text3Style.alignment = .left
let text3FontAttributes = [
    .font: UIFont.systemFont(ofSize: UIFont.labelFontSize),
    .foregroundColor: UIColor.white,
    .paragraphStyle: text3Style,
] as [NSAttributedString.Key: Any]

let text3TextHeight: CGFloat = text3TextContent.boundingRect(with: CGSize(width: text3Rect.width, height: CGFloat.infinity), options: .usesLineFragmentOrigin, attributes: text3FontAttributes, context: nil).height
context.saveGState()
context.clip(to: text3Rect)
text3TextContent.draw(in: CGRect(x: text3Rect.minX, y: text3Rect.minY + (text3Rect.height - text3TextHeight) / 2, width: text3Rect.width, height: text3TextHeight), withAttributes: text3FontAttributes)
context.restoreGState()

context.restoreGState()

问题是我不知道如何混合以用我需要的确切颜色填充交叉点。结果标签的颜色与我需要实现的颜色相差太大（灰色太暗，“白色”颜色是〜（240、255、255）而不是（255、255、255））。

如何解决这个问题？解决方案可能不依赖于我指定的代码。

4

1 回答 1

3

您不能仅使用混合模式来做到这一点。您将需要使用 CIFilter。或者只使用两个标签，一个绿色，一个白色，并用反面掩码对它们进行掩码。

于 2020-08-07T10:49:35.440 回答