将两个基于贝塞尔曲线的形状合并为一个以创建新轮廓

Question

假设我有数据来渲染两个重叠的基于贝塞尔曲线的形状，它们重叠，显示在 svg 或 canvas 上（在哪里并不重要）。我想计算由两个形状合并产生的形状轮廓，以便我有一个干净的（新的）轮廓以及尽可能少的节点和手柄。我想实现 adobe illustrator 等矢量程序通过 Pathfinder > Add 或字体程序 glyphs[= 提供的效果26=] 与 删除重叠 。示例：https://helpx.adobe.com/illustrator/using/combining-objects.html

是否有可能用于该任务的库或概念？我在浏览器中使用 javascript，但有关如何进行此类计算的任何其他来源也会有所帮助。

同样重要的是，此计算发生在渲染之前，与渲染结果不可知（svg/canvas）。

在下图中，左侧是输入形状。右边是预期的结果。我有数据，即所有节点和手柄（来自贝塞尔曲线），我想计算右侧的红色（节点）和绿色点（手柄）的坐标。

Answer 1

Paper.js 可能是完成此任务的完美库：
特别是 Boolean operations – 就像 unite() 一样合并路径元素。语法看起来像这样：

let unitedPath = items[0].unite(items[1]);

以下示例还使用了 Jarek Foksa 的 pathData polyfill。

示例：联合路径：

const svg = document.querySelector("#svgunite");
const btnDownload = document.querySelector("#btnDownload");
const decimals = 1;
// set auto ids for processing
function setAutoIDs(svg) {
  let svgtEls = svg.querySelectorAll(
    "path, polygon, rect, circle, line, text, g"
  );
  svgtEls.forEach(function(el, i) {
    if (!el.getAttribute("id")) {
      el.id = el.nodeName + "-" + i;
    }
  });
}
setAutoIDs(svg);

function shapesToPathMerged(svg) {
  let els = svg.querySelectorAll('path, rect, circle, polygon, ellipse ');
  let pathsCombinedData = '';
  let className = els[1].getAttribute('class');
  let id = els[1].id;
  let d = els[1].getAttribute('d');
  let fill = els[1].getAttribute('fill');

  els.forEach(function(el, i) {
    let pathData = el.getPathData({
      normalize: true
    });
    if (i == 0 && el.nodeName.toLowerCase() != 'path') {
      let firstTmp = document.createElementNS("http://www.w3.org/2000/svg", 'path');
      let firstClassName = els[1].getAttribute('class');
      let firstId = el.id;
      let firstFill = el.getAttribute('fill');
      firstTmp.setPathData(pathData);
      firstTmp.id = firstId;
      firstTmp.setAttribute('class', firstClassName);
      firstTmp.setAttribute('fill', firstFill);
      svg.insertBefore(firstTmp, el);
      el.remove();
    }
    if (i > 0) {
      pathData.forEach(function(command, c) {
        pathsCombinedData += ' ' + command['type'] + '' + command['values'].join(' ');
      });
      el.remove();
    }
  })
  let pathTmp = document.createElementNS("http://www.w3.org/2000/svg", 'path');
  pathTmp.id = id;
  pathTmp.setAttribute('class', className);
  pathTmp.setAttribute('fill', fill);
  pathTmp.setAttribute('d', pathsCombinedData);
  svg.insertBefore(pathTmp, els[0].nextElementSibling);
};

shapesToPathMerged(svg);


function unite(svg) {
  // init paper.js and add mandatory canvas
  canvas = document.createElement('canvas');
  canvas.id = "canvasPaper";
  canvas.setAttribute('style', 'display:none')
  document.body.appendChild(canvas);
  paper.setup("canvasPaper");

  let all = paper.project.importSVG(svg, function(item, i) {
    let items = item.getItems();
    // remove first item not containing path data
    items.shift();
    // get id names for selecting svg elements after processing
    let ids = Object.keys(item._namedChildren);

    if (items.length) {
      let lastEl = items[items.length - 1];
      // unite paper.js objects
      let united = items[0].unite(lastEl);
      // convert united paper.js object to svg pathData
      let unitedData = united
        .exportSVG({
          precision: decimals
        })
        .getAttribute("d");
      let svgElFirst = svg.querySelector('#' + ids[0]);
      let svgElLast = svg.querySelector('#' + ids[ids.length - 1]);
      // overwrite original svg path
      svgElFirst.setAttribute("d", unitedData);
      // delete united svg path
      svgElLast.remove();
    }
  });
  // get data URL
  getdataURL(svg)

}

function getdataURL(svg) {
  let markup = svg.outerHTML;
  markupOpt = 'data:image/svg+xml;utf8,' + markup.replaceAll('"', '\'').
  replaceAll('\t', '').
  replaceAll('\n', '').
  replaceAll('\r', '').
  replaceAll('></path>', '/>').
  replaceAll('<', '%3C').
  replaceAll('>', '%3E').
  replaceAll('#', '%23').
  replaceAll(',', ' ').
  replaceAll(' -', '-').
  replace(/ +(?= )/g, '');

  let btn = document.createElement('a');
  btn.href = markupOpt;
  btn.innerText = 'Download Svg';
  btn.setAttribute('download', 'united.svg');
  document.body.insertAdjacentElement('afterbegin', btn);
  return markupOpt;
}

svg{
  display:inline-block;
  width:10em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.3/path-data-polyfill.min.js"></script>


<p>
  <button type="button" onclick="unite(svg)">Subtract Path </button>
</p>
<svg class="svgunite" id="svgunite" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" stroke-width="1" stroke="#000">
<path fill="none" d="M50.05 23.21l-19.83 61.51h-9.27l23.6-69.44h10.82l23.7 69.44h-9.58l-20.44-61.51h1z"/>
<rect fill="none" x="35.49" y="52.75" width="28.5" height="6.17">
</rect>
</svg>

可选：路径规范化（使用 getPathData() polyfill）

您可能还需要转换 svg 图元（<rect>、<circle>、<polygon>），例如大写 A 中的横线。

pathData polyfill提供了normalizing svg elements.
的方法此规范化将输出一个 d 属性（对于每个选定的 svg 子元素）仅包含 简化的立方路径命令集（M、C、L、Z） – 全部基于绝对坐标.

小郁闷：
我不会说 paper.js 可以吹嘘过多的教程或详细示例。但是您可以检查 reference for pathItem to see all options.

另请参阅：

将两个基于贝塞尔曲线的形状合并为一个以创建新轮廓

Merging two bezier-based shapes into one to create a new outline

javascript

math

svg

vector

geometry

示例：联合路径：

可选：路径规范化（使用 getPathData() polyfill）