Slide 1
Slide 1 text
UI/NSScrollView
Tips & Tricks
Kaz Yoshikawa
Slide 2
Slide 2 text
Do you use
UI/NS ScrollView?
Slide 3
Slide 3 text
Are they zoomable?
Slide 4
Slide 4 text
Have you had any
issues about zooming?
Slide 5
Slide 5 text
Case 1
Zooming Vector Contents
Slide 6
Slide 6 text
Zoomable Contents
Slide 7
Slide 7 text
Blurring when zoom!?
Slide 8
Slide 8 text
Set contentMode
to redraw…
Slide 9
Slide 9 text
Nope… Still Blurry
• contentMode to redraw won't help
Slide 10
Slide 10 text
update
contentScaleFactor …
Slide 11
Slide 11 text
contentScaleFactor
• OK – Device size like small contents
• NG – Magazine / Newspaper like large contents
• eg. 2048x1536 12MB — (4x zoom) — 8192 x 6144 48MB
⚠
Slide 12
Slide 12 text
Tips
Dummy Content View
Slide 13
Slide 13 text
Dummy Content View
UIView
PDFPageView
UIScrollView
Dummy
ContentView
Transparent
Slide 14
Slide 14 text
PDF view draws based on
dummy view coordinate
Zoom
→
dummy view
pdf view
Slide 15
Slide 15 text
Convert rect from
content dummy view
override func draw(_ layer: CALayer, in ctx: CGContext) {
UIGraphicsPushContext(ctx)
ctx.saveGState()
let box = page.getBoxRect(.cropBox)
let rect = self.contentView.convert(self.contentView.bounds, to: self)
ctx.translateBy(x: rect.minX, y: rect.minY)
ctx.translateBy(x: 0, y: rect.height)
ctx.scaleBy(x: 1, y: -1)
ctx.scaleBy(x: rect.width / box.width, y: rect.height / box.height)
ctx.drawPDFPage(page)
ctx.restoreGState()
UIGraphicsPopContext()
}
→
Slide 16
Slide 16 text
UIScrollView delegate
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return contentView
}
func scrollViewDidZoom(_ scrollView: UIScrollView) {
self.pdfPageView.setNeedsDisplay()
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
self.pdfPageView.setNeedsDisplay()
}
Slide 17
Slide 17 text
Draw it
class PDFPageView: UIView {
// …
override func setNeedsDisplay() {
super.setNeedsDisplay()
self.layer.setNeedsDisplay()
}
override func layoutSubviews() {
super.layoutSubviews()
self.layer.drawsAsynchronously = true
}
// …
}
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
PDFPageViewDemo
Slide 20
Slide 20 text
Case 2
Open GL / Metal
in UI/NSScrollView
Slide 21
Slide 21 text
Not suitable to be a
subview of UI/NSScrollView
• GLKView / EAGLLayer backed UI/NSView
• MTKView / CAMetalLayer backed UI/NSView
Slide 22
Slide 22 text
Tips
Dummy Content View
Slide 23
Slide 23 text
Dummy Content View
UIView
MTKView
UIScrollView
Dummy
ContentView
Transparent
Slide 24
Slide 24 text
Metal view draws based on
dummy view coordinate
Zoom
→
dummy view
mtk view
Slide 25
Slide 25 text
Transform Coordinate
Dummy View MTKView Device Coord
Model Coord
Slide 26
Slide 26 text
“Ok, I got the idea show me the code…”
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Shilvershadow
Slide 29
Slide 29 text
Zoomable and Scrollable
Point Shader
Core Graphics Text
Slide 30
Slide 30 text
Features
• No limitation for writing shaders – unlike SKShaders
• No complex storyboard configuration – Just place RenderView
• Subclass Scene or Canvas for your own displayable contents
• Write your own shaders
• Subclass Renderer to use your shaders
• Ability to render Bezier Path with shaders
• Possible Hybrid Displaying with Core Graphics
Slide 31
Slide 31 text
Feedback and Star
Please