Question

我目前正考虑将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＆lt; = i＆lt; j：列表j的每个元素都比列表i的任何元素都要晚。

问题：如何获得这样的行列表，其中每个列表都表示为一个点列表？我是否也可以获得一些“速度指示符”，例如每个点的时间属性？

我的尝试

<!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>

似乎所有自由绘制的行都作为fabric.Path的列表存储在canvas._objects中。这是对的吗？

注意

如果你向我展示了使用徒手绘图和不使用fabric.js的点/线的导出的可能性，那也没关系。但触摸屏必须使用该解决方案！

Answer 1

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

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以显示画布上的线条。

如何将自由绘制的线条作为线条列表，其中每条线条是一个坐标列表？

我的尝试

注意

1 个答案: