Graphics

https://pixijs.download/v7.x/docs/PIXI.Graphics.html

Props

prop	description
draw	Draw callback function
geometry	Graphics object

Usage

Result

Loading...

Live Editor

// import React, { useCallback } from 'react'; // import { Stage, Graphics } from '@pixi/react'; function GraphicsExample() { const draw = useCallback((g) => { g.clear(); g.beginFill(0xff3300); g.lineStyle(4, 0xffd900, 1); g.moveTo(50, 50); g.lineTo(250, 50); g.lineTo(100, 100); g.lineTo(50, 50); g.endFill(); g.lineStyle(2, 0x0000ff, 1); g.beginFill(0xff700b, 1); g.drawRect(50, 150, 120, 120); g.lineStyle(2, 0xff00ff, 1); g.beginFill(0xff00bb, 0.25); g.drawRoundedRect(150, 100, 300, 100, 15); g.endFill(); g.lineStyle(0); g.beginFill(0xffff0b, 0.5); g.drawCircle(470, 90, 60); g.endFill(); }, []); return ( <Stage width={600} height={300} options={{ backgroundColor: 0xffffff }}> <Graphics draw={draw} /> </Stage> ); }

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

function GraphicsExample() {
  const draw = useCallback((g) => {
    g.clear();
    g.beginFill(0xff3300);
    g.lineStyle(4, 0xffd900, 1);
    g.moveTo(50, 50);
    g.lineTo(250, 50);
    g.lineTo(100, 100);
    g.lineTo(50, 50);
    g.endFill();
    g.lineStyle(2, 0x0000ff, 1);
    g.beginFill(0xff700b, 1);
    g.drawRect(50, 150, 120, 120);
    g.lineStyle(2, 0xff00ff, 1);
    g.beginFill(0xff00bb, 0.25);
    g.drawRoundedRect(150, 100, 300, 100, 15);
    g.endFill();
    g.lineStyle(0);
    g.beginFill(0xffff0b, 0.5);
    g.drawCircle(470, 90, 60);
    g.endFill();
  }, []);

  return (
    <Stage width={600} height={300} options={{ backgroundColor: 0xffffff }}>
      <Graphics draw={draw} />
    </Stage>
  );
}

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