Xamarin Forms camera overlay and Image vector selection

Xamarin Forms application which can take an photo of a wall, which contains a poster/frame, and by using a vector selection tool, align an overlay image into position on top of the original image. When the photo has been taken, the photo is used as background image for the subsequent page, where you can drag the corner handles of a rectangle/vector shape to fit the edges of the poster in the underlying image. The final combined image of the background and selected overlay can be saved to the photo library. See the illustration for the exact design and flow. The first part of the project: 1.1 CAMERA PREVIEW LEFT SIDE MENU HANDLE: When tapped, the menu slides in from the left (see 1.2). CAMERA PREVIEW: First image is the live camera preview. When tapped a snapshot is taken, and it goes directly to page 2.1. 1.2 CAMERA PREVIEW MENU The menu contains 2 buttons. OPEN CAMERA: Displays the full-screen camera overlay (see 1.3) PHOTO LIBRARY: Displays the photo library in full screen to select a photo. When a photo has been selected, it continues to page 2.1. 1.3 FULL SCREEN CAMERA OVERLAY This displays the camera overlay in full screen mode, where the flash can be turned on and off. When clicking the white circle, a snapshot is taken, and it continues to page 2.1. 2.1 FRAME HANDLES The snapshot image, or chosen image from the image library is displayed. A rectangular vector shape with circular handles in the corners is displayed over the image. The vector handles is draggable, to form a shape matching the edges of the frame in the background image.. 2.2 FRAME HANDLES HOTSPOT The hotspot for moving the corner handles must be large enough to easily select and drag with fingers (as illustrated with the purple dotted line). 2.3 FRAME AUTODETECT (ESTIMATE ONLY) This is a future optional feature, which potentially could be implemented at a later stage, if possible. In this first project scope, it is only required to roughly estimate the amount of work to implement something like this, and some idea of how this could be achieved. The requirements for this future feature, would be to automatically detect the frame edges of one or multiple rectangular objects in the underlying image, to ease the workflow for the user. 2.4 ADJUSTED HANDLES This is how it looks like, when the user has dragged the handles. The user can tap the SAVE button, to save the vector shape, and proceed to page 3.1. 3.1 SELECT IMAGE TO OVERLAY An image carousel at the bottom, can be swiped to choose an overlay image from a set of predefined images (in this project, just use a static list of 6-10 images). The selected overlay image must be transformed to fit the perspective of the vector shape defined and saved in page 2.4, and displayed as an overlay on top of the original photo background. 3.2 SWIPE IMAGES CAROUSEL FOR OVERLAY The image carousel highlights and slightly enlarges the selected image inside the carousel. When swiping the carousel to the right or left, the old selected overlay image slides out, while the new selected overlay image slides in, simultaneously. 3.3. SWIPE TO NEXT IMAGE When the finger is lifted from the carousel, the selected image snaps softly into center position of the vector shape. When tapping the KEEP SELECTED button, the combined image of the original photo, and the selected overlay image will be saved to the Photo Library. General requirements: - Must work on both Android and iOS. - Must be implemented as a Xamarin Forms .NET Standard application and custom renderers. - The design must be implemented exactly as in the mockup images - The image carousel, vector handle dragging, and overlay image sliding into position must be well-functioning smoothly without lagging on minimum iPhone 5 (2013) or Samsung Galaxy S5 (2014). - Source code must be delivered - If third party library licenses are required for development, these must be reviewed and approved before project starts.