Graphics

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

Usage

<script>
  import { onMount } from 'svelte'
  import { Graphics, onTick } from 'svelte-pixi'

  let size = 100
  let counter = 0

  onTick((delta) => {
    counter += delta * 0.025

    size = 100 + Math.sin(counter) * 50
  })
</script>

<Graphics
  draw={(graphics) => {
    graphics.clear()
    graphics.beginFill(0xde3249)
    graphics.drawCircle(0, 0, size)
    graphics.endFill()
  }}
/>

API

Props

Name	Description
blendMode	PIXI.BLEND_MODES The blend mode to be applied to the graphic shape. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode. Note that, since each primitive in the GraphicsGeometry list is rendered sequentially, modes such as PIXI.BLEND_MODES.ADD and PIXI.BLEND_MODES.MULTIPLY will be applied per-primitive.
draw	(graphics: Graphics) => any Call your drawing functions on the PIXI.Graphics instance here
instance	PIXI.Graphics The PIXI.Graphics instance. Can be set or bound to.
pluginName	string Renderer plugin for batching
tint 0xffffff	number The tint applied to each graphic shape. This is a hex value. A value of 0xFFFFFF will remove any tint effect.

Additional props are passed on to Container

Slots

Name	Props	Fallback
default	{}

Events

Name	Type	Detail
added	forwarded
click	forwarded
create	forwarded
globalmousemove	forwarded
globalpointermove	forwarded
globaltouchmove	forwarded
mousedown	forwarded
mousemove	forwarded
mouseout	forwarded
mouseover	forwarded
mouseup	forwarded
mouseupoutside	forwarded
pointercancel	forwarded
pointerdown	forwarded
pointermove	forwarded
pointerout	forwarded
pointerover	forwarded
pointertap	forwarded
pointerup	forwarded
pointerupoutside	forwarded
removed	forwarded
removedFrom	forwarded
rightclick	forwarded
rightdown	forwarded
rightup	forwarded
rightupoutside	forwarded
tap	forwarded
touchcancel	forwarded
touchend	forwarded
touchendoutside	forwarded
touchmove	forwarded
touchstart	forwarded