如何避免消除画布中两个多边形的交集？

问题描述

我正在画布上执行绘图操作，问题是当我在另一个图形上绘制一个图形时，有时删除了相交而有时没有删除，我不知道为什么要这样做。我该如何解决这个问题，又如何使两个警察结合起来？

我的代码：

if (points.length !== 0) {
  console.log(points)
  const canvas = canvRef.current
  const ctx = canvas.getContext("2d")
  ctx.beginPath()
  ctx.clearRect(0,ctx.canvas.clientWidth,ctx.canvas.clientHeight)

  if (points[points.length - 1].completed) {
    points.forEach((point) => {
      ctx.moveto(point.points[0].x,point.points[0].y)
      point.points.forEach((internalPoint,index) => {
        if (index !== 0) ctx.lineto(internalPoint.x,internalPoint.y)
      })
    })

    ctx.closePath()
    ctx.fillStyle = "rgba(20,117,255,0.5)"
    ctx.fill()
  } else {
    ctx.beginPath()
    ctx.clearRect(0,ctx.canvas.clientHeight)
    points.forEach((point,index,array) => {
      if (index !== array.length - 1) {
        ctx.moveto(point.points[0].x,point.points[0].y)
        point.points.forEach((internalPoint,internalIndex) => {
          if (internalIndex !== 0) ctx.lineto(internalPoint.x,internalPoint.y)
        })
      }
    })
    ctx.fillStyle = "rgba(20,0.5)"
    ctx.fill()
    ctx.beginPath()
    ctx.strokeStyle = "#1475FF"
    ctx.stroke()
    ctx.beginPath()
    ctx.strokeStyle = "#ffffff"
    ctx.linewidth = 4
    ctx.setLineDash([])
    ctx.arc(
      points[points.length - 1].points[0].x,points[points.length - 1].points[0].y,5,2 * Math.PI,false
    )
    ctx.fillStyle = "#1475FF"
    ctx.stroke()
    ctx.fill()
    ctx.setLineDash([])
    ctx.moveto(
      points[points.length - 1].points[0].x,points[points.length - 1].points[0].y
    )
    points[points.length - 1].points.forEach((point,index) => {
      if (index !== 0) ctx.lineto(point.x,point.y)
    })
    ctx.linewidth = 2
    ctx.strokeStyle = "#1475FF"
    ctx.stroke()
    ctx.closePath()
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）