Howdy!
I'm new to graphics and drawing on mobile, and I need a little push in the right direction.
I have implemented a 3rd party API into my Xamarin.Forms app, which supplies the app with "path" data that defines dynamic shapes that need to be drawn to the user's screen. Here is an example shape contained within the JSON response that I would like to draw:
{
"bBox": "2471.3636363636374 3088.2533981221372 15 15",
"path": "M100,43.56248903123867Q100,40.56248903123867,103,40.56248903123867L112,40.56248903123867Q115,40.56248903123867,115,43.56248903123867L115,52.56248903123867Q115,55.56248903123867,112,55.56248903123867L103,55.56248903123867Q100,55.56248903123867,100,52.56248903123867Z",
"numberX": "107.5",
"numberY": "48.06248903123867",
"numberDY": "2.5156140312386697"
}
Does this format look familiar to anyone? The research I've done looks like I'll end up using SkiaSharp, but I'm not sure where to go from there.
@LanceKing, I think that there is hope for you The path data is an SVG path, so you can construct a
SKPath
object from that string using SKPath.ParseSvgPathData()
:
JObject json = ...; // eg: Json.NET string pathData = json["path"]; // create the path SKPath path = SKPath.ParseSvgPathData(pathData); // boom! you have a path that can be drawn var paint = ...; canvas.DrawPath(path, paint);
You may need to scale/translate first to get the path in the right place:
canvas.Scale(...); canvas.Translate(...);
And, if you need to get the bounds of the path:
// all points, including the invisible curve handles var bounds = path.Bounds; // only the visible measurements (probably what you want) var tightBounds = path.TightBounds;
The TightBounds
is a calculated one and is useful if the path contains curves with handles. If the path just contains straight lines, then Bounds
will be fine and is quick.
Answers
Update:
Further investigation leads me to believe that the JSON data above is meant for use in an HTML SVG element.
My question has now changed to:
Does anyone know of a way to display (or process and display) shapes that are formatted like this?
@mattleibow any chance you have some insight for me? I started with SkiaSharp, but it seemed that the SVG resources had to be compiled.
Beating my head against this tirelessly.
@LanceKing, I think that there is hope for you
The path data is an SVG path, so you can construct a
SKPath
object from that string usingSKPath.ParseSvgPathData()
:You may need to scale/translate first to get the path in the right place:
And, if you need to get the bounds of the path:
The
TightBounds
is a calculated one and is useful if the path contains curves with handles. If the path just contains straight lines, thenBounds
will be fine and is quick.