javascript - 将 SVG 路径转换为多边形以便在 Javascript Clipper 中使用

Question

我正在尝试使用 JS Clipper 对 SVG 路径(包含二次和三次贝塞尔曲线)执行 bool 运算.

JS Clipper从多边形开始然后执行操作，然后似乎将它们转换回 SVG 路径。

下面的函数给出了一个 SVG 路径，但下面的例子以 2 个多边形开始。

示例函数:

// Polygon Arrays are expanded for better readability

function clip() {
  var subj_polygons = [
    [{
      X: 10,
      Y: 10
    }, {
      X: 110,
      Y: 10
    }, {
      X: 110,
      Y: 110
    }, {
      X: 10,
      Y: 110
    }],
    [{
      X: 20,
      Y: 20
    }, {
      X: 20,
      Y: 100
    }, {
      X: 100,
      Y: 100
    }, {
      X: 100,
      Y: 20
    }]
  ];

  var clip_polygons = [
    [{
      X: 50,
      Y: 50
    }, {
      X: 150,
      Y: 50
    }, {
      X: 150,
      Y: 150
    }, {
      X: 50,
      Y: 150
    }],
    [{
      X: 60,
      Y: 60
    }, {
      X: 60,
      Y: 140
    }, {
      X: 140,
      Y: 140
    }, {
      X: 140,
      Y: 60
    }]
  ];

  var scale = 100;
  subj_polygons = scaleup(subj_polygons, scale);
  clip_polygons = scaleup(clip_polygons, scale);

  var cpr = new ClipperLib.Clipper();
  cpr.AddPolygons(subj_polygons, ClipperLib.PolyType.ptSubject);
  cpr.AddPolygons(clip_polygons, ClipperLib.PolyType.ptClip);

  var subject_fillType = ClipperLib.PolyFillType.pftNonZero;
  var clip_fillType = ClipperLib.PolyFillType.pftNonZero;
  var clipTypes = [ClipperLib.ClipType.ctUnion];
  var clipTypesTexts = "Union";
  var solution_polygons, svg, cont = document.getElementById('svgcontainer');

  var i;
  for (i = 0; i < clipTypes.length; i++) {
    solution_polygons = new ClipperLib.Polygons();
    cpr.Execute(clipTypes[i], solution_polygons, subject_fillType, clip_fillType);
    console.log(polys2path(solution_polygons, scale));
  }

}

// helper function to scale up polygon coordinates
function scaleup(poly, scale) {
  var i, j;
  if (!scale) scale = 1;
  for (i = 0; i < poly.length; i++) {
    for (j = 0; j < poly[i].length; j++) {
      poly[i][j].X *= scale;
      poly[i][j].Y *= scale;
    }
  }
  return poly;
}

// converts polygons to SVG path string
function polys2path(poly, scale) {
  var path = "",
    i, j;
  if (!scale) scale = 1;
  for (i = 0; i < poly.length; i++) {
    for (j = 0; j < poly[i].length; j++) {
      if (!j) path += "M";
      else path += "L";
      path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
    }
    path += "Z";
  }
  return path;

}

Answer 1

我假设您指的是某种 svg 多边形转换路径。

我搜索了很多，但没有找到任何可靠且开箱即用的解决方案。

SVG 路径可以包含十个不同的段，如果我们同时考虑相对和绝对坐标，则可以包含 20 个。它们在路径元素的 d 属性中表示为字母:相对的是 mhvlcqastz，绝对的是 MHVLCQASTZ。每个都有不同的属性，a(椭圆弧)是最复杂的一个。最有用和最灵活的类型是 c(三次贝塞尔曲线)，因为它可以以相当高的精度表示所有其他类型，如这些示例所示:http://jsbin.com/oqojan/32 , http://jsbin.com/oqojan/42 .

Raphael JS 库有Path2Curve 功能，可以将所有路径段转换为三次曲线，也可以处理复杂的圆弧到三次曲线的转换。不幸的是它有一个错误，因此它无法处理所有可能的路径段组合，但幸运的是有一个固定版本的库可用:http://jsbin.com/oqojan/32/edit (查看 Javascript 窗口)。

当所有路径段都转换为三次曲线后，它们可以转换为单独的线段。方法很少，最好的似乎是an adaptive recursive subdivision method ，它在曲线的急转弯处产生更多的线段，在曲线的其他部分产生更少的线段，以实现曲线保真度和线段数量少的平衡，从而最大限度地提高渲染速度，但不幸的是，它无法处理所有共线情况。我成功地将 AntiGrain 的方法转换为 Javascript 并添加了预拆分功能，它在局部极值(一阶导数根)中拆分曲线，之后 AntiGrain 方法还处理所有可能的共线情况:

水平共线:http://jsbin.com/ivomiq/6
一组不同的案例:http://jsbin.com/ivomiq/7
随机:http://jsbin.com/ivomiq/8
共线旋转:http://jsbin.com/ivomiq/9

所有上述样本都有两条路径相互重叠，以显示自适应算法中可能存在的错误:红色曲线是使用非常慢的蛮力方法分割的，绿色曲线是使用 AntiGrain 方法分割的。如果您根本看不到红色，则表明 AntiGrain 的方法 approximate()-function 正在按预期工作。

好的，现在我们已经修复了 Raphael 和 AntiGrain。如果我们结合这两种方法，我们可以创建一个函数，将任何 svg 路径元素转换为多边形(单个或多个子多边形)。我不是 100% 确定这是最好或最快的方法，但它应该可用。当然最好的是 native 浏览器实现...