Sketch.Image

Sketch.Image 是 Sketch 的图片节点组件，用于在画布上渲染图片内容。通常作为 Sketch.Root 或 Sketch.View 的子节点使用。

适用场景

• 渲染本地或网络图片
• 作为背景图、头像、图标等图像元素

功能特性

• 图片加载与缓存复用
• 支持圆角裁剪与布局尺寸控制

示例

React

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

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

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 })
  }

  const handleImageLoadSuccess = () => console.log('image loaded')

  const handleImageLoadError = () => console.log('image load error')

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

  return (
    <>
      <canvas ref={canvasRef}/>
      <Sketch.Root
        autoRender
        sketch={sketch}
        style={styleSheet.root}
        onUpdate={handleSketchElementUpdate}
        onReady={handleSketchInitialized}
      >
        <Sketch.Image
          src='path-to-image'
          style={styleSheet.image}
          onLoad={handleImageLoadSuccess}
          onError={handleImageLoadError}
        />
      </Sketch.Root>
    </>

  )
}

Vue

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

const styleSheet = StyleSheet.create({
  root: {
    width: 200,
    height: 200,
    backgroundColor: '#fff'
  },
  image: {
    width: 200,
    height: 200,
  }
})
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 handleImageLoadSuccess = () => console.log('image loaded')

    const handleImageLoadError = () => console.log('image load error')

    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}
        >
          <Sketch.Image
            src='path-to-image'
            style={styleSheet.image}
            onLoad={handleImageLoadSuccess}
            onError={handleImageLoadError}
          />
        </Sketch.Root>
      </>
    )
  }
})

API 属性

React

属性	说明	类型	默认值	是否必填
src	资源路径	string	-	false
onLoad	资源加载完成 @param error	(error: Event<SketchAppletImage>) => void	-	false
onError	资源加载失败 @param error	(error: Event<Error>) => void	-	false

Vue

属性	说明	类型	默认值	是否必填
src	资源路径	string	-	false
style	样式	StyleSheetDeclaration	-	false
load	资源加载完成	-	-	-
error	资源加载失败	-	-	-

常用属性说明

• src：图片地址或资源路径
• onLoad：图片加载完成回调
• onError：图片加载失败回调

使用说明 / 注意事项

• Sketch.Image 必须挂载在 Sketch.Root 或 Sketch.View 内
• 样式建议通过 StyleSheet.create() 管理，常用 width/height/borderRadius
• 大量图片频繁更新会影响渲染性能
• 同一 src 会被缓存复用，减少重复加载成本