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

Question

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

javascriptsvg

5

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

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;

}

- nicholaswmin

2个回答

0

你可以使用De Casteljau算法将贝塞尔曲线分解成更小的直线段，并将它们连接起来创建多边形。

这里是一些关于De Casteljau算法的参考资料。

- Scarecrow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Timo Kähkönen · Accepted Answer

我猜你是想将某种SVG路径转换为多边形。

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

SVG路径可以由十个不同的线段组成，如果考虑相对和绝对坐标，则有20个。它们被表示为path元素的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窗口）。

当所有路径段都转换为立方曲线后，它们可以转换为单独的线段。有几种方法，最好的方法似乎是一个自适应递归细分方法，它在曲线的转弯处产生更多的线段，在曲线的其他部分产生较少的线段，以实现曲线保真度和低线段计数的平衡，但不幸的是，它不能处理所有共线的情况。我成功地将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。如果我们结合这两种方法，我们可以创建一个将ANY svg路径元素转换为多边形（单个或多个子多边形）的函数。我不能100％确定这是最佳或最快的方法，但它应该是可用的。当然，最好的方法是原生浏览器实现...