| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295 |
- import Cocoa
- enum QuickStartIconKind {
- case photos
- case files
- case importFile
- }
- final class QuickStartIconView: NSView {
- private let kind: QuickStartIconKind
- init(kind: QuickStartIconKind) {
- self.kind = kind
- super.init(frame: .zero)
- translatesAutoresizingMaskIntoConstraints = false
- }
- @available(*, unavailable)
- required init?(coder: NSCoder) { nil }
- override var isFlipped: Bool { true }
- override var isOpaque: Bool { false }
- override func draw(_ dirtyRect: NSRect) {
- super.draw(dirtyRect)
- guard let context = NSGraphicsContext.current?.cgContext else { return }
- switch kind {
- case .photos:
- drawPhotosIcon(in: context)
- case .files:
- drawFilesIcon(in: context)
- case .importFile:
- drawImportIcon(in: context)
- }
- }
- // MARK: - Photos
- private func drawPhotosIcon(in context: CGContext) {
- let s = min(bounds.width, bounds.height)
- let ox = (bounds.width - s) / 2
- let oy = (bounds.height - s) / 2
- drawSoftShadow(in: context, rect: CGRect(x: ox + s * 0.30, y: oy + s * 0.52, width: s * 0.50, height: s * 0.08), radius: s * 0.04)
- context.saveGState()
- context.translateBy(x: ox + s * 0.62, y: oy + s * 0.30)
- context.rotate(by: .pi / 7.5)
- context.translateBy(x: -(s * 0.24), y: -(s * 0.28))
- let backRect = CGRect(x: 0, y: 0, width: s * 0.48, height: s * 0.56)
- let backPath = roundedRect(backRect, radius: s * 0.085)
- context.setFillColor(NSColor.white.withAlphaComponent(0.92).cgColor)
- context.addPath(backPath)
- context.fillPath()
- context.setStrokeColor(NSColor.white.cgColor)
- context.setLineWidth(s * 0.014)
- context.addPath(backPath)
- context.strokePath()
- drawMountainScene(
- in: context,
- rect: CGRect(x: backRect.minX + s * 0.05, y: backRect.minY + s * 0.07, width: backRect.width - s * 0.10, height: backRect.height - s * 0.12),
- sunColor: NSColor(red: 0.62, green: 0.86, blue: 0.95, alpha: 1),
- mountainColor: NSColor(red: 0.38, green: 0.80, blue: 0.90, alpha: 1)
- )
- context.restoreGState()
- let frontRect = CGRect(x: ox + s * 0.20, y: oy + s * 0.22, width: s * 0.50, height: s * 0.58)
- let frontPath = roundedRect(frontRect, radius: s * 0.085)
- let blueTop = NSColor(red: 0.34, green: 0.62, blue: 1.0, alpha: 1)
- let blueBottom = NSColor(red: 0.16, green: 0.40, blue: 0.94, alpha: 1)
- fillGradient(in: context, path: frontPath, colors: [blueTop.cgColor, blueBottom.cgColor], start: CGPoint(x: frontRect.midX, y: frontRect.minY), end: CGPoint(x: frontRect.midX, y: frontRect.maxY))
- drawMountainScene(
- in: context,
- rect: CGRect(x: frontRect.minX + s * 0.05, y: frontRect.minY + s * 0.07, width: frontRect.width - s * 0.10, height: frontRect.height - s * 0.12),
- sunColor: .white,
- mountainColor: .white
- )
- context.setStrokeColor(NSColor.white.withAlphaComponent(0.4).cgColor)
- context.setLineWidth(s * 0.01)
- context.addPath(frontPath)
- context.strokePath()
- }
- private func drawMountainScene(in context: CGContext, rect: CGRect, sunColor: NSColor, mountainColor: NSColor) {
- let sunRadius = rect.width * 0.09
- context.setFillColor(sunColor.cgColor)
- context.fillEllipse(in: CGRect(x: rect.minX + rect.width * 0.10, y: rect.minY + rect.height * 0.08, width: sunRadius * 2, height: sunRadius * 2))
- let baseY = rect.maxY - rect.height * 0.10
- context.setFillColor(mountainColor.cgColor)
- let leftPeak = mountainPath(
- baseY: baseY,
- peakX: rect.minX + rect.width * 0.22,
- peakY: rect.minY + rect.height * 0.48,
- leftX: rect.minX,
- rightX: rect.minX + rect.width * 0.48
- )
- context.addPath(leftPeak)
- context.fillPath()
- let rightPeak = mountainPath(
- baseY: baseY,
- peakX: rect.minX + rect.width * 0.72,
- peakY: rect.minY + rect.height * 0.62,
- leftX: rect.minX + rect.width * 0.34,
- rightX: rect.maxX
- )
- context.addPath(rightPeak)
- context.fillPath()
- }
- // MARK: - Files
- private func drawFilesIcon(in context: CGContext) {
- let s = min(bounds.width, bounds.height)
- let ox = (bounds.width - s) / 2
- let oy = (bounds.height - s) / 2
- let folderRect = CGRect(x: ox + s * 0.10, y: oy + s * 0.28, width: s * 0.78, height: s * 0.52)
- drawSoftShadow(in: context, rect: CGRect(x: folderRect.minX, y: folderRect.maxY - s * 0.04, width: folderRect.width, height: s * 0.06), radius: s * 0.03)
- let backGreen = NSColor(red: 0.42, green: 0.80, blue: 0.36, alpha: 1)
- let frontGreen = NSColor(red: 0.62, green: 0.92, blue: 0.44, alpha: 1)
- let tabRect = CGRect(x: folderRect.minX + s * 0.02, y: folderRect.minY - s * 0.08, width: s * 0.30, height: s * 0.10)
- context.setFillColor(backGreen.cgColor)
- context.addPath(roundedRect(tabRect, radius: s * 0.025, topLeft: s * 0.025, topRight: s * 0.025, bottomLeft: 0, bottomRight: 0))
- context.fillPath()
- let backBody = CGRect(x: folderRect.minX, y: folderRect.minY, width: folderRect.width, height: folderRect.height)
- fillGradient(in: context, path: roundedRect(backBody, radius: s * 0.055), colors: [backGreen.cgColor, NSColor(red: 0.24, green: 0.66, blue: 0.28, alpha: 1).cgColor], start: CGPoint(x: backBody.midX, y: backBody.minY), end: CGPoint(x: backBody.midX, y: backBody.maxY))
- let docBack = CGRect(x: folderRect.minX + s * 0.14, y: folderRect.minY - s * 0.18, width: s * 0.32, height: s * 0.40)
- context.setFillColor(NSColor.white.withAlphaComponent(0.85).cgColor)
- context.addPath(roundedRect(docBack, radius: s * 0.02))
- context.fillPath()
- let docFront = CGRect(x: folderRect.minX + s * 0.22, y: folderRect.minY - s * 0.28, width: s * 0.40, height: s * 0.50)
- context.setFillColor(NSColor.white.cgColor)
- context.addPath(roundedRect(docFront, radius: s * 0.03))
- context.fillPath()
- let header = CGRect(x: docFront.minX, y: docFront.minY, width: docFront.width, height: s * 0.12)
- context.setFillColor(NSColor(red: 0.20, green: 0.48, blue: 0.96, alpha: 1).cgColor)
- context.addPath(roundedRect(header, radius: s * 0.03, topLeft: s * 0.03, topRight: s * 0.03, bottomLeft: 0, bottomRight: 0))
- context.fillPath()
- let lineColor = NSColor(red: 0.66, green: 0.74, blue: 0.98, alpha: 1)
- for (index, widthFactor) in [0.78, 0.62, 0.70].enumerated() {
- let lineY = docFront.minY + s * 0.18 + CGFloat(index) * s * 0.075
- let lineRect = CGRect(x: docFront.minX + s * 0.06, y: lineY, width: docFront.width * widthFactor - s * 0.08, height: s * 0.038)
- context.setFillColor(lineColor.cgColor)
- context.addPath(roundedRect(lineRect, radius: s * 0.014))
- context.fillPath()
- }
- let frontFlap = CGRect(x: folderRect.minX, y: folderRect.minY + folderRect.height * 0.38, width: folderRect.width, height: folderRect.height * 0.62)
- fillGradient(in: context, path: roundedRect(frontFlap, radius: s * 0.055, topLeft: 0, topRight: 0, bottomLeft: s * 0.055, bottomRight: s * 0.055), colors: [frontGreen.cgColor, NSColor(red: 0.38, green: 0.76, blue: 0.32, alpha: 1).cgColor], start: CGPoint(x: frontFlap.midX, y: frontFlap.minY), end: CGPoint(x: frontFlap.midX, y: frontFlap.maxY))
- }
- // MARK: - Import
- private func drawImportIcon(in context: CGContext) {
- let s = min(bounds.width, bounds.height)
- let ox = (bounds.width - s) / 2
- let oy = (bounds.height - s) / 2
- let folderRect = CGRect(x: ox + s * 0.08, y: oy + s * 0.30, width: s * 0.74, height: s * 0.46)
- drawSoftShadow(in: context, rect: CGRect(x: folderRect.minX, y: folderRect.maxY - s * 0.03, width: folderRect.width, height: s * 0.05), radius: s * 0.025)
- let orangeTop = NSColor(red: 1.0, green: 0.84, blue: 0.40, alpha: 1)
- let orangeBottom = NSColor(red: 0.95, green: 0.60, blue: 0.16, alpha: 1)
- let tabRect = CGRect(x: folderRect.minX + s * 0.02, y: folderRect.minY - s * 0.07, width: s * 0.28, height: s * 0.09)
- context.setFillColor(orangeBottom.cgColor)
- context.addPath(roundedRect(tabRect, radius: s * 0.022, topLeft: s * 0.022, topRight: s * 0.022, bottomLeft: 0, bottomRight: 0))
- context.fillPath()
- fillGradient(in: context, path: roundedRect(folderRect, radius: s * 0.048), colors: [orangeTop.cgColor, orangeBottom.cgColor], start: CGPoint(x: folderRect.midX, y: folderRect.minY), end: CGPoint(x: folderRect.midX, y: folderRect.maxY))
- let paper = CGRect(x: folderRect.minX + s * 0.12, y: folderRect.minY + s * 0.08, width: folderRect.width * 0.76, height: folderRect.height * 0.38)
- context.setFillColor(NSColor.white.withAlphaComponent(0.9).cgColor)
- context.addPath(roundedRect(paper, radius: s * 0.018))
- context.fillPath()
- let frontFlap = CGRect(x: folderRect.minX, y: folderRect.minY + folderRect.height * 0.42, width: folderRect.width, height: folderRect.height * 0.58)
- fillGradient(in: context, path: roundedRect(frontFlap, radius: s * 0.048, topLeft: 0, topRight: 0, bottomLeft: s * 0.048, bottomRight: s * 0.048), colors: [NSColor(red: 1.0, green: 0.90, blue: 0.50, alpha: 1).cgColor, orangeBottom.cgColor], start: CGPoint(x: frontFlap.midX, y: frontFlap.minY), end: CGPoint(x: frontFlap.midX, y: frontFlap.maxY))
- let badgeRadius = s * 0.17
- let badgeCenter = CGPoint(x: folderRect.midX, y: folderRect.maxY - s * 0.02)
- drawSoftShadow(in: context, rect: CGRect(x: badgeCenter.x - badgeRadius, y: badgeCenter.y - badgeRadius * 0.4, width: badgeRadius * 2, height: badgeRadius * 0.5), radius: s * 0.03)
- let badgeRect = CGRect(x: badgeCenter.x - badgeRadius, y: badgeCenter.y - badgeRadius, width: badgeRadius * 2, height: badgeRadius * 2)
- let badgeColors = [NSColor(red: 0.66, green: 0.78, blue: 1.0, alpha: 1).cgColor, NSColor(red: 0.40, green: 0.56, blue: 0.96, alpha: 1).cgColor]
- fillGradient(in: context, path: CGPath(ellipseIn: badgeRect, transform: nil), colors: badgeColors, start: CGPoint(x: badgeRect.midX, y: badgeRect.minY), end: CGPoint(x: badgeRect.midX, y: badgeRect.maxY))
- drawCloudUpload(in: context, center: badgeCenter, size: badgeRadius * 1.15)
- }
- private func drawCloudUpload(in context: CGContext, center: CGPoint, size: CGFloat) {
- let cloudColor = NSColor.white
- let arrowColor = NSColor(red: 0.28, green: 0.42, blue: 0.86, alpha: 1)
- let w = size
- let h = size * 0.62
- let cloudRect = CGRect(x: center.x - w / 2, y: center.y - h / 2 + size * 0.04, width: w, height: h)
- let cloud = cloudPath(in: cloudRect)
- context.setFillColor(cloudColor.cgColor)
- context.addPath(cloud)
- context.fillPath()
- let arrowWidth = size * 0.14
- let arrowHeight = size * 0.28
- let arrowTop = center.y + size * 0.02
- let arrow = CGMutablePath()
- arrow.move(to: CGPoint(x: center.x, y: arrowTop + arrowHeight))
- arrow.addLine(to: CGPoint(x: center.x - arrowWidth, y: arrowTop + arrowHeight * 0.45))
- arrow.addLine(to: CGPoint(x: center.x - arrowWidth * 0.45, y: arrowTop + arrowHeight * 0.45))
- arrow.addLine(to: CGPoint(x: center.x - arrowWidth * 0.45, y: arrowTop))
- arrow.addLine(to: CGPoint(x: center.x + arrowWidth * 0.45, y: arrowTop))
- arrow.addLine(to: CGPoint(x: center.x + arrowWidth * 0.45, y: arrowTop + arrowHeight * 0.45))
- arrow.addLine(to: CGPoint(x: center.x + arrowWidth, y: arrowTop + arrowHeight * 0.45))
- arrow.closeSubpath()
- context.setFillColor(arrowColor.cgColor)
- context.addPath(arrow)
- context.fillPath()
- }
- // MARK: - Helpers
- private func drawSoftShadow(in context: CGContext, rect: CGRect, radius: CGFloat) {
- context.saveGState()
- context.setFillColor(NSColor.black.withAlphaComponent(0.12).cgColor)
- context.addPath(roundedRect(rect.offsetBy(dx: 0, dy: -radius * 0.3), radius: radius))
- context.fillPath()
- context.restoreGState()
- }
- private func fillGradient(in context: CGContext, path: CGPath, colors: [CGColor], start: CGPoint, end: CGPoint) {
- context.saveGState()
- context.addPath(path)
- context.clip()
- guard let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors as CFArray, locations: [0, 1]) else {
- context.restoreGState()
- return
- }
- context.drawLinearGradient(gradient, start: start, end: end, options: [])
- context.restoreGState()
- }
- private func roundedRect(_ rect: CGRect, radius: CGFloat) -> CGPath {
- roundedRect(rect, radius: radius, topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius)
- }
- private func roundedRect(_ rect: CGRect, radius: CGFloat, topLeft: CGFloat, topRight: CGFloat, bottomLeft: CGFloat, bottomRight: CGFloat) -> CGPath {
- let path = CGMutablePath()
- path.move(to: CGPoint(x: rect.minX + topLeft, y: rect.maxY))
- path.addLine(to: CGPoint(x: rect.maxX - topRight, y: rect.maxY))
- path.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.maxY - topRight), control: CGPoint(x: rect.maxX, y: rect.maxY))
- path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY + bottomRight))
- path.addQuadCurve(to: CGPoint(x: rect.maxX - bottomRight, y: rect.minY), control: CGPoint(x: rect.maxX, y: rect.minY))
- path.addLine(to: CGPoint(x: rect.minX + bottomLeft, y: rect.minY))
- path.addQuadCurve(to: CGPoint(x: rect.minX, y: rect.minY + bottomLeft), control: CGPoint(x: rect.minX, y: rect.minY))
- path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY - topLeft))
- path.addQuadCurve(to: CGPoint(x: rect.minX + topLeft, y: rect.maxY), control: CGPoint(x: rect.minX, y: rect.maxY))
- path.closeSubpath()
- return path
- }
- private func mountainPath(baseY: CGFloat, peakX: CGFloat, peakY: CGFloat, leftX: CGFloat, rightX: CGFloat) -> CGPath {
- let path = CGMutablePath()
- path.move(to: CGPoint(x: leftX, y: baseY))
- path.addLine(to: CGPoint(x: peakX, y: peakY))
- path.addLine(to: CGPoint(x: rightX, y: baseY))
- path.closeSubpath()
- return path
- }
- private func cloudPath(in rect: CGRect) -> CGPath {
- let path = CGMutablePath()
- let r = rect.height * 0.38
- path.addEllipse(in: CGRect(x: rect.minX + rect.width * 0.08, y: rect.minY + rect.height * 0.18, width: r * 2, height: r * 2))
- path.addEllipse(in: CGRect(x: rect.minX + rect.width * 0.30, y: rect.minY + rect.height * 0.30, width: r * 2.1, height: r * 2.1))
- path.addEllipse(in: CGRect(x: rect.minX + rect.width * 0.52, y: rect.minY + rect.height * 0.16, width: r * 1.9, height: r * 1.9))
- path.addRect(CGRect(x: rect.minX + rect.width * 0.12, y: rect.minY + rect.height * 0.18, width: rect.width * 0.76, height: rect.height * 0.42))
- return path
- }
- }
|