Преобразование данных обводки в формат SCG Ink

Я хотел бы использовать Seshat — анализатор рукописных математических выражений — для проекта, над которым я работаю, но у меня возникли проблемы с пониманием того, как предоставить программе правильный ввод, файл InkML или SCG Ink.

Я долго просматривал онлайн-пример, который существует здесь, и вижу, что они получить массив информации об штрихе Javascript из поля HTML Canvas с помощью эта библиотека JS применяется, но я не знаю, что происходит с этим массивом после того, как он будет отправлен на их сервер.

Я прочитал спецификацию чернил SCG и думаю, что это может быть относительно легко разобрать массив в формат, но я надеюсь, что мне не хватает чего-то очевидного, что сделало бы это тривиальным. Любая помощь будет принята с благодарностью.


javascript parsing mathematical-expressions inkml
person anthonybrice    schedule 06.11.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я отправил электронное письмо автору Seshat, и он предложил мне преобразовать входные данные в SCG Ink, что оказалось довольно просто, если взять библиотеки JavaScript, используемые по адресу http://cat.prhlt.upv.es/mer/.. В частности, вам нужны jquery.sketchable.memento.min.js, jquery.sketchable.min.js и jsketch.min.js в дополнение к обычному старому jQuery. Вот что я сделал на случай, если кого-то еще заинтересует Сешат.

Обратите внимание на той же странице, что в 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.

person anthonybrice    schedule 03.12.2015
comment
в качестве дополнительной информации к ответу есть также не jquery версия библиотеки jsketch - person Kuanysh; 02.10.2019