从坐标fabric js绘制一条路径

Question

我正在开发一个画布应用程序，该应用程序需要在IOS和Android中复制。因此，目标是使用web创建的任何内容都必须在其他平台上复制，反之亦然。

在web中，我使用Fabric JS作为画布库，并使用内置JSON方法来保存和重新创建画布，作为IOS开发人员，他使用基于点的系统来保存画布中绘制的所有对象和线的x，y坐标。IOS开发人员正在将x堇青石与画布的宽度和y堇青石与高度分开，以使对象和线条的位置在所有设备中都成比例。

我能够将我的基于网络的画布转换为他们想要的基于点的系统。但现在的挑战是将他们基于点的系统转换为基于织物的网络画布。处理对象很容易，但我需要一些帮助，看看如何从数据库中的逗号分隔值重新创建路径。

以下是使用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

类似这样的东西，我将画布的宽度和高度取为最大值=1，这样对x，y是宽度或高度的百分比。

如果您在区间[-1，1]中有负值坐标，请使用：

points.push({
x : (width2 * coordinates[i].x),
y : (height2 * coordinates[i].y)
}); 

在划线时添加偏移：

canvas.add(new fabric.Line([x1, y1, x2, y2], {
left: width2,
top: height2,
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>