将笔触数据转换为SCG Ink格式

时间:2015-11-06 20:03:01

标签: javascript parsing mathematical-expressions inkml

我想使用Seshat - 一个手写的数学表达式解析器 - 用于我正在处理的项目,但是我在理解如何为程序提供正确的输入,InkML或者SCG Ink文件。

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

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

1 个答案:

答案 0 :(得分:3)

我通过电子邮件发送了Seshat作者,他建议我将输入转换为SCG Ink,如果你使用http://cat.prhlt.upv.es/mer/使用的JavaScript库,那么结果非常简单。具体来说,除常规旧jQuery外,您还需要jquery.sketchable.memento.min.jsjquery.sketchable.min.jsjsketch.min.js。以下是我所做的事情,以防其他人对Seshat感兴趣。

请注意,同一页面中main.js他们将Sketchable库应用于带有此代码块的HTML画布区域:

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 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格式的一系列笔划。