我怎样才能获得自由绘制的线作为行的列表，每一行是坐标列表？(How can I get the fr

目前，我正在考虑使用fabric.js了一个在线手写识别系统。对于这样的系统，我需要绘制的线条作为发送行的列表，每一行是一个点的列表。

因此，如果用户已经在画布上绘制一个“x”，我想获得的东西是这样的：

[
  // the first line was the one going from left bottom to right top:
  [{'x':228, 'y':92}, 
    {'x':229, 'y':90}, 
    {'x':230, 'y':88}, 
    {'x':232, 'y':86}, 
    {'x':235, 'y':84}, 
    {'x':238, 'y':81}, 
    {'x':243, 'y':76}, 
    {'x':248, 'y':70}, 
    {'x':256, 'y':64}, 
    {'x':265, 'y':58}, 
    {'x':275, 'y':52}, 
    {'x':285, 'y':46}, 
    {'x':295, 'y':39}, 
    {'x':307, 'y':33}, 
    {'x':317, 'y':28}, 
    {'x':328, 'y':23}, 
    {'x':334, 'y':19}, 
    {'x':341, 'y':14}, 
    {'x':348, 'y':9}, 
    {'x':352, 'y':7}, 
    {'x':353, 'y':6}, 
    {'x':354, 'y':5}, 
    {'x':354, 'y':4}
   ],
   // the second line was the one going from left top to right bottom
   [
    {'x':259, 'y':20}, 
    {'x':260, 'y':21}, 
    {'x':261, 'y':22}, 
    {'x':262, 'y':23}, 
    {'x':264, 'y':26}, 
    {'x':266, 'y':28}, 
    {'x':268, 'y':31}, 
    {'x':271, 'y':34}, 
    {'x':274, 'y':38}, 
    {'x':279, 'y':44}, 
    {'x':285, 'y':51}, 
    {'x':291, 'y':59}, 
    {'x':297, 'y':67}, 
    {'x':303, 'y':74}, 
    {'x':309, 'y':80}, 
    {'x':315, 'y':88}, 
    {'x':321, 'y':96}, 
    {'x':328, 'y':103}, 
    {'x':334, 'y':107}, 
    {'x':340, 'y':112}, 
    {'x':345, 'y':116}, 
    {'x':349, 'y':118}, 
    {'x':350, 'y':119}, 
    {'x':350, 'y':120}
    ]
]

在第一个列表的第一个元素应该是首先绘制点。
对于0 <= I <Y：列表j的每个元素后来拉伸比一览我的任何元素。

问： 我如何获得线，其中每个列表表示为点列表这样的名单？ 我也能得到一些“速度指标”，比如每个点的时间属性？

我试

<!DOCTYPE html>
<html>
<head>
    <title>Handwriting recognition example</title>
    <script src="all.min.js"></script>
</head>
<body>
    <canvas id="c1" width="800" height="450" style="border:1px solid black;"></canvas>
    <script>
        var canvas = new fabric.Canvas('c1');
        canvas.isDrawingMode = true;
    </script>
</body>
</html>

看来，如果所有自由绘制的线条都存储在canvas._objects作为列表fabric.Path 。那是对的吗？

注意

如果你告诉我用写意画与不使用fabric.js点/线出口的可能性，这也很好。但是触摸屏与该解决方案的工作！

这是一种不同的方法，但可能有助于实现您的目标：

var canvas = new fabric.Canvas('c',{backgroundColor: 'rgb(200,200,200)'});
canvas.isDrawingMode = true;
var rect = new fabric.Rect();

canvas.add(rect);

canvas.on('mouse:down', function(options) {
  startRecording();
});

var lines = [];


function startRecording(){
    var line = [];
    canvas.on('mouse:move', recordMoment);
    canvas.on("mouse:up", stopRecording);

    function recordMoment(event){
        line.push({x: event.e.x, y: event.e.y});    
        console.log(event.e.x + " " + event.e.y);    
    }
    function stopRecording(){
        lines.push(line);
        canvas.off('mouse:move', recordMoment);
        canvas.off("mouse:up", stopRecording);
    }
}

http://jsfiddle.net/B5Ub9/4/

代替分析存在于屏幕上的曲线的，该码被记录触摸位置而线由用户画布绘制。

编辑添加isDrawingMode展现在画布上的线条。