WatchOS: Image panning and zooming

Question

User160723 posted

Hi everyone

In my little watch app (targeting watchOS3+) I need to show an image which will be fetched from a server (it is not big, let's say 600x600). The image will be displayed alone in a modal page (only the Close button is on the top left corner) Similar with the Photos app, I would like to be able to offer the user the possibility to pan and zoom the image. Zooming will be done by using the Digital Crown (the events are wired up already).

Any idea how to deal with panning and zooming? Did anyone implement something like this already?

Thank you in advance!

Answer 1

User160723 posted

Hm, I think I have an idea myself... I will stop using the WKInterfaceImage and fallback to CoreGraphics: scaling the image myself (following Digital Crown events) and panning by registering to WKPanGestureRecognizer.

Will post back as soon as I have results, maybe will help someone....

Answer 2

User160723 posted

I have solved the problem by implementing a small trick (see attached image). Basically the zooming (Digital Crown) happens "in background" on a cached UIImage and a viewport (sized exactly as the display size) crops an area from the UIImage and shows it via the WKInterfaceImage. Panning is done by simply moving the viewport around, following the TapGestureRecognizer data.

I think I will encapsulate this in a custom control and put it on GitHub.