Преобразовать путь paper.js в путь opentype.js - PullRequest
Новая
       28

Преобразовать путь paper.js в путь opentype.js

0 голосов
/ 14 мая 2019

У меня есть путь в paper.js, который описывает букву. Я получил путь, загрузив шрифт с функцией opentype.js path.toSVG (); чем я загружаю его в paper.js .importSVG ();

Теперь я делаю некоторые манипуляции с paper.js и затем хочу вернуть его в качестве загружаемого файла шрифта. Итак, мой вопрос, есть ли простой способ вернуть его из paper.js в opentype.js?

Edit: Хорошо, я предполагаю, что нет простого пути. Поэтому я попытался преобразовать путь вручную с помощью js: 

for(var i=0; i<fragments.children.length; i++) {

  var glyphName = fragments.children[i].name;

  if (glyphName.indexOf('0x') > -1) {
    var unicode = String.fromCharCode(parseInt(glyphName, 16));
    glyphName = 'uni' + glyphName.charCodeAt(0);
  } else {
    var unicode = glyphName.charCodeAt(0);
  }

  var w = 0;
  var glyphPath = new opentype.Path();

  //Going through the array with the segments of the paper.js Path
  for(var i2 = 0; i2 < fragments.children[i].segments.length; i2++) {

    // handle In
    var x1 = fragments.children[i].segments[i2].handleIn.x;
    var y1 = fragments.children[i].segments[i2].handleIn.y;

    // handle Out
    var x2 = fragments.children[i].segments[i2].handleOut.x;
    var y2 = fragments.children[i].segments[i2].handleOut.y;

    // Point
    var x = fragments.children[i].segments[i2].point.x;
    var y = fragments.children[i].segments[i2].point.y;

    if (i2 === 0) {
       // if its the first segment use move to
       glyphPath.moveTo(x, y);
    } else if(x1==0 && y1==0 && x2 == 0 && y2 == 0) {
       // if there is no curve use line to
       glyphPath.lineTo(x, y);
    } else {
      // use curve if its a curve
      glyphPath.curveTo(x1+x,y1+y, x2+x,y2+y, x,y,);
    }

    if(i2+1 == fragments.children[i].segments.length) {
      glyphPath.close();
    }

    w = Math.max(w, x);
  }


 var glyph = new opentype.Glyph({
    name: fragments.children[i].name,
    unicode: unicode,
    advanceWidth: (w + 1),
    path: glyphPath
 });
}

Это дает мне файл шрифта opentype для загрузки. Однако, если я открываю шрифт в средстве просмотра шрифтов, вся форма переворачивается вверх ногами, а маркеры неверны. Их позиции кажутся правильными, но почему-то неправильные ручки находятся в положении, в котором должен быть другой ... они, кажется, переключаются. Я не могу понять, чего мне не хватает ..

Вот так это должно выглядеть

Вот так это выглядит ..

Ответы [ 2 ]

1 голос
/ 18 мая 2019

Как проблема была решена:
Как уже упоминалось в комментарии, я увидел, что не было прямых линий даже в фрагментах, которые должны иметь прямые линии.Поэтому я проверил координаты и понял, что есть прямые линии (пути с ручкой x1 / y2 и x2 / y2 по координате 0/0), если я просто подтолкну их вперед.

Например: 

      x        y        x1       y1        x2         y2
1:  148.29   92.125     0         0       -1.25     -3.5
2:  140       85      3.93      1.084      0          0
3:   139.99  74.16      0         0       12.95      2.02
4:  159.55    92.1     -1.238    -8.283    0         0

Поэтому мне пришлось изменить цикл for, чтобы фактически смешать дескрипторы последней точки с дескрипторами из реальной точки.

Так что в этом примере Nr.1 и номер3 получит x1: 0, y1: 0 // x2: 0, y2: 0

В моем цикле for я беру x1 / y1 из последнего сегмента: 

// handle In
var x1 = fragmentPathObj.segments[i2-1].handleOut.x * letterScale;
var y1 = fragmentPathObj.segments[i2-1].handleOut.y*-1 * letterScale;
// handle Out
var x2 = fragmentPathObj.segments[i2].handleIn.x * letterScale;
var y2 = fragmentPathObj.segments[i2].handleIn.y*-1 * letterScale;

Если яДля этого я могу проверить наличие прямых линий с помощью: 

if(x1==0 && y1==0 && x2 == 0 && y2 == 0) {
   glyphTempPath.lineTo(x, y);
}

и нарисовать кривые при наличии маркеров: 

var lastX = fragmentPathObj.segments[i2-1].point.x * letterScale  - letterPosCorrectionX;
var lastY = fragmentPathObj.segments[i2-1].point.y*-1 * letterScale  - letterPosCorrectionY;

glyphTempPath.curveTo(x1+lastX, y1+lastY, x2+x, y2+y, x,y);

lastX / lastY: поскольку x1 / y1 идет от последнегосегмент, мне нужно рассчитать положение для маркеров также с x / y последней точки.

Масштаб буквы: используется для масштабирования буквы и рассчитывается путем деления значения advanceWidth глифа на scaledAdvanceWith

y * -1: используется для решения проблемы переворачивания.

letterPosCorrectionX и letterPosCorrectionY;являются поправками для позиции (поэтому они перемещаются в правильную позицию в шрифте.)

Может быть, это может помочь кому-то сэкономить время:)

0 голосов
/ 16 мая 2019

OK. Основываясь на изображениях, у вас есть как минимум 2 проблемы. Во-первых, координаты Y перевернуты.

importSVG, вероятно, справился с этим, чтобы вы правильно вошли, но вам нужно будет справиться с этим, возвращаясь.

Это будет означать итерацию glyphPath во второй раз и изменение значений Y. Похоже, вы уже отслеживаете максимальный Y (или X?), И вам это нужно. И вам, вероятно, также понадобится значение смещения.

Вторая проблема (которая является предположением) состоит в том, что кривые превращаются в линии.

Боюсь, я не могу посоветовать по этому поводу, кроме того, что это, вероятно, означает, что ваше определение кривой неверно.

...