AppKitでお絵描きしてみよう

Kyome
macOS native symposium #06

2019/12/21

RunCat TweetShot ScreenPointer Measures
🐈

AppKit
• macOS

• NSBezierPath
• NSGraphicsContext
•

ref. Apple Inc. "Coordinate system" (2018)
https://developer.apple.com/library/archive/documentation/General/Conceptual/Devpedia-CocoaApp/CoordinateSystem.html
iOS macOS

• Core Graphics
- CGPath (CGMutablePath)
- CGContext
• AppKit
- NSBezierPath
- NSGraphicsContext

• Core Graphics
- CGContext
• AppKit
- NSBezierPath
- NSGraphicsContext
😖

• Core Graphics
- CGContext
• AppKit
- NSBezierPath
- NSGraphicsContext
🤔

• NSGraphicsContext
 
 
😊

class CustomView: NSView {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
let path = NSBezierPath()
path.move(to: NSPoint(x: 10, y: 10))
path.line(to: NSPoint(x: 150, y: 120))
path.curve(to: NSPoint(x: 240, y: 10),
controlPoint1: NSPoint(x: 225, y: 180),
controlPoint2: NSPoint(x: 240, y: 165))
path.close()
path.stroke()
}
}

}
}

path.move(to: NSPoint(x: 10, y: 10))
→

path.line(to: NSPoint(x: 150, y: 120))
→

path.curve(to: NSPoint(x: 240, y: 10),
controlPoint1: NSPoint(x: 225, y: 180),
controlPoint2: NSPoint(x: 240, y: 165))
→

path.close()
path.stroke() //
path.fill() //
→

• 2 4

•
⚠
P0
P1
P2
P3P0
P1

//
path.appendRect(rect:)
//
path.appendOval(in:)
//
path.appendRoundedRect(rect:, xRadius:, yRadius:)
//
path.appendArc(from:, to:, radius:)
path.appendArc(withCenter:, radius:, startAngle:, endAngle:)

path.relativeMove(to: NSPoint.zero)
path.relativeLine(to: NSPoint.zero)
path.relativeCurve(to: NSPoint.zero,
controlPoint1: NSPoint.zero,
controlPoint2: NSPoint.zero)
※

