Xamarin Forms App to dynamically create and display an SVG image
Budget: $30 – $250 USD
I require a single page Xamarin forms app where the user creates a SVG image (using SKIAsharp) by inputting some parameters. The image will be made up of lines, dots/circles and text. Lines will have the following attributes: Thickness, color, start coordinates, end coordinates. Dots/circles has a single coordinate, but also includes color, size. The user will also define the grid size.
As an example, the user should basically be able to say the following:
Create grid - 16x16 units,
Create line - startxy: -8:0, endxy: 8:0, color: black, thickness: 0.01units
Create line - startxy: 0:-8, endxy: 0:8, color: black, thickness: 0.01 units
Create dot - Diameter/size: 0.05units, color: red, xy: 0:0
Which will create a black cross through the middle of the "canvas" with a red dot on the cross.
The user should also be able to easily do repeating patters, for example:
Create vertical line: startxy: 1:0, length: 0.5, thickness: 0.1, color black. Then duplicate line 4 times, in the x direction, spacing 1.Which should then draw the line at 1:0, 2:0, 3:0, 4:0, 5:0.
The final output should be an XML file describing the SVG image.
I have multiple images of expected outputs, which should help you understand better what I require.
I already have the library that can draw the SVG as required, it can also output the XML as required. I basically need the UI part done, where the user can enter the data. I want it to be a single page with the static bottom half showing the SVG image as the user enters the data and a scrollable dynamically expanding top half for the user entry.
Finally I want the app to save the XML output to a free online cloud DB, like azure cosmos, so that users can save the created image and I can have access to it.
As an example, the user should basically be able to say the following:
Create grid - 16x16 units,
Create line - startxy: -8:0, endxy: 8:0, color: black, thickness: 0.01units
Create line - startxy: 0:-8, endxy: 0:8, color: black, thickness: 0.01 units
Create dot - Diameter/size: 0.05units, color: red, xy: 0:0
Which will create a black cross through the middle of the "canvas" with a red dot on the cross.
The user should also be able to easily do repeating patters, for example:
Create vertical line: startxy: 1:0, length: 0.5, thickness: 0.1, color black. Then duplicate line 4 times, in the x direction, spacing 1.Which should then draw the line at 1:0, 2:0, 3:0, 4:0, 5:0.
The final output should be an XML file describing the SVG image.
I have multiple images of expected outputs, which should help you understand better what I require.
I already have the library that can draw the SVG as required, it can also output the XML as required. I basically need the UI part done, where the user can enter the data. I want it to be a single page with the static bottom half showing the SVG image as the user enters the data and a scrollable dynamically expanding top half for the user entry.
Finally I want the app to save the XML output to a free online cloud DB, like azure cosmos, so that users can save the created image and I can have access to it.