Javascript 将多个梯形合并为一个形状

我正在做一个项目，用户可以通过添加多个梯形来绘制形状。现在看起来是这样的：

但我喜欢的是删除/隐藏形状内的线条，使其成为单个形状：

这些形状是用3个点{bsup；binf；h；}创建的，它们表示顶线的长度、底线的长度和形状的高度

export const drawPolygonComplex = (ctx, values, inputValues, 
  distanceUnits, displayCote = true) => {
  const hCumul = calcHeight(values);
  const middleX = ctx.canvas.width / 2;
  const middleY = ctx.canvas.height / 2;
  const startY = middleY - hCumul / 2;

  let nbPiece = 0;
  let currentY = startY;

  if (inputValues.length) {
let cotes = [];
for (let key in values) {
  //#region attribution des valeurs pour placer les cotes
  let intKey = parseInt(key);

  let upperLongestValue = values[intKey].b_sup;
  let lowerLongestValue = values[intKey].b_inf;

  if (values.length > 1) {
    if (intKey == 0) {
      if (values[intKey + 1].b_sup) {
        lowerLongestValue =
          values[intKey].b_inf > values[intKey + 1].b_sup
            ? values[intKey].b_inf
            : values[intKey + 1].b_sup;
      }
    } else if (intKey == values.length - 1) {
      upperLongestValue =
        values[intKey].b_sup > values[intKey - 1].b_inf
          ? values[intKey].b_sup
          : values[intKey - 1].b_inf;
    } else {
      lowerLongestValue =
        values[intKey].b_inf > values[intKey + 1].b_sup
          ? values[intKey].b_inf
          : values[intKey + 1].b_sup;
      upperLongestValue =
        values[intKey].b_sup > values[intKey - 1].b_inf
          ? values[intKey].b_sup
          : values[intKey - 1].b_inf;
    }
  }

  let coteUpLeft = { x: middleX - upperLongestValue / 2, y: currentY };
  let coteUpRight = { x: middleX + upperLongestValue / 2, y: currentY };
  let coteDownLeft = { x: middleX - lowerLongestValue / 2, y: currentY + values[key].h };
  let coteDownRight = { x: middleX + lowerLongestValue / 2, y: currentY + values[key].h };
  //#endregion

  //Définir les coins
  let upLeft = { x: middleX - values[key].b_sup / 2, y: currentY };
  let upRight = { x: middleX + values[key].b_sup / 2, y: currentY };
  let downLeft = { x: middleX - values[key].b_inf / 2, y: currentY + values[key].h };
  let downRight = { x: middleX + values[key].b_inf / 2, y: currentY + values[key].h };

  //Dessiner la shape
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'black';
  ctx.fillStyle = ctx.createPattern(HatchPattern(), 'repeat');
  ctx.beginPath();
  ctx.moveTo(upLeft.x, upLeft.y);
  ctx.lineTo(upRight.x, upRight.y);
  ctx.lineTo(downRight.x, downRight.y);
  ctx.lineTo(downLeft.x, downLeft.y);
  ctx.lineTo(upLeft.x, upLeft.y);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();

  if (displayCote) {
    //Placer les cotes
    if (nbPiece % 2 == 0) {
      cotes[intKey + 1] = drawRightCote(
        ctx,
        coteUpRight.x,
        coteDownRight.x,
        coteUpRight.y,
        coteDownRight.y,
        distanceUnits,
        inputValues[key].h,
        1
      );
    } else {
      cotes[intKey + 1] = drawLeftCote(
        ctx,
        coteUpLeft.x,
        coteDownLeft.x,
        coteUpLeft.y,
        coteDownLeft.y,
        distanceUnits,
        inputValues[key].h,
        1
      );
    }
  }

  //Calcul des variables
  currentY += values[key].h;
  nbPiece++;

  if (displayCote) {
    //Cote du haut et du bas
    if (intKey == 0) {
      cotes[0] = drawUpperCote(
        ctx,
        coteUpLeft.x,
        coteUpRight.x,
        startY,
        distanceUnits,
        inputValues[key].b_sup,
        1
      );
    }
    if (intKey == values.length - 1) {
      cotes[values.length + 1] = drawLowerCote(
        ctx,
        coteDownLeft.x,
        coteDownRight.x,
        currentY,
        distanceUnits,
        inputValues[key].b_inf,
        1
      );
      //Cote hauteur
      drawLeftCote(
        ctx,
        middleX - values[0].b_sup / 2,
        coteDownLeft.x,
        startY,
        currentY,
        distanceUnits,
        calcHeight(inputValues),
        2
      );
    }
  }
}

return cotes;

}

---

};

您可以找到一种方法来跟踪连接点，然后清除它们。首先，您需要确定形状连接在一起的位置

const draw梯形=（ctx、x、y、宽度、高度、缩进=0）=>{
ctx.beginPath（）；
ctx.移动到（x+缩进，y）；
ctx.lineTo（x-缩进+宽度，y）；
ctx.lineTo（x+宽度，y+高度）；
ctx.lineTo（x，y+高度）；
ctx.closePath（）；
ctx.stroke（）；
}
const ctx=document.querySelector（'#drawing'）.getContext（'2d'）；
赋值（ctx.canvas，{宽度：300，高度：300}）；
常数
x=20，y=20，
高度=160，宽度=60，
厚度=6；
ctx.线宽=厚度；
ctx.strokeStyle='绿色'；
牵引梯形（ctx，x，y，宽度，20，-10）；
ctx.冲程（x，y+20，宽度，高度-40）；
牵引梯形（ctx，x-10，y+高度-20，宽度+20，20，10）；
常数thickHalf=厚度/2；
ctx.fillStyle='红色'；
ctx.fillRect（x+thickHalf，y-thickHalf+20，宽度-厚度，厚度）；
ctx.fillRect（x+thickHalf，y-thickHalf+height-20，width-thickHalf，thickness）
您必须在另一个画布上绘制所有形状（带有轮廓）。然后擦除形状相交的线条。最后，从画布上抓取绘图数据，并将其写入主画布。如何找到线条的相交处？