Blockly具有完整的API文档,下面我们将对常用的函数进行说明。API文档
Blockly.inject函数
函数声明
inject(container, opt_options) returns Blockly.WorkspaceSvg
container:是个html元素,ID或CSS选择器;
opt_option:object,Blockly参数,参数的定义在typings/parts/blockly-interfaces.d.ts文件中;
Name | Type | Description |
---|---|---|
collapse: | boolean | 允许工具箱折叠,默认为true |
comments: | boolean | 允许积木进行注释,默认为true |
css: | boolean | 允许使用css,默认为true |
disable: | boolean | 允许禁用积木,默认为true |
grid: | object | 配置脚本区格子大小等 |
horizontalLayout: | boolean | 工具箱行列布局,默认为false,列布局 |
maxBlocks: | number | 允许脚本创建的最大积木数量 |
maxInstances: | object | 限制某种类型积木使用次数 |
media: | string | 静态文件存放位置 |
move: | object | 配置移动积木的方式 scrollbars、drag、wheel |
oneBasedIndex: | boolean | 列表下标开始,true下标从1开始,false下标从0开始 |
readOnly: | boolean | Toolbox和trashcan是否可以编辑,缺省为false |
rtl: | boolean | Toolbox中分类和积木靠左或右,缺省为false |
scrollbars: | boolean | 工作空间是否可滚动,缺省true |
sounds: | boolean | 操作声音,缺省true |
theme: | Blockly.Theme | 主题 |
toolbox: | XML nodes or string | 分类和积木xml |
toolboxPosition: | string | 工具箱放置位置start、end,可配合RTL使用 |
trashcan: | boolean | 显示隐藏垃圾桶图标,缺省为true |
maxTrashcanContents: | number | 可删除的最大积木数量,默认为0,没有限制 |
zoom: | object | 放大缩小 |
例子
var demoWorkspace = Blockly.inject('BlocklyDiv',
{media: '../../media/',
toolbox: document.getElementById('toolbox')});
Blockly.WorkspaceSvg对象
Blockly.inject以后,可以对工作空间增加其他的交互。目前只是列出了几个常用函数,具体可参考API文档。
工作空间添加移除事件
demoWorkspace.addChangeListener(onchange);
demoWorkspace.removeChangeListener(onchange);
工作空间的改变将会触发函数onchange执行!
工作空间改变大小
Blockly.svgResize(demoWorkspace);
var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
更新工具箱
demoWorkspace.updateToolbox(newTree);
限制Block使用个数
demoWorkspace.remainingCapacity();
工作空间转代码
var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
xml转代码
var xml = Blockly.Xml.textToDom(xmlText)
//此工作空间没有绑定到html上
var demoWorkspace = new Blockly.Workspace();
Blockly.Xml.domToWorkspace(xml, demoWorkspace);
var code = Blockly.JavaScript.workspaceToCode(demoWorkspace);
设置主题
设置工作空间主题,Blockly.Themes.Classic是缺省主题。
demoWorkspace.setTheme(theme)
新建积木
Blockly.Block对象
new Block(workspace, prototypeName, opt_id)
、
workspace:工作空间,prototypeName:积木名称,opt_id:积木ID
积木对象,不能使用new Block直接创建对象,应由Workspace对象调用newBlock函数,创建Block对象。
newBlock(prototypeName, opt_id) returns Blockly.Block
Blockly.Event事件对象
积木
创建(BlockCreate/Create)、删除(BlockDelete/Delete)、改变(BlockChange/Change)、移动(BlockMove/Move)
注释
创建(CommentCreate)、删除(CommentDelete)、改变(CommentChange)、移动(CommentMove)
UI
UI相关事件,已经在前篇文章说明;
变量
创建(VarCreate)、删除(VarDelete)、重命名(VarRename)
Blockly.Field
积木有很多种类型,有输入型、时间型、选择型、角度、颜色、变量、按钮、标签、图像等等,这些积木类型都由Field来定义,下篇将专门对Field详细说明,并尝试如何自定义Field。