将笔触数据转换为SCG Ink格式 [英] Convert stroke data to SCG Ink format

问题描述

我想使用 Seshat - 一个手写的数学表达式解析器 - 用于我的项目继续工作，但我在理解如何为程序提供正确的输入，InkML或SCG Ink文件方面遇到了一些麻烦。

I'd like to use Seshat—a handwritten math expression parser—for a project I'm working on, but I'm having some trouble understanding how to provide the program its proper input, an InkML or SCG Ink file.

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

I've taken a long look at an online example that exists here, and I see that they get a Javascript array of stroke information from an HTML Canvas field with this JS library applied, but I don't know what happens that array after it gets POSTed to their server.

我已阅读 SCG Ink规范 ，我认为将数组解析为格式可能相对容易，但是我希望有一些明显的东西我会丢失，这会让这个变得微不足道。任何帮助将不胜感激。

I've read the SCG Ink spec, and I think it might be relatively easy to parse the array into the format, but I'm hoping there's something obvious I'm missing that would make this trivial. Any help would be greatly appreciated.

推荐答案

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

I emailed the Seshat author and he suggested I convert the input to SCG Ink, which turned out to be pretty easy if you take the JavaScript libraries used at http://cat.prhlt.upv.es/mer/. Specifically, you want jquery.sketchable.memento.min.js, jquery.sketchable.min.js, and jsketch.min.js in addition to regular old jQuery. Here's what I did in case anyone else is interested in Seshat.

来自同一页面的注意事项在 main.js 他们使用以下代码块将Sketchable库应用于HTML画布区域：

Notice from the same page that in main.js they apply the Sketchable library to the HTML canvas area with this block of code:

var $canvas = $('#drawing-canvas').sketchable({
  graphics: {
    strokeStyle: "red",
    firstPointSize: 2
  }
});

现在我们来看看他们的 submitStrokes（）函数，了解如何从Sketchable中取出笔划并转换为SCG Ink。行 var strokes = $ canvas.sketchable（'strokes'）; 获取笔画，然后行 strokes = transform（笔画）; 应用快速转换以仅提取所需的数据。这是 transform（）函数供参考：

Now we can take a look at their submitStrokes() function to see how to take the strokes from Sketchable and convert to SCG Ink. The line var strokes = $canvas.sketchable('strokes'); gets the strokes, and then the line strokes = transform(strokes); applies a quick transformation to extract only the data they need. Here's the transform() function for reference:

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函数来处理它：

The value returned fro transform() is a three-dimensional array of strokes and points. (Each element of the first dimension is a stroke, each element of the second dimension is a point, and the third dimension is x-, y-coordinates.) On that site they go ahead and POST that array to the server which must handle the final conversion to SCG Ink. I wrote a JavaScript function to handle it:

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

And that's it. The value returned from strokesToScg() is a string describing a series of strokes in the SCG Ink format.

这篇关于将笔触数据转换为SCG Ink格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！