Skip to content

Simple

<script lang="ts" setup>
import { Graphics } from 'pixi.js'

function onDraw(graphics: Graphics) {
// Rectangle
  graphics.beginFill(0xDE3249)
  graphics.drawRect(50, 50, 100, 100)
  graphics.endFill()

  // Rectangle + line style 1
  graphics.lineStyle(2, 0xFEEB77, 1)
  graphics.beginFill(0x650A5A)
  graphics.drawRect(200, 50, 100, 100)
  graphics.endFill()

  // Rectangle + line style 2
  graphics.lineStyle(10, 0xFFBD01, 1)
  graphics.beginFill(0xC34288)
  graphics.drawRect(350, 50, 100, 100)
  graphics.endFill()

  // Rectangle 2
  graphics.lineStyle(2, 0xFFFFFF, 1)
  graphics.beginFill(0xAA4F08)
  graphics.drawRect(530, 50, 140, 100)
  graphics.endFill()

  // Circle
  graphics.lineStyle(0) // draw a circle, set the lineStyle to zero so the circle doesn't have an outline
  graphics.beginFill(0xDE3249, 1)
  graphics.drawCircle(100, 250, 50)
  graphics.endFill()

  // Circle + line style 1
  graphics.lineStyle(2, 0xFEEB77, 1)
  graphics.beginFill(0x650A5A, 1)
  graphics.drawCircle(250, 250, 50)
  graphics.endFill()

  // Circle + line style 2
  graphics.lineStyle(10, 0xFFBD01, 1)
  graphics.beginFill(0xC34288, 1)
  graphics.drawCircle(400, 250, 50)
  graphics.endFill()

  // Ellipse + line style 2
  graphics.lineStyle(2, 0xFFFFFF, 1)
  graphics.beginFill(0xAA4F08, 1)
  graphics.drawEllipse(600, 250, 80, 50)
  graphics.endFill()

  // draw a shape
  graphics.beginFill(0xFF3300)
  graphics.lineStyle(4, 0xFFD900, 1)
  graphics.moveTo(50, 350)
  graphics.lineTo(250, 350)
  graphics.lineTo(100, 400)
  graphics.lineTo(50, 350)
  graphics.closePath()
  graphics.endFill()

  // draw a rounded rectangle
  graphics.lineStyle(2, 0xFF00FF, 1)
  graphics.beginFill(0x650A5A, 0.25)
  graphics.drawRoundedRect(50, 440, 100, 100, 16)
  graphics.endFill()

  // draw polygon
  const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520]

  graphics.lineStyle(0)
  graphics.beginFill(0x3500FA, 1)
  graphics.drawPolygon(path)
  graphics.endFill()
}
</script>

<template>
  <Graphics @render="onDraw" />
</template>