コーディネートファブリックjsからのパスを描画

Question

私はIOSとAndroidで複製する必要があるキャンバスアプリケーションで作業しています。したがって、目標は、Webを使用して作成されたものは、他のプラットフォームで複製されなければならず、逆もまた同様です。

私はキャンバスライブラリとしてFabric JSを使用しています。私はキャンバスを保存して再作成するためにJSONメソッドでビルドを使用しています。IOS開発者はポイントベースのシステムを使用しています。キャンバスに描画されたすべてのオブジェクトと線のy座標。 IOSの開発者は、x座標を幅とy座標をキャンバスの高さでダイビングして、オブジェクトと行の位置をすべてのデバイスでプロポーショナルにします。

Webベースのキャンバスを希望のポイントベースのシステムに変換できました。しかし今、課題はポイントベースのシステムをファブリックベースのWebキャンバスに変換することです。オブジェクトを扱うのは簡単に処理できますが、データベース内のカンマ区切りの値からパスを再作成する方法についていくつかの同意が必要です。

ここでは、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}" 
] 

どのように私は最初の値がxコーディネートであり、第二の値をyコーディネートで与えられたデータからパスを再作成しようとして行くのです。

この問題については、どんな指導も非常に役に立ちます。このような

よろしく

Answer 1

何かが、私はそのようにペアxに、yは幅または高さからのパーセントで、最大値= 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' 
    })); 

応答を検討し可能なパスの値が間にあるとき、 [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>