画布，去除重叠的线条答案

【问题标题】：Canvas, remove overlapping lines画布，去除重叠的线条
【发布时间】：2021-03-19 22:23:08
【问题描述】：

我正在尝试创建一个自定义形状生成器。我正在使用画布从梯形绘制形状。

其实我的成绩不错：

后面的代码：

const drawPolygon = (info, index) => {
  const { l1, l2, h } = info;

  ctx.beginPath();
  ctx.moveTo(originX, originY);
  ctx.lineTo(originX + l1 / 2, originY);
  ctx.lineTo(originX + l2 / 2, originY + h);
  ctx.lineTo(originX - l2 / 2, originY + h);
  ctx.lineTo(originX - l1 / 2, originY);
  ctx.closePath();
  ctx.stroke();
  originY = originY + h;
};

信息来自数据数组：[{ l1: 200, l2: 200, h: 50 }];

绘图过程运行良好，但我想自动隐藏重叠线，或者更好地合并形状以实现类似的效果： I shape

实际上我有： I shape from generator

我希望它看起来像： Hiding lines

【问题讨论】：

一个想法：用数学方法检测重叠区域并在上面画线。
你可以给你的形状填充假设为白色，然后第二个绘制的形状将隐藏第一个绘制的形状的留置权。
但是第二个形状的顶行仍然会显示

标签： javascript html reactjs canvas html5-canvas

【解决方案1】：

您可以使用ctx.fill() 而不是ctx.stroke()，这样看起来就像您的“I shape”示例。

如果您仍想查看正在绘制的路径，一个想法是向您的方法传递一个布尔值，以防用户想要查看路径：

const drawPolygon = (info, index, showPaths) => {
  const { l1, l2, h } = info;

  ctx.beginPath();
  ctx.moveTo(originX, originY);
  ctx.lineTo(originX + l1 / 2, originY);
  ctx.lineTo(originX + l2 / 2, originY + h);
  ctx.lineTo(originX - l2 / 2, originY + h);
  ctx.lineTo(originX - l1 / 2, originY);
  ctx.closePath();
  ctx.fill();
  if (showPaths) ctx.stroke();
  originY = originY + h;
};

对于颜色，请查看ctx.fillStyle = #2c93b0 和路径颜色：ctx.strokeStyle = #CCC。

showPaths 参数可能是您界面中的复选框。

【讨论】：

谢谢，我想这可以满足我的需要！