Sketch.Root

Sketch.Root 是 Sketch 应用的根节点组件，用于初始化渲染环境、挂载 Sketch 实例，并驱动整棵渲染树的渲染。

适用场景

• 在 Web/H5 环境中绑定 <canvas> 并启动渲染
• 管理渲染生命周期（初始化、更新、重绘）
• 作为整棵渲染树的容器

功能特性

• 持有 canvas/ctx 并驱动渲染
• 统一分发 initialized 与 elementUpdate 事件

示例

React

import React, { useEffect } from 'react'
import { Sketch, StyleSheet } from '@sketchjs/react'

const styleSheet = StyleSheet.create({
  root: {
    width: 200,
    height: 200,
    backgroundColor: '#fff'
  }
})

export const SketchView: React.FC = () => {
  const sketch = Sketch.useSketch()

  const canvasRef = React.useRef<HTMLCanvasElement>(null)

  const handleSketchElementUpdate = () => console.log('sketch update')

  const handleSketchInitialized = () => console.log('sketch initialized')

  const initSketch = () => {
    const canvas = canvasRef.current
    const ctx = canvas?.getContext('2d')
    if (!canvas || !ctx) return
    return sketch.init({ canvas, ctx })
  }

  useEffect(() => {
    initSketch()
  }, [])

  return (
    <>
      <canvas ref={canvasRef}/>
      <Sketch.Root
        autoRender
        sketch={sketch}
        style={styleSheet.root}
        onUpdate={handleSketchElementUpdate}
        onReady={handleSketchInitialized}
      />
    </>
  )
}

Vue

import { defineComponent, onMounted, ref } from 'vue'
import { Sketch, StyleSheet } from '@sketchjs/vue'

const styleSheet = StyleSheet.create({
  root: {
    width: 200,
    height: 200,
    backgroundColor: '#fff'
  }
})
export const SketchView = defineComponent({
  name: 'SketchView',
  setup () {
    const sketch = Sketch.useSketch()

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

    const handleSketchElementUpdate = () => console.log('sketch update')

    const handleSketchInitialized = () => console.log('sketch initialized')

    const initCanvas = () => {
      const canvas = canvasRef.value
      const ctx = canvas?.getContext('2d')
      if (!canvas || !ctx) return
      return sketch.value.init({ canvas, ctx })
    }

    onMounted(() => initCanvas())

    return () => (
      <>
        <canvas ref="canvasRef"/>
        <Sketch.Root
          autoRender
          sketch={sketch.value}
          style={styleSheet.root}
          onReady={handleSketchInitialized}
          onUpdate={handleSketchElementUpdate}
        />
      </>
    )
  }
})

API 属性

React

属性	说明	类型	默认值	是否必填
sketch	sketch 实例	SketchRoot	-	false
autoRender	是否自动渲染	boolean	-	false
onReady	初始化完成事件回调 @param event	(event: Event<SketchRoot>) => void	-	false
onUpdate	元素更新事件回调 @param event	(event: Event<SketchElement>) => void	-	false
style	样式	StyleSheetDeclaration	-	false
children	子元素	SketchElementChild	-	false

Vue

属性	说明	类型	默认值	是否必填
autoRender	是否自动渲染	boolean	-	false
sketch	sketch 实例	SketchRoot	-	false
style	样式	StyleSheetDeclaration	-	false
ready	初始化完成事件回调	-	-	-
update	元素更新事件回调	-	-	-

使用说明 / 注意事项

• Sketch.Root 必须在 sketch.init({ canvas, ctx }) 成功后使用
• 若 autoRender 为 false，需要手动调用 sketch.render()
• style.width/height 会决定 Canvas 像素尺寸