Blockly使用一

2020-03-18  本文已影响0人  知晨创客坊

1. Workspace工作空间

上文Blockly简述中已经描述Workspace的表现形式，由分类区、积木区、脚本区组成，Blockly内部的操作以Workspace为核心。所有的操作都是基于Workspace的，譬如Blockly的blocks的注入，事件的响应，积木组的执行等。

Workspace使用

将Blockly放入网页的最简单方法是将其注入空的“div”标签。
首先，包括核心Blockly脚本和核心Blocks模积木。引入js路径可能会有所不同，具体取决于您的网页与Blockly文件的位置：

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>

然后包含用户语言的脚本（在本例中为英语）：

<script src="msg/js/en.js"></script>

在html页面正文的某处添加一个空div并设置其大小，固定大小的工作空间：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

在页面的任何位置添加工具工具箱的结构（请参阅Toolbox工具箱定义）：

<xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="controls_repeat_ext"></block>
    <block type="logic_compare"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
</xml>

最后，调用以下命令将Blockly注入空div。此脚本应位于页面底部，或由onload事件调用。

<script>
var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox')});
</script>

可变大小工作空间

上面定义了一个固定大小的Workspace，如何将Web应用程序按照屏幕上的可用空间调整Blockly的大小，而不是固定大小呢？
将blocklyDiv元素放在blocklyArea元素上。为此，从blocklyDiv中删除任何高度和宽度样式并添加绝对定位：

<div id="blocklyDiv" style="position: absolute"></div>

<script>
  var blocklyArea = document.getElementById('blocklyArea');
  var blocklyDiv = document.getElementById('blocklyDiv');
  var workspace = Blockly.inject(blocklyDiv,
      {toolbox: document.getElementById('toolbox')});
  var onresize = function(e) {
    // Compute the absolute coordinates and dimensions of blocklyArea.
    var element = blocklyArea;
    var x = 0;
    var y = 0;
    do {
      x += element.offsetLeft;
      y += element.offsetTop;
      element = element.offsetParent;
    } while (element);
    // Position blocklyDiv over blocklyArea.
    blocklyDiv.style.left = x + 'px';
    blocklyDiv.style.top = y + 'px';
    blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
    blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
    Blockly.svgResize(workspace);
  };
  window.addEventListener('resize', onresize, false);
  onresize();
</script>

Grid

spacing、length、colour、snap分别定义格子Grid样式。

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     grid: {
            spacing: 20,
            length: 3,
            colour: '#ccc',
            snap: true
        }});
脚本区格子样式 -c

Zoom

zoom对Workspace工作空间进行缩放，可以点击图标和控制鼠标进行缩放。

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

controls：是否开启缩放。
wheel：鼠标滚轮，设置为true以允许鼠标滚轮缩放。默认为false。
startScale：初始放大系数，默认为1。
maxScale：最大放大系数，默认为3。
minScale：最小的缩小系数，默认为0.3。
scaleSpeed：缩放速率，默认为1.2。

Workspace样式

Workspace样式分为2部分，积木样式、分类样式、

积木样式

积木样式目前由四个字段组成： colourPrimary， colourSecondary， colourTertiary和hat


积木样式 -c

主色colourPrimary（必需）：Block Colour用作积木的背景色，可以用色调或十六进制值定义。
辅助颜色colourSecondary（可选）:Shadow Block Colour如果积木是阴影积木，则使用此颜色。
三级颜色colourTertiary（可选）:Border Colour这是积木的边框颜色。在主题之前，边框颜色由光明和黑暗路径组成，以便创建投影效果。
帽子hat（可选） :当用户想要将帽子添加到其积木时使用。

帽子积木 -c

分类样式

分类样式目前仅包含颜色属性。

{
    "colour":"290"
}

这是分类的颜色。该值可以定义为十六进制值或色调。通常这些颜色应与该分类中大多数积木的主色相同。这使用户可以轻松地分辨哪些积木属于哪个分类。

样式注入

清楚了积木和分类如何定义样式，那么怎样将样式注入到Workspace中呢？
定义list分类采用list_category样式，logic分类采用logic_category样式。

{
"list_category": {
    "colours": "#4a148c"
},
"logic_category": {
    "colour": "#01579b",
}}

对于分类，可以将样式标记添加到xml即可

<category name="Logic" categorystyle="logic_category">
</category>

定义list分类下的积木采用list_blocks样式，logic分类下的积木采用logic_blocks样式；

{
"list_blocks": {
    "colourPrimary": "#4a148c",
    "colourSecondary":"#AD7BE9",
    "colourTertiary":"#CDB6E9"
},
"logic_blocks": {
    "colourPrimary": "#01579b",
    "colourSecondary":"#64C7FF",
    "colourTertiary":"#C5EAFF"
}}

对于积木，只需积木在定义时将样式名称添加到积木"style":"logic_blocks"。

要想分类样式和积木样式起作用，最好的办法是在Workspace生成时，定义主题，使用options.theme在您的注入中包含。

{
    theme: Blockly.Theme(blockStyles, categoryStyles)
}

2. Toolbox工具箱

Toolbox工具箱指的是分类区和积木区，Toolbox在Blockly中使用一段XML存储，积木以某一小段XML代码组成，多个类似积木组成一段分类XML，分类积木的组合形成一段完整的XML，完整的XML被称为Toolbox，最终Toolbox对应的XML会被Blockly渲染为分类区和积木区。
工具箱是用户可以创建新积木的侧边菜单。工具箱的结构使用XML指定， XML可以是节点树，也可以是字符串表示。
将此XML注入到页面中时，会将其传递给Blockly。

<xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="controls_whileUntil"></block>
</xml>
<script>
    var workspace = Blockly.inject('blocklyDiv',
        {toolbox: document.getElementById('toolbox')});
</script>
工具箱 -c

Categories分类

用于将Blocks按模积木进行分类，Blockly默认定义了8种分类，每种分类使用不同的颜色，有不同功能，譬如Loops分类存放循环积木，Math分类存放数学操作积木等；

工具箱中的积木可以按分类组织。分类可嵌套，这里有两个分类（ 'Control'和'Logic'），每个分类包含三个积木：

<xml id="toolbox" style="display: none">
    <category name="Control">
        <block type="controls_if"></block>
        <block type="controls_whileUntil"></block>
        <block type="controls_for">
    </category>
    <category name="Logic">
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_boolean"></block>
    </category>
</xml>
分类 -c

动态分类

有两类具有特殊行为的分类。变量和函数分类定义为没有内容，但具有'custom'属性 ：'VARIABLE'或'PROCEDURE'。这些分类将使用适当的积木自动填充。

<category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>

Blocks积木

用于存放分类下的积木，不同积木代表不同的功能，在Blockly中，积木可以使用开发者工具，或者编写代码灵活定义积木；

阴影积木shadow

阴影积木是占位符积木，与常规积木不同，如果用户在其上放置积木，则会替换它们，相当于是一个默认值。


阴影积木 -c

分隔线sep

将两个分类使用线分离，常见于菜单分割线。


分割线 -c

按钮button和标签label

按钮和标签也可定义为积木，您可以将放入工具箱的位置放置按钮或标签。


按钮button和标签label -c

按钮应该有回调函数，而标签不需要。要为给定按钮设置回调函数，使用

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction)

禁用积木disabled

可以使用可选的disabled属性单独禁用工具箱中的积木：禁用积木可用于限制用户的选择。也许高级积木可能会在某些成就后解锁。

上一篇 下一篇

猜你喜欢

热点阅读