useCanvas

useCanvas() verbindet einen Editor mit einem echten <canvas>-Element.

Es übernimmt:

• CanvasKit-Initialisierung
• Surface-Erstellung
• Render-Scheduling
• Größenänderungsbehandlung
• optionale Lineal-Sichtbarkeit
• Renderer-Bereitschafts-Callback

Verwendung

import { ref } from 'vue'

import { useCanvas, useEditor } from '@open-pencil/vue'

const canvasRef = ref<HTMLCanvasElement | null>(null)
const editor = useEditor()

useCanvas(canvasRef, editor)

Einfaches Beispiel

<script setup lang="ts">
import { ref } from 'vue'

import { useCanvas, useEditor } from '@open-pencil/vue'

const canvasRef = ref<HTMLCanvasElement | null>(null)
const editor = useEditor()

useCanvas(canvasRef, editor, {
  showRulers: true,
  onReady: () => {
    console.log('Renderer ready')
  },
})
</script>

<template>
  <canvas ref="canvasRef" class="size-full" />
</template>

Praktische Beispiele

Lineale für eine eingebettete Vorschau deaktivieren

useCanvas(canvasRef, editor, {
  showRulers: false,
})

Zeichenpuffer für Screenshots erhalten

useCanvas(canvasRef, editor, {
  preserveDrawingBuffer: true,
})

Hinweise

• useCanvas() ist renderer-seitig und in der Praxis nur im Browser verfügbar
• es ist für die Live-Canvas-Pipeline verantwortlich, nicht für app-seitige Datei-Flows
• es sollte in der Regel mit useCanvasInput() für die Interaktionsbehandlung kombiniert werden

Verwandte APIs

• useEditor
• useCanvasInput
• useTextEdit

Typ

interface UseCanvasOptions {
  showRulers?: boolean
  preserveDrawingBuffer?: boolean
  onReady?: () => void
}

function useCanvas(
  canvasRef: Ref<HTMLCanvasElement | null>,
  editor: Editor,
  options?: UseCanvasOptions,
): void