Draw a path from coordinates fabric js

Question

I am working on a canvas application which needs to be replicated in IOS and Android. Hence the goal is whatever is created using the web must be replicated in the other platforms and vise versa.

In the web I am using Fabric JS as my canvas library and I am using the build in JSON method to save and recreate the canvas, where as the IOS developer is using a point based system where he is saving the x , y cordinates for all the objects and lines drawn in the canvas. The IOS developer is diving the x cordinate with the width and the y cordinate with the height of the canvas to make the object and lines positions propotinate in all the devices.

I was able to convert my web based canvas to their desired point based system. But now the challenge is to convert their point based system into a fabric based web canvas. Dealing with the objects would be easy to handle but I need some assitence as to how I can recreate the path's from the Comma Seperated values in the Database.

Here is an example of a Path saved in the database using the IOS app.

[
  "{0.88156813, 0.67090207}",
  "{0.86200052, 0.67090207}",
  "{0.83264917, 0.67908657}",
  "{0.81308156, 0.67908657}",
  "{0.77883828, 0.68727112}",
  "{0.75437874, 0.68727112}",
  "{0.72013545, 0.68727112}",
  "{0.69567597, 0.68727112}",
  "{0.67121649, 0.69545561}",
  "{0.65164888, 0.69545561}",
  "{0.63208127, 0.70364016}",
  "{0.61251366, 0.70364016}",
  "{0.59294611, 0.72000921}",
  "{0.58316231, 0.7281937}",
  "{0.58316231, 0.73637825}"
]

How do I go about to recreate the path from the given data where the first value is x cordinate and the second value is the y cordinate.

Any guidence in this matter would be very helpful.

Regards

Answer 1

Something like this, I've took the width and hight of the canvas as max value =1, in that way pair x,y is a percent from width or height.

If you have coordinate with minus value in interval [-1, 1] use:

points.push({
       x : (width\2 * coordinates[i].x),
       y : (height\2 * coordinates[i].y)
       }); 

and at line drawing add offset:

canvas.add(new fabric.Line([x1, y1, x2, y2], {
        left: width\2,
        top: height\2,
        stroke: 'red'
    }));

Response when considered possible path values are between [0,1]:

var coordinates = [
  {x : 0.2, y: 0.2},
  {x : 0.88156813, y: 0.67090207},
  {x: 0.86200052, y: 0.67090207},
  {x: 0.83264917, y: 0.67908657},
  {x: 0.81308156,  y: 0.67908657},
  {x: 0.77883828,  y: 0.68727112},
  {x: 0.75437874,  y: 0.68727112},
  {x: 0.72013545,  y: 0.68727112},
  {x: 0.69567597,  y: 0.68727112},
  {x: 0.67121649,  y: 0.69545561},
  {x: 0.65164888,  y: 0.69545561},
  {x: 0.63208127,  y: 0.70364016},
  {x: 0.61251366,  y: 0.70364016},
  {x: 0.59294611,  y: 0.72000921},
  {x: 0.58316231,  y: 0.7281937},
  {x: 0.58316231,  y: 0.73637825}
];

var canvas = new fabric.Canvas('c');
var width = canvas.width;//0.00 to 1.00
var height = canvas.height;//0.00 to 1.00

var points = [];

//define your points from 0 to width and from 0 to height
for(i =0; i < coordinates.length; i++)
{
   points.push({
   x : (width * coordinates[i].x),
   y : (height * coordinates[i].y)
   });
}

//drow lines
for(i =0; i < points.length - 1; i++)
{

//alert(points[i].x);
    canvas.add(new fabric.Line([points[i].x, points[i].y, points[i+1].x, points[i+1].y], {
          stroke: 'blue'
       }));
}

canvas.add(new fabric.Text('x=0.00', { left: 20, top: 5, fontSize: 10 }));
canvas.add(new fabric.Text('y=1.00', { left: 360, top: 5, fontSize: 10 }));
canvas.add(new fabric.Text('y=0.00', { left: 5, top: 20, fontSize: 10 }));
canvas.add(new fabric.Text('y=1.00', { left: 5, top: 380, fontSize: 10 }));

canvas {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>