如何获得自由绘制的线作为一个列表，其中每行是一个坐标列表？ [英] How can I get the free drawn lines as a list of lines, where each line is a list of coordinates?
问题描述
我目前正在考虑使用 fabric.js 用于在线手写识别系统。对于这样的系统，我需要发送绘制的行作为行的列表，其中每行是一个点列表。
I'm currently thinking about using fabric.js for an on-line handwriting recognition system. For such a system, I would need to send the drawn lines as a list of lines, where each line is a list of points.
因此，如果用户绘制x在画布上，我想得到这样的东西：
So if the user has drawn an "x" on the canvas, I would like to get something like this:
[
// 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< j：列表j的每个元素都比列表i的任何元素更早。
问题：列表列表，其中每个列表都表示为点列表？我还可以获得一些速度指示器，例如每个点的时间属性？
Question: How do I get such a list of lines, where each list is represented as a list of points? Can I also get some "speed indicator", e.g. a time attribute for each point?
<!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 。是否正确？
It seems as if all free-drawn lines are stored in canvas._objects as a list of fabric.Path. Is that correct?
相关属性似乎是：
-
top：这似乎是路径的偏移。 -
width： $
path ：这是单行的点列表吗？这似乎是一个列表的列表。这些元素是什么意思？每个子列表似乎以 M ， Q 或 L 其中 M 似乎是第一个元素， L 最后和 / code>之间的一切（ M = moveto ， Q =二次Bézier曲线， L = lineto ，来源）。第一个和最后一个只包含2个数字值，其间的所有点都有4个数字值。我想这2个数值是x / y坐标。但是其他两个坐标是什么意思？
top: This seems to be an offset of the path.width: What is this good for?path: Is this the list of points for a single line? This seems to be a list of lists. What do the elements mean? Every sub-list seems to begin with eitherM,QorLwhereMseems to be the first element,Lthe last andQeverything in between (M=moveto,Q=quadratic Bézier curve,L=lineto, source). The first and the last contain only 2 numeric values, all points in between have 4 numeric values. I guess that 2 numeric values are x/y coordinates. But what do the other two coordinates mean?
给我一个可能性，使用徒手绘制与出口的点/线，不使用fabric.js，这也很好。
If you show me a possibility to use freehand drawing with the export of points / lines that does not use fabric.js, that's fine, too. But touch screens have to work with that solution!
推荐答案
这是一个不同的方法，但可能有助于实现您的目标： / p>
This is a different approach, but might help to achieve your goal:
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);
}
}
而不是分析曲线在屏幕上，此代码正在记录触摸位置，而用户在画布上绘制线条。
Instead of analyzing the curves present on the screen, this code is recording touch positions while lines are drawn on canvas by the user.
EDIT 添加了isDrawingMode以显示线条帆布。
EDIT added isDrawingMode to show the lines on canvas.
这篇关于如何获得自由绘制的线作为一个列表，其中每行是一个坐标列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
