0

I have an UIScrollView that contains multiple Views (like 20 views). Each of these views has an Image with background color, a view that contains multiple shapes (CAShapeLayer with pathes) and a PKCanvasView (from iOS 13 PencilKit). It is basically like a PDFView: Multiple pages that you can scroll through.

I want to display an overview of all these views: A UICollectionView with one cell for each view that "mirrors" the whole view. I tried to generate an image from the view, overlay it with an image of the drawing, shrink it to the size I need and then use this image as thumbnail in the UICollectionViewCell. However, this takes extremely long and I can not do it on a background thread.

I have seen other apps do it, so there must be a way: What could I possibly do to mirror these 20 views as small thumbnails in my UICollectionView? I want the user to tap on a button named "Overview" that shows the UICollectionView immediately with a thumbnail of every view in it.

byaruhaf
  • 4,128
  • 2
  • 32
  • 50
Miguel Schulz
  • 141
  • 7
  • why not convert all images into PDF annotations and then create a quick PDF file, stuff that into PDFView and use the Thumbnail features of PDFKit to render thumbnails quickly? you can even intercept click events on the images in the PDF file using a PDFView – Larry Pickles Oct 29 '19 at 22:15
  • The problem is that I not only need the images, that would be easy to make. I need the whole View with all its subviews; an image is only a part of the content I need to display. But rendering all the stuff into one image (or in a pdf document) takes way to much time. I need like a small screenshot of every view, because the view already has all the contents displayed – Miguel Schulz Oct 29 '19 at 22:33
  • and why do you need to do this quickly and not on a background thread? – Larry Pickles Oct 29 '19 at 22:35
  • Because the user should be able to open a menu that contains all these thumbnails with a click of a button at anytime. When the user changes 5 of the views in my Scrollview, for example by changing the image, and then taps on the overview button, the changes need to be visible there. Rendering and resizing everything again would take like 1 second per view, and 20 views mean 20 seconds of time to wait everytime the user want to see the overview – Miguel Schulz Oct 29 '19 at 22:39
  • i see so you're rendeing all views individually into images, yeah, that's rough – Larry Pickles Oct 29 '19 at 22:41
  • Yes :( that’s why I am looking for a way to just „mirror“ a small version of each view inside the CollectionViewCell. The app „goodnotes“ does exactly what I want: When you draw a stroke on a page, it is immediately visible in the pages overview, so there must be a way. – Miguel Schulz Oct 29 '19 at 22:45
  • wish i could see the functionality you're looking for to help, but i'm not downloading their app lol, if you have another example, link a short video to show what you mean. – Larry Pickles Oct 29 '19 at 22:50
  • Sure: https://youtu.be/JI21Se3uIVo at 5:00 you can see how the guy opens an overview of all the pages in the document (these pages are not PDFPages, they are custom views) – Miguel Schulz Oct 29 '19 at 22:53
  • i see, so you're not sure if they're updating the thumbnail on a server after every document save and then reloading it into the app, right? i can almost gurantee you that if these are not just PDF documents that they are not redrawing these images live in the app after each update. if they are, they'll be updating just the one that that was most recently active but not every single one on the page unless they socketed to the backend and have dynamic update on cross platform saves. – Larry Pickles Oct 29 '19 at 22:58
  • But how does it come that they are always up to date? When I draw on 5 different pages as quickly as I can and then open the overview, all of my strokes are visible there, without a second of loading. And if I add 10 new pages with different backgrounds, all these pages are visible kn the overview immediately – Miguel Schulz Oct 29 '19 at 23:01
  • way i've done this in apps before is after each save of a document, i immediately screencap the document and store the thumbnail on the backend and locally. then use that as the thumbnail for the cell. that's just my take on this. perhaps they are doing something magical on this that realtime snaps the view but i doubt it. and how do you know that the other documents are up to date? they could be, and that would be becuase after each save they are screenapped and then thumbnail loaded onto backend and locally again. – Larry Pickles Oct 29 '19 at 23:04
  • But that would mean that they safe the document and update the thumbnails for every pencil stroke; 10 rapid taps on the screen with the pencil would create 10 dots = 10 document saves in a second or two. Seems impossible without memory issues – Miguel Schulz Oct 29 '19 at 23:23
  • i see no indication that the app is saving thumbnails in real time as you suggested, i'm saying when the document closed button is pressed, a quick screenshot is taken, resized, then used as a cell image view, then saved in the background on the server – Larry Pickles Oct 29 '19 at 23:44
  • You don’t understand the app then... at 5:00 in the Video, this is NOT the overview of documents; it is a overview of pages inside a document. You can scroll through the pages you see on the overview and write on them without leaving the document, an when clicking the overview button, you see every single one of these pages in the overview – Miguel Schulz Oct 30 '19 at 06:45

0 Answers0