Zeichnen Sie einen Pfad von Cordinates Fabric js

Question

Ich arbeite an einer Leinwand-Anwendung, die in IOS und Android repliziert werden muss. Daher ist das Ziel, was mit dem Web erstellt wird, muss in den anderen Plattformen repliziert werden und umgekehrt.

Im Web verwende ich Fabric JS als meine Canvas-Bibliothek und verwende die integrierte JSON-Methode, um die Zeichenfläche zu speichern und neu zu erstellen, wobei der IOS-Entwickler ein punktbasiertes System verwendet, in dem er das x speichert. y stimmt für alle in der Leinwand gezeichneten Objekte und Linien überein. Der IOS-Entwickler taucht die x-Koordinate mit der Breite und die y-Koordinate mit der Höhe der Leinwand, um die Objekt- und Linienpositionen in allen Geräten zu propotieren.

Ich war in der Lage, meine Web-basierte Leinwand zu ihrem gewünschten Punkt-basierten System zu konvertieren. Jetzt besteht die Herausforderung darin, ihr punktbasiertes System in ein Fabric-basiertes Web-Canvas umzuwandeln. Der Umgang mit den Objekten wäre einfach zu handhaben, aber ich brauche einige Unterstützung, wie ich die Pfade aus den durch Komma getrennten Werten in der Datenbank wiederherstellen kann.

Hier ist ein Beispiel für einen Pfad, der mit der IOS App in der Datenbank gespeichert wird.

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

Wie gehe ich über den Weg von den gegebenen Daten neu zu erstellen, wenn der erste Wert x cordinate ist und der zweite Wert ist der y cordinate.

Jede Anleitung in dieser Angelegenheit wäre sehr hilfreich.

Grüße

Answer 1

So etwas habe ich nahm die Breite und Höhe der Leinwand als Max-Wert = 1, in dieser Art und Weise Paar x, y ein Prozent von Breite oder Höhe ist.

Wenn Sie mit Minuswert im Intervall koordinieren [-1, 1] verwenden:

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

und Strichzeichnung add-Offset:

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

Antwort, wenn in Betracht gezogen möglicher Weg Werte liegen zwischen [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>