将笔划数据转换为 SCG Ink 格式
Convert stroke data to SCG Ink format
我想为我正在进行的项目使用 Seshat——一个手写的数学表达式解析器,但我在理解如何为程序提供正确的输入时遇到了一些困难,一个InkML 或 SCG Ink 文件。
我仔细查看了一个在线示例,该示例已应用 here, and I see that they get a Javascript array of stroke information from an HTML Canvas field with this JS library,但我不知道该数组在发布到他们的服务器后会发生什么。
我已阅读 SCG Ink spec,我认为将数组解析为格式可能相对容易,但我希望我遗漏了一些明显的东西,这将使这变得微不足道。任何帮助将不胜感激。
我给 Seshat 作者发了邮件,他建议我将输入转换为 SCG Ink,如果你使用 http://cat.prhlt.upv.es/mer/ 中使用的 JavaScript 库,结果证明这很容易。具体来说,除了常规的旧 jQuery 之外,您还需要 jquery.sketchable.memento.min.js
、jquery.sketchable.min.js
和 jsketch.min.js
。这是我所做的,以防其他人对 Seshat 感兴趣。
来自同一页面的通知,在 main.js
中,他们使用以下代码块将 Sketchable 库应用于 HTML canvas 区域:
var $canvas = $('#drawing-canvas').sketchable({
graphics: {
strokeStyle: "red",
firstPointSize: 2
}
});
现在我们可以看看他们的 submitStrokes()
功能,看看如何从 Sketchable 中提取笔划并将其转换为 SCG Ink。 var strokes = $canvas.sketchable('strokes');
行获取笔划,然后 strokes = transform(strokes);
行应用快速转换以仅提取他们需要的数据。这里的transform()
函数供参考:
function transform(strokes) {
for (var i = 0; i < strokes.length; ++i)
for (var j = 0, stroke = strokes[i]; j < stroke.length; ++j)
strokes[i][j] = [ strokes[i][j][0], strokes[i][j][1] ];
return strokes;
};
从transform()
返回的值是笔画和点的三维数组。 (第一个维度的每个元素都是一个笔画,第二个维度的每个元素是一个点,第三个维度是 x、y 坐标。)在那个网站上,他们继续 POST 该数组到必须处理最终转换为 SCG Ink 的服务器。我写了一个JavaScript函数来处理它:
function strokesToScg(strokes) {
var scg = 'SCG_INK\n' + strokes.length + '\n'
strokes.forEach(function (stroke) {
scg += stroke.length + '\n'
stroke.forEach(function (p) {
scg += p[0] + ' ' + p[1] + '\n'
})
})
return scg
}
就是这样。 strokesToScg()
返回的值是描述 SCG Ink 格式的一系列笔画的字符串。
我想为我正在进行的项目使用 Seshat——一个手写的数学表达式解析器,但我在理解如何为程序提供正确的输入时遇到了一些困难,一个InkML 或 SCG Ink 文件。
我仔细查看了一个在线示例,该示例已应用 here, and I see that they get a Javascript array of stroke information from an HTML Canvas field with this JS library,但我不知道该数组在发布到他们的服务器后会发生什么。
我已阅读 SCG Ink spec,我认为将数组解析为格式可能相对容易,但我希望我遗漏了一些明显的东西,这将使这变得微不足道。任何帮助将不胜感激。
我给 Seshat 作者发了邮件,他建议我将输入转换为 SCG Ink,如果你使用 http://cat.prhlt.upv.es/mer/ 中使用的 JavaScript 库,结果证明这很容易。具体来说,除了常规的旧 jQuery 之外,您还需要 jquery.sketchable.memento.min.js
、jquery.sketchable.min.js
和 jsketch.min.js
。这是我所做的,以防其他人对 Seshat 感兴趣。
来自同一页面的通知,在 main.js
中,他们使用以下代码块将 Sketchable 库应用于 HTML canvas 区域:
var $canvas = $('#drawing-canvas').sketchable({
graphics: {
strokeStyle: "red",
firstPointSize: 2
}
});
现在我们可以看看他们的 submitStrokes()
功能,看看如何从 Sketchable 中提取笔划并将其转换为 SCG Ink。 var strokes = $canvas.sketchable('strokes');
行获取笔划,然后 strokes = transform(strokes);
行应用快速转换以仅提取他们需要的数据。这里的transform()
函数供参考:
function transform(strokes) {
for (var i = 0; i < strokes.length; ++i)
for (var j = 0, stroke = strokes[i]; j < stroke.length; ++j)
strokes[i][j] = [ strokes[i][j][0], strokes[i][j][1] ];
return strokes;
};
从transform()
返回的值是笔画和点的三维数组。 (第一个维度的每个元素都是一个笔画,第二个维度的每个元素是一个点,第三个维度是 x、y 坐标。)在那个网站上,他们继续 POST 该数组到必须处理最终转换为 SCG Ink 的服务器。我写了一个JavaScript函数来处理它:
function strokesToScg(strokes) {
var scg = 'SCG_INK\n' + strokes.length + '\n'
strokes.forEach(function (stroke) {
scg += stroke.length + '\n'
stroke.forEach(function (p) {
scg += p[0] + ' ' + p[1] + '\n'
})
})
return scg
}
就是这样。 strokesToScg()
返回的值是描述 SCG Ink 格式的一系列笔画的字符串。