任意多个的凸包以及具体的需求

最新推荐文章于 2022-08-30 18:08:13 发布

newway007

最新推荐文章于 2022-08-30 18:08:13 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

分类专栏： js基础文章标签：线性代数算法

本文链接：https://blog.csdn.net/newway007/article/details/109310011

js基础专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何通过计算凸包来包裹路口和路段区域的方法，并讨论了如何将这些区域的图形进行美观放大的技巧。

刚刚有一个需求，就是想要把路口和路段的区域包裹起来，并且按照它的图形的形状往外扩大一些。（为了美观）

首先是一连串点坐标的凸包的计算。

先找到坐标点中x轴最小的一个点，这个一定是这个多边形的一个顶点。然后这个点a和任意一个点的所构成的向量，其他的点都在它的一侧，那么另一个点b也是多边形的一个顶点。否则，则不是。然后将b与剩下的任意一个点构成的向量，判断其他点是否在同一侧。这样就可以顺序得到所有多边形的点。

这就是凸包。

图形扩大的问题。

首先先找到这个多边形的中心。这个中心与每个顶点的向量放大固定倍数。

https://blog.csdn.net/slzs_zyt/article/details/81068783

      const waveScaleY = d3.scaleLinear().range([0, waveHeight]).domain([0, 1]);
      const data = [];
      console.log(waveClipCount, 'waveClipCount')
      for (let i = 0; i <= 40 * waveClipCount; i += 1) {
        data.push({ x: i / (40 * waveClipCount), y: i / 40 });
      }

      // The clipping wave area.
      const clipArea = d3
        .area()
        .x((d: any) => waveScaleX(d.x))
        .y0((d: any) => {
          return (
            waveScaleY(
              Math.sin(
                Math.PI * 2 * waveOffset * -1 +
                Math.PI * 2 * (1 - waveCount) +
                d.y * 2 * Math.PI
              )
            ) - fillCircleRadius
          );
        })
        .y1((d: any) => fillCircleRadius + waveHeight);
        console.log(fillCircleRadius + waveHeight,'fillCircleRadius + waveHeight');
      const waveGroup = g
        .append('defs')
        .append('clipPath')
        .attr('id', `clipWave${area.region_code}`);
      const wave = waveGroup
        .append('path')
        .datum(data)
        .attr('d', clipArea)
        .attr('T', 0);

      // The inner circle with the clipping wave attached.
      const fillCircleGroup = g
        .append('g')
        .attr('clip-path', `url(#clipWave${area.region_code})`);
      fillCircleGroup
        .append('circle')
        .attr('cx', 0)
        .attr('cy', 0)
        .attr('r', fillCircleRadius)
        .style('fill', '#5290FF');