blockly 学习----2.代码生成、网格、缩放、事件、存储

blockly 学习

1.代码生成器

第一步是包含相关语言的生成器。Blockly包括以下生成器:

  • javascript_compressed.js
  • python_compressed.js
  • php_compressed.js
  • lua_compressed.js
  • dart_compressed.js

应该包含生成器类blockly_compressed.js。



通过此调用,用户的块可以随时从您的应用程序导出到代码:
var code = Blockly.JavaScript.workspaceToCode(workspace);

实时生成
生成代码是一种非常快速的操作-可以实时生成

function myUpdateFunction(event) {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);
2.网格–用于对齐
var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     grid:
         {spacing: 20,
          length: 3,
          colour: '#ccc',
          snap: true},
     trashcan: true});
  • spacing 网格间距 默认为0
  • length 长度
    该length属性是一个定义网格点形状的数字。
    长度为0会产生不可见的网格(但仍然可以对齐),
    长度为1(默认值)会产生点,较长的长度会导致交叉,长度等于或大于间距结果在方格纸。
  • colour 颜色 “#f00” “#ff0000” "rgb(255, 0, 0) " 字符串都可以
  • snap 该snap属性是一个布尔值,用于设置块放置在工作区时是否应捕捉到最近的网格点。默认值为false。类似吸附
3.放大
var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     zoom:
         {controls: true,
          wheel: true,
          startScale: 1.0,
          maxScale: 3,
          minScale: 0.3,
          scaleSpeed: 1.2},
     trashcan: true});
  • controls 控制 设置为true显示缩放中心,放大和缩小按钮。默认为false。
  • wheel 设置为true允许鼠标滚轮缩放。默认为false。
  • startScale 初始放大系数。默认为1.0。
  • maxScale 最大倍增系数。默认为3。
  • minScale 最小倍增系数。默认为0.3。
  • scaleSpeed 缩放速度。比例分别乘以或除以比例速度 默认1.2
4.事件

工作区具有可用于侦听事件流的方法addChangeListener和removeChangeListener方法。
以下示例检测用户何时创建第一个注释,发出警报,然后停止侦听,以便不再触发警报。

function onFirstComment(event) {
  if (event.type == Blockly.Events.CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

事件类型

  • type 只能是 Blockly.Events.CREATE, Blockly.Events.DELETE, Blockly.Events.CHANGE, Blockly.Events.MOVE, Blockly.Events.UI.
  • workspaceId UUID Blockly.Workspace.getById(event.workspaceId)
  • blockId UUID workspace.getBlockById(event.blockId)
  • group UUID

Blockly.Events.BLOCK_CREATE
块创建事件有两个附加属性。
xml object 定义新块和任何连接子块的XML树。
ids array 一个数组,包含新块的UUID和任何连接的子块。

Blockly.Events.BLOCK_DELETE
oldXml object 定义已删除块和任何已连接子块的XML树。
ids array 包含已删除块的UUID和任何已连接子块的数组。

Blockly.Events.BLOCK_CHANGE
element string ‘field’,‘comment’,‘collapsed’,‘disabled’,‘inline’,'mutate’之一
name string 字段的名称,如果这是对字段的更改。
oldValue value 原始价值。
newValue value 改变了价值。

Blockly.Events.BLOCK_MOVE
oldParentId string 旧父块的UUID。如果它是顶级块,则未定义。
oldInputName string 旧父母的输入名称。如果它是顶级块或父级的下一个块,则为未定义。
oldCoordinate object X和Y坐标,如果它是顶级块。如果有父母,则未定义。
newParentId string 新父块的UUID。如果它是顶级块,则为未定义。
newInputName string 新父母的输入名称。如果它是顶级块或父级的下一个块,则为未定义。
newCoordinate object X和Y坐标,如果它是顶级块。如果它有父项,则为未定义。

Blockly.Events.VAR_CREATE
varType string 变量的类型,如’int’或’string’。不需要是唯一的。这将默认为“”,这是一种特定类型。
varName string 变量的名称。这在变量和过程中是唯一的。
varId string 变量的唯一ID。

Blockly.Events.VAR_DELETE
varType string 变量的类型,如’int’或’string’。不需要是唯一的。这将默认为“”,这是一种特定类型。
varName string 变量的名称。这在变量和过程中是唯一的。
varId string 变量的唯一ID。

Blockly.Events.VAR_RENAME
oldName string 变量的当前名称。这在变量和过程中是唯一的。
newName string 变量的新名称。这在变量和过程中是唯一的。
varId string 变量的唯一ID。

Blockly.Events.UI
element string ‘selected’,‘category’,‘click’,‘commentOpen’,‘mutatorOpen’,‘warningOpen’,'theme’之一
oldValue value 原始价值。
newValue value 改变了价值。

5.本地存储

要从本地存储中恢复块
window.setTimeout(BlocklyStorage.restoreBlocks, 0);
用户离开页面时自动将块备份到本地存储中BlocklyStorage.backupOnUnload();
例子:https://blockly-demo.appspot.com/static/demos/storage/index.html

你可能感兴趣的:(js)