将Paper.js路径转换为OPENTYPE.JS路径

Question

我在纸上有一条路径。我通过加载opentype.js的函数path.tosvg((的字体来获得路径。比我将其加载到paper.js by .importsvg((;

现在，我使用Paper.js进行一些操作，然后将其作为可下载的字体文件重新进行。所以我的问题是，是否有一种简单的方法可以将其从paper.js恢复到opentype.js？

编辑：好吧，我很舒服没有简单的方法。因此，我尝试用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字体文件。但是，如果我在字体观看器中打开字体，则整个表单颠倒了，并且手柄是错误的。它们的位置似乎是对的，但是某种程度上错误的手柄在另一个应该处于另一个位置……它们似乎已切换。我不知道我缺少什么。

这就是应该的外观

这就是外观。

Answer 1

如何解决问题：
正如评论中提到的，我看到，即使在片段中也没有直线的直线。因此，我检查了坐标，并意识到有直线(如果我只是向前推一个，则在坐标为0/0上的手柄x1/y2和x2/y2的路径全部全部(。

例如：

      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循环才能实际获取最后一点的手柄与实际点的混合。

因此，在此示例中。1和nr。3将获得x1：0，y1：0//x2：0，y2：0

在我的循环中，我从最后一段拿出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计算句柄的位置。

字母量表：用于字母的缩放，并通过将字形的前进宽度除以scaledadvancewith

来计算。

y*-1：用于解决倒置问题。

letterposcorrectionx和lottposcorrectiony;是该位置的校正(因此它们被移至字体中的正确位置。(

也许这可以帮助某人节省一些时间：(

Answer 2

好。根据图像，您至少有2个问题。首先是y坐标倒了。

importsvg可能为您正确进行处理，但是您需要处理它。

这将意味着第二次迭代字形并逆转y值。看起来您已经在跟踪最大Y(或X？(，您将需要。而且您可能还需要一个偏移值。

第二个问题(这是一个猜测(是曲线正在变成线路。

恐怕我无法真正建议这样做，除了可能意味着您的曲线检测不正确。