@verygoodgraphics/vgg-wasm v0.1.26

VGG WASM

Environment

Create a .env file and set the VGG runtime URL if you want to use a specific version, otherwise it will use the latest version.

# Open your terminal and goto the root directory of your project
cp /packages/wasm/.env.example /packages/wasm/.env

Usage

Import through CDN

<script src="https://www.unpkg.com/@verygoodgraphics/vgg-wasm"></script>
<script>
  const vgg = new VGG({
    src: "https://raw.githubusercontent.com/verygoodgraphics/vgg_docs/main/static/example/docs__example__vgg_homepage_v1.daruma",
    canvas: document.querySelector("#canvas"),
  })

  ;(async () => {
    await vgg.load()

    if (vgg.state === "ready") {
      await vgg.render()

      vgg.$("#vgg_home").on("click", async () => {
        window.alert("Hello, VGG!")
      })
    }
  })()
</script>

Import through NPM

npm install @verygoodgraphics/vgg-wasm

import { VGG } from "@verygoodgraphics/vgg-wasm"

const vgg = await new VGG({
  src: "https://raw.githubusercontent.com/verygoodgraphics/vgg_docs/main/static/example/docs__example__vgg_homepage_v1.daruma",
  canvas: document.querySelector("#canvas") as HTMLCanvasElement,
}).load()

if (vgg.state === State.Ready) await vgg.render()

API

Props for creating a new instance

VGG instance methods and properties

.load()

After loading, the state will be State.Ready or State.Error.

.render()

When the state is State.Ready, we can call this method to render the canvas.

$(selector: string)

Get the element by selector.

FAQ

1. How to get the element selector?\ set editMode and verbose to true, then you can see the selector in the console when select specific element in the canvas.