How do I draw shapes using JSON data that is formatted similar to this example?

LanceKing

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.

mattleibow

@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.

LanceKing

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?

LanceKing

@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.

mattleibow

@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.