CODEWITHSUNDEEP
cssreactjsnext.jshtml5-canvaspolygon
hisam
hisam

Reputation: 1629

HTML Canvas, Polygons are connected each other

I am trying to generating multiple polygon from a quite large json file. The polygon should separate each other, but it somehow connected each other.

polygons

I am building it in next.js.

Here are the codes:

Canvas.tsx

// ../components/Canvas.tsx

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

const Canvas = props => {
  
  const canvasRef = useRef(null)
  
  useEffect(() => {
    const canvas: any = canvasRef.current
    const context = canvas.getContext('2d')

    context.fillStyle = '#FF0000'
    context.beginPath()
    { props.x.map((pointx, i) => context.lineTo(0.25 * pointx, 0.25 * props.y[i])) } // I scaled it to 0.25 (25% original size)
    context.closePath()
    context.fill()
  }, [])
  
  return <canvas ref={canvasRef} {...props} width={props.width} height={props.height} style={{ zIndex: 20, position: 'absolute', objectFit: 'contain' }}/>
}

export default Canvas

index.tsx

import React, { ReactElement, useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import dynamic from "next/dynamic";
import data from '../public/11_regions-copy.json'
import Canvas from '../components/Canvas';


export const getServerSideProps = async () => {

  let xTemp: any[] = []
  let yTemp: any[] = []

  for (var i = 0; i < Object.keys(data).length; i++) {
    xTemp.push(data[i].all_points_x)
    yTemp.push(data[i].all_points_y)
  }
  for (var j = 0; j < Object.keys(data).length; j++) {
    let xArray = xTemp[j]
    xArray.push(xArray[0])

    let yArray = yTemp[j]
    yArray.push(yArray[0])
  }
  
  let x = [].concat.apply([], xTemp);
  let y = [].concat.apply([], yTemp);


  return {
    props: {
      x,
      y
    },
  }
}

function Home({ x, y, xTemp1, yTemp1 }: any): ReactElement {

  return (
    <div>
      <Canvas width={1680} height={756} x={x} y={y} />
    </div>
  )
}

export default Home

the json file: json

Anyone have any ideas?

Upvotes: 2

Views: 236

Answers (1)

Yoshi
Yoshi

Reputation: 54649

The error results as a consequence of you merging all regions from your data source into one long path. This happens in getServerSideProps (which is a bit clunky btw.).

So, your data looks like this:

{
    "0": {

        "all_points_x": [ ... ],
        "all_points_y": [ ... ]
    },
    "1": {
        "all_points_x": [ ... ],
        "all_points_y": [ ... ]
    },
    // ...
}

Your getServerSideProps makes this:

{
    props: {
        x: [ ... ],
        y: [ ... ],
    }
}

Which you then draw as one long path here:

context.beginPath()
{ props.x.map((pointx, i) => context.lineTo(0.25 * pointx, 0.25 * props.y[i])) }
context.closePath()
context.fill()

If you stop doing that, and simply draw each region as a separate path, you'll get what you want:

// here `data` would be something like:
// const data = await (await fetch('11_regions-copy.json')).json();

Object.values(data).forEach(({all_points_x: x, all_points_y: y}) => {
  ctx.beginPath();

  x.forEach((x, i) => {
    ctx.lineTo(0.25 * x, 0.25 * y[i]);
  });

  ctx.closePath();
  ctx.fill();
});

enter image description here

With regards to Kaiido's comment, you might consider drawing one path, by utilizing moveTo

ctx.beginPath();

Object.values(data).forEach(({all_points_x: x, all_points_y: y}) => {
  ctx.moveTo(0.25 * x[0], 0.25 * y[0]);

  x.forEach((x, i) => {
    ctx.lineTo(0.25 * x, 0.25 * y[i]);
  });
});

ctx.closePath();
ctx.fill();

Upvotes: 2

Related Questions