지정된 UIColor에 대해 더 밝고 어두운 색상 변화를 표시합니다.
스위프트에서 주어진 UIColor의 다양한 밝고 어두운 변형을 얻는 방법은 무엇입니까?
업데이트됨
UIColor 확장자 아래 사용:
extension UIColor {
func lighter(by percentage: CGFloat = 30.0) -> UIColor? {
return self.adjust(by: abs(percentage) )
}
func darker(by percentage: CGFloat = 30.0) -> UIColor? {
return self.adjust(by: -1 * abs(percentage) )
}
func adjust(by percentage: CGFloat = 30.0) -> UIColor? {
var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
return UIColor(red: min(red + percentage/100, 1.0),
green: min(green + percentage/100, 1.0),
blue: min(blue + percentage/100, 1.0),
alpha: alpha)
} else {
return nil
}
}
}
용도:
let color = UIColor(red:0.96, green:0.54, blue:0.10, alpha:1.0)
color.lighter(30) // returns lighter color by 30%
color.darker(30) // returns darker color by 30%
대신에.lighter()
그리고..darker()
사용할 수 있습니다..adjust()
밝기에 대한 양의 값과 어두워짐에 대한 음의 값으로
color.adjust(-30) // 30% darker color
color.adjust(30) // 30% lighter color
출력:
RGB 대신 밝기와 채도를 사용한 다른 버전을 제공하고 싶습니다.
extension UIColor {
/**
Create a lighter color
*/
func lighter(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: abs(percentage))
}
/**
Create a darker color
*/
func darker(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: -abs(percentage))
}
/**
Try to increase brightness or decrease saturation
*/
func adjustBrightness(by percentage: CGFloat = 30.0) -> UIColor {
var h: CGFloat = 0, s: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
if self.getHue(&h, saturation: &s, brightness: &b, alpha: &a) {
if b < 1.0 {
let newB: CGFloat = max(min(b + (percentage/100.0)*b, 1.0), 0.0)
return UIColor(hue: h, saturation: s, brightness: newB, alpha: a)
} else {
let newS: CGFloat = min(max(s - (percentage/100.0)*s, 0.0), 1.0)
return UIColor(hue: h, saturation: newS, brightness: b, alpha: a)
}
}
return self
}
}
✅ UIKit 및 AppKit: '일명' UIColor 및 NSColor
이 방법을 사용하면 모든 플랫폼에서 모든 색상을 혼합할 수 있습니다.이 경우black
더 어둡게 그리고white
보다 밝은 외관을 위해:
#if canImport(UIKit)
public typealias NativeColor = UIColor
#elseif canImport(AppKit)
public typealias NativeColor = NSColor
#endif
public extension NativeColor {
func mix(with target: NativeColor, amount: CGFloat) -> Self {
var r1: CGFloat = 0, g1: CGFloat = 0, b1: CGFloat = 0, a1: CGFloat = 0
var r2: CGFloat = 0, g2: CGFloat = 0, b2: CGFloat = 0, a2: CGFloat = 0
getRed(&r1, green: &g1, blue: &b1, alpha: &a1)
target.getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
return Self(
red: r1 * (1.0 - amount) + r2 * amount,
green: g1 * (1.0 - amount) + g2 * amount,
blue: b1 * (1.0 - amount) + b2 * amount,
alpha: a1
)
}
func lighter(by amount: CGFloat = 0.2) -> Self { mix(with: .white, amount: amount) }
func darker(by amount: CGFloat = 0.2) -> Self { mix(with: .black, amount: amount) }
}
SwiftUI: 색상 - iOS 14 / macOS 10.16
⚠️ 이전 연장이 필요합니다.
extension Color {
public func lighter(by amount: CGFloat = 0.2) -> Self { Self(NativeColor(self).lighter(by: amount)) }
public func darker(by amount: CGFloat = 0.2) -> Self { Self(NativeColor(self).darker(by: amount)) }
}
스위프트를 사용하기 때문에.현재 프로젝트에서 저는 Stephen의 최고의 답변을 UI로 수정했습니다.Xcode 12.0, Swift로 테스트됨UI 2 및 iOS 14.0
extension Color {
var components: (red: CGFloat, green: CGFloat, blue: CGFloat, opacity: CGFloat) {
#if canImport(UIKit)
typealias NativeColor = UIColor
#elseif canImport(AppKit)
typealias NativeColor = NSColor
#endif
var r: CGFloat = 0
var g: CGFloat = 0
var b: CGFloat = 0
var o: CGFloat = 0
guard NativeColor(self).getRed(&r, green: &g, blue: &b, alpha: &o) else {
return (0, 0, 0, 0)
}
return (r, g, b, o)
}
func lighter(by percentage: CGFloat = 30.0) -> Color {
return self.adjust(by: abs(percentage) )
}
func darker(by percentage: CGFloat = 30.0) -> Color {
return self.adjust(by: -1 * abs(percentage) )
}
func adjust(by percentage: CGFloat = 30.0) -> Color {
return Color(red: min(Double(self.components.red + percentage/100), 1.0),
green: min(Double(self.components.green + percentage/100), 1.0),
blue: min(Double(self.components.blue + percentage/100), 1.0),
opacity: Double(self.components.opacity))
}
}
타이핑하는 사람들을 구하기 위해, 간단한 실용적인 버전은 단지.
extension UIColor {
var darker: UIColor {
var h: CGFloat = 0, s: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
guard self.getHue(&h, saturation: &s, brightness: &b, alpha: &a) else {
print("** some problem demuxing the color")
return .gray
}
let nudged = b * 0.5
return UIColor(hue: h, saturation: s, brightness: nudged, alpha: a)
}
}
와 같이 사용함.
something.color = .yellow.darker
또는
backgroundColor = backgroundColor.darker
#대규모 프로젝트에서 ...................
당신은 분명히 애플의 패턴을 확장해야 합니다.
.withAlphaComponent(_ alpha: CGFloat)
그럼, 다음을 가지세요.
.withBrightnessComponent(_ brightness: CGFloat)
그리고 분명히
.withBrightnessComponentAdjustedBy(percentage: CGFloat)
및/또는
.withBrightnessComponentMultipliedBy(factor: CGFloat)
Swift 5.0의 경우:
extension UIColor {
func lighter(by percentage: CGFloat = 10.0) -> UIColor {
return self.adjust(by: abs(percentage))
}
func darker(by percentage: CGFloat = 10.0) -> UIColor {
return self.adjust(by: -abs(percentage))
}
func adjust(by percentage: CGFloat) -> UIColor {
var alpha, hue, saturation, brightness, red, green, blue, white : CGFloat
(alpha, hue, saturation, brightness, red, green, blue, white) = (0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0)
let multiplier = percentage / 100.0
if self.getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha) {
let newBrightness: CGFloat = max(min(brightness + multiplier*brightness, 1.0), 0.0)
return UIColor(hue: hue, saturation: saturation, brightness: newBrightness, alpha: alpha)
}
else if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
let newRed: CGFloat = min(max(red + multiplier*red, 0.0), 1.0)
let newGreen: CGFloat = min(max(green + multiplier*green, 0.0), 1.0)
let newBlue: CGFloat = min(max(blue + multiplier*blue, 0.0), 1.0)
return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
}
else if self.getWhite(&white, alpha: &alpha) {
let newWhite: CGFloat = (white + multiplier*white)
return UIColor(white: newWhite, alpha: alpha)
}
return self
}
}
Kenji-Tran의 답변은 시작 색상이 검은색(밝기 값 0)이 아닌 한 정상적으로 작동합니다.몇 줄의 추가 코드를 사용하여 검은색 "라이터"(즉, 회색조 또는 색상 값으로 밝게)를 만들 수도 있습니다.
참고: 저는 편집을 사용하여 이 변경 사항을 추가할 수 없었고 "새소년" 담당자 때문에 켄지-트랜의 답변에 대해 언급할 수 없습니다. 그래서 저는 그때 새로운 답변을 게시함으로써 SO에 대한 제 지식을 공유할 다른 방법을 찾지 못했습니다.난 그게 괜찮길 바랍니다.
extension UIColor {
/**
Create a ligher color
*/
func lighter(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: abs(percentage))
}
/**
Create a darker color
*/
func darker(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: -abs(percentage))
}
/**
Try to increase brightness or decrease saturation
*/
func adjustBrightness(by percentage: CGFloat = 30.0) -> UIColor {
var h: CGFloat = 0, s: CGFloat = 0, b: CGFloat = 0, a: CGFloat = 0
if self.getHue(&h, saturation: &s, brightness: &b, alpha: &a) {
if b < 1.0 {
/**
Below is the new part, which makes the code work with black as well as colors
*/
let newB: CGFloat
if b == 0.0 {
newB = max(min(b + percentage/100, 1.0), 0.0)
} else {
newB = max(min(b + (percentage/100.0)*b, 1.0), 0,0)
}
return UIColor(hue: h, saturation: s, brightness: newB, alpha: a)
} else {
let newS: CGFloat = min(max(s - (percentage/100.0)*s, 0.0), 1.0)
return UIColor(hue: h, saturation: newS, brightness: b, alpha: a)
}
}
return self
}
}
RGB 값이 수정된 버전
간단히 말씀드리죠.UIColor
이전 답변을 기반으로 하는 확장입니다.저한테 딱 맞습니다.
아래 데모:
색 조작 코드
public extension UIColor {
/**
Create a lighter color
*/
public func lighter(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: abs(percentage))
}
/**
Create a darker color
*/
public func darker(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: -abs(percentage))
}
/**
Changing R, G, B values
*/
func adjustBrightness(by percentage: CGFloat = 30.0) -> UIColor {
var red: CGFloat = 0.0
var green: CGFloat = 0.0
var blue: CGFloat = 0.0
var alpha: CGFloat = 0.0
if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
let pFactor = (100.0 + percentage) / 100.0
let newRed = (red*pFactor).clamped(to: 0.0 ... 1.0)
let newGreen = (green*pFactor).clamped(to: 0.0 ... 1.0)
let newBlue = (blue*pFactor).clamped(to: 0.0 ... 1.0)
return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
}
return self
}
}
Clamped function Extension은 최소값과 최대값 사이의 값을 쉽게 유지합니다.
extension Comparable {
func clamped(to range: ClosedRange<Self>) -> Self {
if self > range.upperBound {
return range.upperBound
} else if self < range.lowerBound {
return range.lowerBound
} else {
return self
}
}
}
RGBA, HSBA 및 WB(그레이스케일)를 지원하는 Swift 4 버전
여기 다음과 같은 회색 스케일 색상을 지원하는 TransQuan의 답변 변형이 있습니다..white
그리고..black
(참고:이렇게 간단한 기능에 속하지 않을 것 같아서 포화도 조절을 제거했습니다.)
extension UIColor {
/**
Create a ligher color
*/
func lighter(by percentage: CGFloat = 10.0) -> UIColor {
return self.adjustBrightness(by: abs(percentage))
}
/**
Create a darker color
*/
func darker(by percentage: CGFloat = 10.0) -> UIColor {
return self.adjustBrightness(by: -abs(percentage))
}
/**
Try to adjust brightness and falls back to adjusting colors if necessary
*/
func adjustBrightness(by percentage: CGFloat) -> UIColor {
var alpha, hue, saturation, brightness, red, green, blue, white : CGFloat
(alpha, hue, saturation, brightness, red, green, blue, white) = (0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0)
let multiplier = percentage / 100.0
if self.getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha) {
let newBrightness: CGFloat = max(min(brightness + multiplier*brightness, 1.0), 0.0)
return UIColor(hue: hue, saturation: saturation, brightness: newBrightness, alpha: alpha)
}
else if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
let newRed: CGFloat = min(max(red + multiplier*red, 0.0), 1.0)
let newGreen: CGFloat = min(max(green + multiplier*green, 0.0), 1.0)
let newBlue: CGFloat = min(max(blue + multiplier*blue, 0.0), 1.0)
return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
}
else if self.getWhite(&white, alpha: &alpha) {
let newWhite: CGFloat = (white + multiplier*white)
return UIColor(white: newWhite, alpha: alpha)
}
return self
}
}
위해서macOS
앱, 컬러 블렌딩을 위한 내장 기능이 있습니다.
색상을 더 가볍게 하려면 간단히 전화하세요.
NSColor.systemRed.blended(withFraction: 0.35, of: .white)
스위프트를 사용합니다.UI 및 빠른 해결책을 찾고 있었습니다.
이 방법을 사용하면 알파 채널(0은 투명, 1은 불투명)이 변경되어 흰색 보기 앞에 놓이게 되므로 실제로 흰색과 색상을 혼합하게 됩니다.=의 알파 값이 높을수록 흰색이 많이 혼합됩니다.
Color
UIColor
수정하고 다시 변환하면 작업이 수행됩니다.
Color(UIColor(Color.blue).withAlphaComponent(0.5))
.background(Color.white) // IMPORTANT: otherwise your view will be see-through
색 변경을 어둡게 하려면Color.white
Color.black
Lukszar clampled 함수를 사용하여 RGB 값의 실제 비율을 사용하여 UIColor 확장에 대해 이 함수를 작성했습니다.도움이 되길 바랍니다.
public extension UIColor {
public func lighter(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: abs(percentage))
}
public func darker(by percentage: CGFloat = 30.0) -> UIColor {
return self.adjustBrightness(by: -abs(percentage))
}
func adjustBrightness(by percentage: CGFloat = 30.0) -> UIColor {
let ratio = percentage/100
var red: CGFloat = 0.0
var green: CGFloat = 0.0
var blue: CGFloat = 0.0
var alpha: CGFloat = 0.0
if self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
let newRed = (red + ((ratio < 0) ? red * ratio : (1 - red) * ratio)).clamped(to: 0.0 ... 1.0)
let newGreen = (green + ((ratio < 0) ? green * ratio : (1 - green) * ratio)).clamped(to: 0.0 ... 1.0)
let newBlue = (blue + ((ratio < 0) ? blue * ratio : (1 - blue) * ratio)).clamped(to: 0.0 ... 1.0)
return UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: alpha)
}
return self
}
}
아래 코드 예제는 동적 테마를 가진 응용 프로그램에서 유용하게 지정된 색상의 더 밝고 어두운 색조를 얻는 방법을 보여줍니다.
더 진한 색상의 경우
+ (UIColor *)darkerColorForColor:(UIColor *)c
{
CGFloat r, g, b, a;
if ([c getRed:&r green:&g blue:&b alpha:&a])
return [UIColor colorWithRed:MAX(r - 0.2, 0.0)
green:MAX(g - 0.2, 0.0)
blue:MAX(b - 0.2, 0.0)
return nil;
}
밝은 색상의 경우
+ (UIColor *)lighterColorForColor:(UIColor *)c
{
CGFloat r, g, b, a;
if ([c getRed:&r green:&g blue:&b alpha:&a])
return [UIColor colorWithRed:MIN(r + 0.2, 1.0)
green:MIN(g + 0.2, 1.0)
blue:MIN(b + 0.2, 1.0)
alpha:a];
return nil;
}
언급URL : https://stackoverflow.com/questions/38435308/get-lighter-and-darker-color-variations-for-a-given-uicolor
'programing' 카테고리의 다른 글
$.ajax - dataType (0) | 2023.08.18 |
---|---|
Ajax 호출 채우기 Typeahead 부트스트랩 (0) | 2023.08.18 |
100% 너비 텍스트 상자가 컨테이너 밖으로 확장되는 것을 막을 수 있습니까? (0) | 2023.08.18 |
ASP.Net 유효성 검사 요약으로 인해 페이지가 맨 위로 이동합니다. (0) | 2023.08.18 |
빠른 클릭 시 Chrome에서 요소가 파란색으로 강조되는 것을 방지하기 위한 방법은 무엇입니까? (0) | 2023.08.18 |