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 32 | 1x 11x 11x 8x 1x 8x 8x 8x 8x 8x 8x | import React, { Fragment } 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();
return (
<Fragment>
{Object.keys(data).map((key, index) => (
<CreatePath key={key} keyName={key} index={index} data={data[key]} />
))}
</Fragment>
);
};
type CreatePathProps = {
data: number[][];
keyName: string;
index: number;
};
const CreatePath = ({ data = [], index, keyName }: CreatePathProps) => {
const { renderPath, container, ...options } = useOptionStore();
const stroke = getStroke(data, options);
const pathData = getSvgPathFromStroke(stroke);
const dom = renderPath ? renderPath(pathData, keyName, data, index, container as unknown as SVGSVGElement) : null;
Iif (dom) return dom;
return <path d={pathData} />;
};
|