let face = NSBezierPath(ovalIn: NSRect(x: 60, y: 40,
width: 80, height: 80))
let earL = NSBezierPath(ovalIn: NSRect(x: 50, y: 105,
let earR = NSBezierPath(ovalIn: NSRect(x: 110, y: 105,
//
face.append(earL)
face.append(earR)
face.fill()

//
path.lineWidth = 3
//
path.lineCapStyle = .round
//
path.lineJoinStyle = .bevel
//
path.miterLimit = 5
//
path.setLineDash([8.0, 12.0], count: 2, phase: 0)

extension NSBezierPath {
func printPathElement() {
var points = [CGPoint](repeating: CGPoint.zero, count: 3)
for i in (0 ..< self.elementCount) {
switch self.element(at: i, associatedPoints: &points) {
case .moveTo:
print("move:", points[0])
case .lineTo:
print("line to:", points[0])
case .curveTo:
print("curve to:", points[2])
print("controlPoint1:", points[0])
print("controlPoint2:", points[1])
case.closePath:
print("close")
@unknown default:
fatalError()
}
}
}
}

path.appendRect(NSRect(x: 10, y: 10, width: 190, height: 150))
path.appendOval(in: NSRect(x: 40, y: 30, width: 70, height: 60))
NSColor.red.setFill()
path.fill()

let ellipse = NSBezierPath()
ellipse.appendOval(in: NSRect(x: 50, y: 50, width: 80, height: 70))
//
path.append(ellipse.reversed)
path.fill()
OK

//
path.windingRule = .evenOdd
path.fill()

path.appendRoundedRect(NSRect(x: 0, y: 0, width: 100, height: 100),
xRadius: 15, yRadius: 15)
path.transform(using: AffineTransform(translationByX: -50, byY: -50))
path.transform(using: AffineTransform(scaleByX: 1.2, byY: 1.4))
path.transform(using: AffineTransform(rotationByRadians: CGFloat.pi / 3))
path.transform(using: AffineTransform(translationByX: 120, byY: 120))
path.fill()
→

NSColor.black.set()
path.windingRule = NSBezierPath.WindingRule.evenOdd
path.appendRect(self.frame)
let apple = NSBezierPath()
// Apple
apple.move(to: NSPoint(x: 110.89, y: 99.2))
apple.curve(to: NSPoint(x: 105.97, y: 108.09), controlPoint1: NSPoint(x: 109.5, y: 102.41), controlPoint2: NSPoint(x: 107.87, y: 105.37))
apple.curve(to: NSPoint(x: 106.17, y: 90.76), controlPoint1: NSPoint(x: 99.89, y: 82), controlPoint2: NSPoint(x: 102.01, y: 86.88))
// Leaf
apple.curve(to: NSPoint(x: 74, y: 47.52), controlPoint1: NSPoint(x: 74.03, y: 48.71), controlPoint2: NSPoint(x: 74, y: 48.13))
apple.curve(to: NSPoint(x: 79.3, y: 34.51), controlPoint1: NSPoint(x: 74, y: 43.1), controlPoint2: NSPoint(x: 75.91, y: 38.38))
apple.line(to: NSPoint(x: 93.25, y: 29.36))
apple.close()
apple.transform(using: AffineTransform(scaleByX: 1, byY: -1))
apple.transform(using: AffineTransform(translationByX: -75, byY: 77))
apple.transform(using: AffineTransform(scale: 2.0))
apple.transform(using: AffineTransform(translationByX: frame.midX, byY: frame.midY))
path.append(apple)
path.fill()
}
}

NSColor.black.set()
path.windingRule = NSBezierPath.WindingRule.evenOdd
path.appendRect(self.frame)
let apple = NSBezierPath()
// Apple
apple.curve(to: NSPoint(x: 106.17, y: 90.76), controlPoint1: NSPoint(x: 99.89, y: 82), controlPoint2: NSPoint(x: 102.01, y: 86.88))
// Leaf
apple.curve(to: NSPoint(x: 74, y: 47.52), controlPoint1: NSPoint(x: 74.03, y: 48.71), controlPoint2: NSPoint(x: 74, y: 48.13))
apple.curve(to: NSPoint(x: 79.3, y: 34.51), controlPoint1: NSPoint(x: 74, y: 43.1), controlPoint2: NSPoint(x: 75.91, y: 38.38))
apple.line(to: NSPoint(x: 93.25, y: 29.36))
apple.close()
apple.transform(using: AffineTransform(scaleByX: 1, byY: -1))
apple.transform(using: AffineTransform(translationByX: -75, byY: 77))
apple.transform(using: AffineTransform(scale: 2.0))
apple.transform(using: AffineTransform(translationByX: frame.midX, byY: frame.midY))
path.append(apple)
path.fill()
}
} 

ref. Apple Inc. "Graphics Contexts" (2012)
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CocoaDrawingGuide/GraphicsContexts/GraphicsContexts.html

source outclear exclusionsource in
multiplyhue color burnluminosity
NSCompositingOperation

guard let context = NSGraphicsContext.current else { return }
context.saveGraphicsState()
//
let pathA = NSBezierPath()
//
//
context.compositingOperation = NSCompositingOperation.clear
//
let pathB = NSBezierPath()
//
context.restoreGraphicsState()
}
}

let pattern = NSImage(imageLiteralResourceName: "pattern")
NSColor(patternImage: pattern).setFill()
path.fill()

let start = NSColor(red: 0.549, green: 0.757, blue: 0.847, alpha: 1.0)
let endA = NSColor.clear
let endB = start.withAlphaComponent(0.0)
let gradientA = NSGradient(starting: start, ending: endA)
gradientA?.draw(in: NSRect(x: 5, y: 5, width: 150, height: 150), angle: 90)
let gradientB = NSGradient(starting: start, ending: endB)
gradientB?.draw(in: NSRect(x: 160, y: 5, width: 150, height: 150), angle: 90)

AppKitでお絵描きしてみよう

AppKitでお絵描きしてみよう

Recommended

Recommended

More Related Content

Similar to AppKitでお絵描きしてみよう

Similar to AppKitでお絵描きしてみよう (20)

Recently uploaded

Recently uploaded (20)

AppKitでお絵描きしてみよう