javascript - 将笔划数据转换为 SCG Ink 格式

Question

我想使用 Seshat — 手写数学表达式解析器 — 适用于我正在从事的项目，但我在理解如何为程序提供正确的输入(InkML 或 SCG Ink 文件)时遇到了一些麻烦。

我仔细查看了一个存在的在线示例 here ，我看到他们从带有 this JS library 的 HTML Canvas 字段中获取笔画信息的 Javascript 数组已应用，但我不知道该数组在发布到他们的服务器后会发生什么。

我读过 SCG Ink spec ，而且我认为将数组解析为格式可能相对容易，但我希望我遗漏了一些明显的东西，这会使这变得微不足道。任何帮助将不胜感激。

Answer 1

我给 Seshat 作者发了邮件，他建议我将输入转换为 SCG Ink，如果你使用 http://cat.prhlt.upv.es/mer/ 中使用的 JavaScript 库，结果证明这很容易。 .具体来说，您需要 jquery.sketchable.memento.min.js、jquery.sketchable.min.js 和 jsketch.min.js除了常规的旧 jQuery。如果其他人对 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 坐标。)在该站点上，他们继续将该数组发布到必须处理的服务器最终转换为 SCG 墨水。我写了一个 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 格式的一系列笔画的字符串。