Skip to main content

Graphics

https://pixijs.download/dev/docs/PIXI.Graphics.html

Props

propdescription
drawDraw callback function
geometryGraphics object

Usage

Live Editor
Result
Loading...

The draw prop

Note that the draw callback gets called everytime the prop changes, make sure to memoize the callback with React.useCallback:

import React, { useCallback } from 'react';
import { Graphics } from '@pixi/react';

function Rectangle(props) {
const draw = useCallback(
(g) => {
g.clear();
g.beginFill(props.color);
g.drawRect(props.x, props.y, props.width, props.height);
g.endFill();
},
[props],
);

return <Graphics draw={draw} />;
}

The geometry prop

Provides another Graphics object as a template. Helps in reducing memory footprint if the same shapes are used repeatedly.

import React, { useCallback } from 'react';
import { Graphics } from '@pixi/react';

function Rectangle(props) {
const draw = useCallback((g) => {
g.clear();
g.lineStyle(props.lineWidth, props.color);
g.drawRect(
props.lineWidth,
props.lineWidth,
props.width - 2 * props.lineWidth,
props.height - 2 * props.lineWidth
);
}, [props]);

return <Graphics draw={draw} />
}

function Grid(props) {
const rect = useRef();
const [mounted, setMounted] = React.useState(false);

React.useEffect(() => {
setMounted(true);
}, []);

return (
<>
{/* create the graphics component here */}
<Rectangle ref={rect}>

{/* make sure to wait till `Rectangle` is mounted */}
{/* geometry can only be set during component creation */}
{mounted && (
<>
<Graphics x={0} y={0} geometry={rect.current} />
<Graphics x={props.width} y={0} geometry={rect.current} />
<Graphics x={0} y={props.height} geometry={rect.current} />
<Graphics x={props.width} y={props.height} geometry={rect.current} />
</>
)}
</>
);
}

Example