canvas Paths.tsx

57.89% Statements 11/19

30% Branches 3/10

66.66% Functions 2/3

55.55% Lines 10/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31  
 
 
 
 
 
1x
2x
2x
 
2x
2x
2x
2x
1x
 
 
1x
 
 
 
 
 
 
 
 
 
 
2x
 
  import React, { useEffect } from 'react';
import { getStroke } from 'perfect-freehand';
import { useStore } from '../store';
import { useOptionStore } from '../options';
import { getSvgPathFromStroke } from '../utils';
 
export const Paths = () => {
  const data = useStore();
  const { container, ...option } = useOptionStore();
 
  const canvas = container as unknown as HTMLCanvasElement;
  const ctx = canvas?.getContext('2d');
  useEffect(() => {
    if (!canvas) return;
    Iif (ctx) {
      ctx?.clearRect(0, 0, canvas.width || 0, canvas.height || 0);
    }
    Object.keys(data).forEach((key, index) => {
      const stroke = getStroke(data[key], option);
      const pathData = getSvgPathFromStroke(stroke);
      if (ctx) {
        const myPath = new Path2D(pathData);
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.fill(myPath);
      }
    });
  }, [data, canvas, option]);
  return null;
};