纸张JS减去路径结果为空

如何解决纸张JS减去路径结果为空

我是PaperJs的新手，我正尝试减去2条SVG路径。

该html包含两个svg，svg1和svg2都包含路径。

function SVGPath(elem){
    var a = new paper.Path(paper.project.importSVG(elem));
    elem.parentNode.removeChild(elem);
    return a;
}

window.onload = function() {
    paper.setup('canvas');

    var svg1 = document.getElementById('svg1')
    var path1 = SVGPath(svg1);
    path1.fillColor = "red"
    path1.position = new paper.Point(0,0);


    var svg2 = document.getElementById('svg2')
    var path2 = SVGPath(svg2);
  path2.fillColor = 'green'
    path2.position = new paper.Point(0,0);

    var result = path1.subtract(path2)
    result.position = new paper.Point(10,10)
}

https://jsfiddle.net/820c3sw4/4/

我正在尝试减去路径，以便将结果绘制到画布上。

导出的结果似乎没有所有路径。

<path d="" fill="#008000" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"></path>

PaperJs文档-http://paperjs.org/reference/path/#subtract-path

此致

解决方法

当您导入SVG节点时，paperjs会尝试保留svg的文档结构。这意味着顶级标签将作为组对象导入，并且其中的所有标签都将作为嵌套组导入。

您需要进入嵌套组内部的路径以进行减法。

例如：

function SVGPath(elem){
  let importedSVG = paper.project.importSVG(elem);
  let innerGroup = importedSVG.children[0];
  let actualPath = innerGroup.children[0];
  elem.parentNode.removeChild(elem);
  return actualPath;
}

https://jsfiddle.net/vs3y751m/1/

还要注意，路径2几乎是一条直线，中间有很多点，但是减法（也包括并集等）仅适用于具有面积的路径。因此，在这种情况下，路径1-路径2将只是路径1（类似于a-0 = a的算术运算）。

subtraction demo