渲染器 API 参考

渲染器提供基于 WebGL 的角色、造型和自定义图形渲染。通过 util.runtime.renderer 访问它。

快速开始

class MyExtension {
  myBlock(args, util) {
    const renderer = util.runtime.renderer;
    
    // 创建造型
    const skinId = renderer.createBitmapSkin(imageData, 1);
    
    // 创建可绘制对象
    const drawableId = renderer.createDrawable('foreground');
    
    // 将造型应用于可绘制对象
    renderer.updateDrawableProperties(drawableId, { skinId });
  }
}

造型管理

造型为可绘制对象提供纹理和视觉外观。

创建造型

• createBitmapSkin() - 从图像数据创建造型
• createSVGSkin() - 从 SVG 标记创建造型
• createPenSkin() - 创建画笔图层造型
• createTextSkin() - 创建文本气泡造型

更新造型

• updateBitmapSkin() - 更新现有位图造型
• updateSVGSkin() - 更新现有 SVG 造型
• updateTextSkin() - 更新文本气泡造型

管理造型

• destroySkin() - 销毁造型并释放资源
• getSkinSize() - 获取造型尺寸
• getSkinRotationCenter() - 获取旋转中心
• markSkinAsPrivate() - 将造型标记为私有

可绘制对象管理

可绘制对象是在屏幕上渲染的视觉对象。

创建与销毁

• createDrawable() - 在图层组中创建新的可绘制对象
• destroyDrawable() - 销毁可绘制对象并释放资源

定位与排序

• updateDrawableProperties() - 更新位置、缩放、效果等
• setDrawableOrder() - 更改 z 顺序/图层
• getDrawableOrder() - 获取当前 z 顺序

视觉属性

• getCurrentSkinSize() - 获取可绘制对象当前造型的尺寸
• getBounds() - 获取紧密边界框
• getBoundsForBubble() - 获取文本气泡的边界

碰撞检测

• isTouchingColor() - 检查可绘制对象是否接触颜色
• isTouchingDrawables() - 检查可绘制对象是否重叠

渲染控制

• draw() - 手动触发渲染
• requestSnapshot() - 将画布捕获为数据 URL
• setBackgroundColor() - 设置舞台背景颜色

配置

• resize() - 设置物理画布尺寸
• setStageSize() - 设置逻辑舞台边界

内部属性

⚠️ 警告： 内部 API 可能会在没有通知的情况下更改

• renderer._allSkins - 所有造型对象的数组
• renderer._allDrawables - 所有可绘制对象的数组

关键概念

• SVG 加载模式 - 处理异步 SVG 加载
• 内部属性 - 使用内部渲染器 API
• 资源管理 - 正确的清理模式

另请参阅

• Scratch API - 扩展 API 基础
• VM API - 运行时和执行控制
• Audio API - 声音和音乐 API