Graphics

Creates a PIXI.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
  x={200}
  y={200}
  draw={(graphics) => {
    graphics.clear()
    graphics.beginFill(0xde3249)
    graphics.drawCircle(0, 0, size)
    graphics.endFill()
  }}
/>

Component API

Props

Name Type Default 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 number 0xffffff 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
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