Skip to content

Graphics

Creates a Graphics

Graphics can be used for any kind of drawing. Use the draw prop to interact with the PIXI.Graphics API.

This will set up a watchEffect internally that will automatically call the event handler again if any dependencies on the render method have changed.

<script lang="ts" setup>
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const size = ref(100)

let count = 0

onTick((delta) => {
  count += delta * 0.025
  size.value = 60 + Math.sin(count) * 30
})
</script>

<template>
  <graphics
    :x="120"
    :y="120"
    @render="graphics => {
      graphics.clear()
      graphics.beginFill(0xDE3249)
      graphics.drawCircle(0, 0, size)
      graphics.endFill()
    }"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const size = ref(100)

let count = 0

onTick((delta) => {
  count += delta * 0.025
  size.value = 60 + Math.sin(count) * 30
})
</script>

<template>
  <graphics
    :x="120"
    :y="120"
    @render="graphics => {
      graphics.clear()
      graphics.beginFill(0xDE3249)
      graphics.drawCircle(0, 0, size)
      graphics.endFill()
    }"
  />
</template>

API

Graphics Attributes

NameTypeDefaultDescription
blend-modeBLEND_MODES.NORMALThe blend mode to be applied to the sprite.
plugin-namestringundefinedThe name of the plugin that is responsible for rendering this element.
tint

string|number|array|object

undefinedThe tint applied to the graphic shape.
is-maskbooleanfalseSets if this Graphics object is a mask.

more props in Container Props and PIXI.Graphics

Graphics Events

NameTypeDescription
renderfunctionCall your drawing functions on the PIXI.Graphics instance here

more events in Container Events

Graphics Slots

NameDescription
defaultThe default slot is used to render the children of the Graphics element.