Blockly开发2 ------创建工作空间workspace

最新推荐文章于 2023-05-08 13:14:04 发布

wolf131721

最新推荐文章于 2023-05-08 13:14:04 发布

阅读量911

点赞数 1

分类专栏： blockly 文章标签： blockly

原文链接：https://www.jianshu.com/p/827bfb5c114e

版权

blockly 专栏收录该内容

20 篇文章 10 订阅

订阅专栏

. 什么是Blockly的workspace

workspace是Blockly中非常重要的对象，它是其他组件运行的基础，所有其他Blockly的组件都必须在workspace中才能工作。以下图为例，图中蓝框以内的范围都是workspace，左侧的ToolBox（下一节的内容）、中间的积木块组合（blocks）、右下方的垃圾桶和滑动条都是workspace的子对象。通常来说，一个应用只需要创建一个workspace就足够。如果想要使用多个workspace，需要解决一些命名空间冲突的问题，本攻略不包括这部分内容。

workspace

2. 创建一个workspace

a. 从github上下载Blockly并解压，然后将blockly-master文件夹拷贝到一个新的工作空间下，改名为blockly（方便后续开发）。blockly文件夹中包含了Blockly的源码、示例代码、编译程序以及编译后的代码。如果你的应用对包体大小很敏感，应当进行适当的裁剪。

blockly项目源码

在同一个目录下新建一个文件，并将名字改为 index1.html（任何xxxx.html都可以，名字不重要，后文简称index1）。

index1

b. 接下来打开并编辑index1，输入下面的代码。

<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个Blockly应用</title>
        <script src="blockly/blockly_compressed.js"></script>
        <script src="blockly/msg/js/zh-hans.js"></script>
    </head>
    <body>
        <div id="blocklyDiv" style="width:400px;height:600px"></div>
        <script>
            var blocklyDiv = document.getElementById('blocklyDiv');
            var workspace = Blockly.inject(blocklyDiv, {});
        </script>
    </body>
</html>

保存后，用Chrome浏览器打开index1，你将看到下图所示的效果，在左上角的灰色线框内右键能够显示workspace最基本的右键菜单，如果不是这样，检查一下代码是否正确，或者在Chrome中按F12调出调试工具查看具体错误。

固定大小的空workspace

c. 现在我们解释一下上面的代码。
head中第一行定义了网页的标题。第二行引入了编译后的blockly模块。第三行引入了blockly自带的简体中文字符资源。Blockly支持多国语言，所以我们必须明确的引入一种资源（引入多种会产生冲突）。

    <head>
        <title>我的第一个Blockly应用</title>
        <script src="blockly/blockly_compressed.js"></script>
        <script src="blockly/msg/js/zh-hans.js"></script>
    </head>

body中第一行创建了一个空的div并且定义了它的大小，长400像素，宽600像素。
script中第一行通过id获取到了刚才创建的div元素（blocklyDiv）。
第二行用Blockly.inject(blocklyDiv, {})函数在div中注入了一个workspace，这是整个代码最核心的一行。
Blockly提供了Blockly.inject()这样一个方便的接口供我们创建workspace，其中第一个参数是一个页面中的元素，第二个参数是workspace的设置选项，在这个例子中我们全部采用默认设置，参数为空。

    <body>
        <div id="blocklyDiv" style="width:400px;height:600px"></div>
        <script>
            var blocklyDiv = document.getElementById('blocklyDiv');
            var workspace = Blockly.inject(blocklyDiv, {});
        </script>
    </body>

workspace在第一次创建，也就是inject调用时会填充整个div，但它不会随着div的变化自动适应。在介绍workspace的参数之前，我们先让workspace能跟随浏览器大小变化。

3.可变尺寸的workspace

对index1的代码做如下修改：

<!DOCTYPE html>
<html style="height:100%">
    <head>
        <title>我的第一个Blockly应用</title>
        <script src="blockly/blockly_compressed.js"></script>
        <script src="blockly/msg/js/zh-hans.js"></script>
    </head>
    <body style="height:100%">
        <div id="blocklyDiv" style="width:100%;height:100%"></div>
        <script>
            //生成模块列表区域
            var blocklyDiv = document.getElementById('blocklyDiv');
            var workspace = Blockly.inject(blocklyDiv, {});

            //调整工作区域大小
            var onresize = function (e) {
                Blockly.svgResize(workspace);
            };
            //注册resize处理函数
            window.addEventListener('resize', onresize);
            Blockly.svgResize(workspace);
        </script>
    </body>
</html>

首先修改html和body的样式，让他们占整个页面的100%（完全填充）。同时修改div的样式，让他占满整个body。这样，当窗口大小改变时，div的大小就会自动随之变化。
但此时workspace并不会随div改变而改变，Blockly提供了svgResize接口，它能让一个workspace拉伸直到填满其父元素，这里的父元素就是blocklyDiv。因此，我们需要得知div元素何时改变了大小，每当它改变大小时就调用一次Blockly.svgResize(workspace);修改workspace的大小。
div是随页面的改变而改变的，在html中，我们可以用事件（event）机制来获取页面改变的事件。
window.addEventListener('resize', onresize);注册了一个事件回调，当resize事件发生时，调用onresize函数。
我们在上面三行定义了这个onresize函数，它只做一件事情，就是调用Blockly.svgResize(workspace);调整workspace的大小。到此，我们的workspace就能够随着窗口大小改变而改变了。整个流程大致如下：

可变尺寸workspace示意图

4. workspace的设置选项

workspace目前有20个选项（options）可以设置。我们可以在var workspace = Blockly.inject(blocklyDiv, {});定义workspace时进行设置，也可以在后的程序中通过workspace.options进行修改。
下面的代码设置了几个常用的选项，包括资源目录（media）、缩放（zoom）、垃圾桶（trashcan）、滚动条（scrollBar）以及工具栏（ToolBox，下一节专门讲它的创建）：

var workspace = Blockly.inject(blocklyDiv, {
    media: 'blockly/media/',
    toolbox: document.getElementById('toolbox'),
    zoom: {
        controls: true,
        wheel: true,
        startScale: 1.0,
        maxScale: 3,
        minScale: 0.5,
        scaleSpeed: 1.05
    },
    trashcan: true,
    scrollBar: true
});

实现效果如下：

workspace选项示例

更多的选项效果，可以参考https://developers.google.com/blockly/guides/get-started/web#configuration逐个进行尝试。

wolf131721

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Blockly开发2 ------创建工作空间workspace

. 什么是Blockly的workspaceworkspace是Blockly中非常重要的对象，它是其他组件运行的基础，所有其他Blockly的组件都必须在workspace中才能工作。以下图为例，图中蓝框以内的范围都是workspace，左侧的ToolBox（下一节的内容）、中间的积木块组合（blocks）、右下方的垃圾桶和滑动条都是workspace的子对象。通常来说，一个应用只需要创建一...
复制链接

扫一扫