Pro Yearly is on sale from $80 to $50! »

UI/NSScrollView Tips & Tricks

79874cedccd1cf5baa8cb264b5091ee6?s=47 codelynx
January 14, 2017

UI/NSScrollView Tips & Tricks

Tips and Tricks of common problems of using scroll views. 1. make your scroll view crisp sharp on high zoom scale without crashing. 2. use scroll view with OpenGL or Metal related view.

79874cedccd1cf5baa8cb264b5091ee6?s=128

codelynx

January 14, 2017
Tweet

Transcript

  1. UI/NSScrollView
 Tips & Tricks Kaz Yoshikawa

  2. Do you use UI/NS ScrollView?

  3. Are they zoomable?

  4. Have you had any issues about zooming?

  5. Case 1 Zooming Vector Contents

  6. Zoomable Contents

  7. Blurring when zoom!?

  8. Set contentMode 
 to redraw…

  9. Nope… Still Blurry • contentMode to redraw won't help

  10. update
 contentScaleFactor …

  11. contentScaleFactor • OK – Device size like small contents •

    NG – Magazine / Newspaper like large contents • eg. 2048x1536 12MB — (4x zoom) — 8192 x 6144 48MB ⚠
  12. Tips Dummy Content View

  13. Dummy Content View UIView PDFPageView UIScrollView Dummy
 ContentView Transparent

  14. PDF view draws based on dummy view coordinate Zoom →

    dummy view pdf view
  15. 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() } →
  16. UIScrollView delegate func viewForZooming(in scrollView: UIScrollView) -> UIView? { return

    contentView } func scrollViewDidZoom(_ scrollView: UIScrollView) { self.pdfPageView.setNeedsDisplay() } func scrollViewDidScroll(_ scrollView: UIScrollView) { self.pdfPageView.setNeedsDisplay() }
  17. Draw it class PDFPageView: UIView { // …
 override func

    setNeedsDisplay() { super.setNeedsDisplay() self.layer.setNeedsDisplay() } 
 override func layoutSubviews() { super.layoutSubviews() self.layer.drawsAsynchronously = true } // …
 }
  18. None
  19. PDFPageViewDemo

  20. Case 2 Open GL / Metal
 in UI/NSScrollView

  21. Not suitable to be a 
 subview of UI/NSScrollView •

    GLKView / EAGLLayer backed UI/NSView • MTKView / CAMetalLayer backed UI/NSView
  22. Tips Dummy Content View

  23. Dummy Content View UIView MTKView UIScrollView Dummy
 ContentView Transparent

  24. Metal view draws based on dummy view coordinate Zoom →

    dummy view mtk view
  25. Transform Coordinate Dummy View MTKView Device Coord Model Coord

  26. “Ok, I got the idea show me the code…”

  27. None
  28. Shilvershadow

  29. Zoomable and Scrollable Point Shader Core Graphics Text

  30. 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
  31. Feedback and Star Please

  32. Thank you kyoshikawa@electricwoods.com