useCanvas

useCanvas() connecte un éditeur à un vrai élément <canvas>.

Il gère :

• l'initialisation de CanvasKit
• la création de surface
• la planification du rendu
• la gestion du redimensionnement
• la visibilité optionnelle des règles
• le callback de disponibilité du renderer

Utilisation

import { ref } from 'vue'

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

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

useCanvas(canvasRef, editor)

Exemple de base

<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 prêt')
  },
})
</script>

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

Exemples pratiques

Désactiver les règles pour un aperçu intégré

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

Conserver le tampon de dessin pour les captures d'écran

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

Notes

• useCanvas() est orienté renderer et pratiquement uniquement côté navigateur
• il est responsable du pipeline canvas en direct, pas des flux de fichiers au niveau applicatif
• il devrait généralement être associé à useCanvasInput() pour la gestion des interactions

API associées

• useEditor
• useCanvasInput
• useTextEdit

Type

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

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