Next.js中使用Canvas绘制JSON多边形时出现互相连接问题如何解决？

我正尝试从一个较大的JSON文件生成多个独立多边形，预期各多边形相互分离，但实际绘制结果却出现了互相连接的问题。

问题原因 #

你把所有多边形的坐标点合并成了一个一维数组，且整个绘制流程仅调用了一次beginPath()，Canvas会按顺序连接数组内所有坐标点，不同多边形的首尾点也会被连起来，就出现了多余的连线。

修复方案 #

需要为每个独立多边形单独执行路径创建逻辑，修改两处代码即可：

修改 index.tsx #

不要合并分组的坐标数组，直接将每个多边形的坐标分组传递给组件：

import React, { ReactElement } from 'react'
import Canvas from '../components/Canvas';
import data from '../public/11_regions-copy.json'

export const getServerSideProps = async () => {
  const polygonXList: number[][] = []
  const polygonYList: number[][] = []

  for (let i = 0; i < Object.keys(data).length; i++) {
    polygonXList.push(data[i].all_points_x)
    polygonYList.push(data[i].all_points_y)
  }

  return {
    props: { polygonXList, polygonYList },
  }
}

function Home({ polygonXList, polygonYList }: any): ReactElement {
  return (
    <div>
      <Canvas 
        width={1680} 
        height={756} 
        polygonXList={polygonXList} 
        polygonYList={polygonYList} 
      />
    </div>
  )
}

export default Home

修改 Canvas.tsx #

循环遍历每个多边形，单独执行路径绘制流程：

import React, { useRef, useEffect } from 'react'

const Canvas = props => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const context = canvas.getContext('2d')
    if (!context) return

    context.fillStyle = '#FF0000'
    // 每个多边形单独开路径绘制
    props.polygonXList.forEach((xPoints: number[], index: number) => {
      const yPoints = props.polygonYList[index]
      context.beginPath()
      xPoints.forEach((pointx, i) => {
        context.lineTo(0.25 * pointx, 0.25 * yPoints[i])
      })
      context.closePath()
      context.fill()
    })
  }, [props.polygonXList, props.polygonYList])
  
  return <canvas 
    ref={canvasRef} 
    {...props} 
    width={props.width} 
    height={props.height} 
    style={{ zIndex: 20, position: 'absolute', objectFit: 'contain' }}
  />
}

export default Canvas

内容的提问来源于stack exchange，提问作者hisam