Question

我在paper.js中有一个路径，描述了一个字母形式。我通过加载带有opentype.js函数path.toSVG（）;的字体来获得Path。比我通过.importSVG（）将其加载到paper.js;

现在，我对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字体文件。但是，如果我在“字体查看器”中打开字体，则整个“窗体”将被颠倒并且句柄是错误的。它们的位置看似正确，但以某种方式错误的手柄处于应放置另一个的位置...它们似乎已切换。我不知道自己想念什么。

This is how it should look

This is how it looks..

Answer 1

问题如何解决：
如评论中所述，我看到即使在应该具有直线的片段中也没有直线。因此，我检查了坐标并意识到，如果我只是将它们向前推，就会有直线（坐标为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和nr。 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计算手柄的位置。

letter Scale：用于字母缩放，通过将字形的advanceWidth除以scaledAdvanceWith

来计算

y * -1：用于解决上下颠倒的问题。

letterPosCorrectionX和letterPosCorrectionY;是位置的更正（因此它们被移动到字体中的正确位置。）

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

Answer 2

好。根据图像，您至少遇到了2个问题。首先是Y坐标已经反转。

importSVG可能会为您正确处理此问题，但是您需要处理它回来。

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

第二个问题（这是一个猜测）是曲线正在变成直线。

恐怕我真的不能提出建议，除了可能意味着您的曲线检测不正确。

将paper.js路径转换为opentype.js路径

2 个答案: