Нарисуйте путь из ткани корней js

Question

Я работаю над приложением для холста, которое необходимо реплицировать в IOS и Android. Следовательно, цель - это то, что создано с использованием сети, должно быть реплицировано на других платформах и наоборот.

В Интернете я использую Fabric JS в качестве моей библиотеки холста, и я использую метод сборки в методе JSON для сохранения и воссоздания холста, где, когда разработчик IOS использует точечную систему, в которой он сохраняет x, y корнирует для всех объектов и линий, нарисованных на холсте. Разработчик IOS погружает х сердечник x с шириной и кординатом y с высотой холста, чтобы положение объектов и линий было пропозитировано во всех устройствах.

Я смог преобразовать свой веб-холст в нужную систему на основе точек. Но теперь задача состоит в том, чтобы преобразовать свою систему на основе точек в веб-холст, основанный на ткани. Работа с объектами будет легко обрабатываться, но мне нужна некоторая помощь относительно того, как я могу воссоздать путь из значений Comma Sepperated в базе данных.

Ниже приведен пример пути, сохраненного в базе данных с помощью приложения IOS.

[ 
    "{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}" 
] 

Как я могу идти о воссоздать путь из приведенных данных, где первое значение равно х cordinate и второе значение является у cordinate.

Любая вера в этом вопросе была бы очень полезной.

С уважением

Answer 1

Что-то вроде этого, я взял ширину и высоту холста как максимальное значение = 1, в том, что пути пару х, у представляет собой процент от ширины или высоты.

Если у вас есть координата с минусовым значением в интервале [-1, 1] использовать:

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

и на линии чертежа добавить смещение:

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

Response, когда рассмотрели возможные значения пути находятся между [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>