可视化编程工具blockly——尺寸大小可变的工作区

这篇可视化编程工具blockly——工作区文章创建了一个固定大小的工作区，不过创建一个可以根据页面尺寸变化改变的blockly工作区往往更加实用，本文在基于这篇文章的基础上演示如何创建一个动态变化的blockly工作区。

1.创建html页面区域

首先需要指定一个html元素来放置blockly工作区，工作区需要根据该元素的坐标和尺寸动态调整布局，该元素可以使用div、table等元素，唯一的要求是需要指定id。至于CSS需要根据自己的应用设计进行性调整，本文以占满屏幕的div元素作为示例，编辑index.html代码，增加如下代码：

2.注入blockly

接下来就是调用blockly的inject方法来向html页面注入工作区代码，和可视化编程工具blockly——工作区一文中的代码是一样的

3.定位

最后一步的目的是监听浏览器窗口大小变化时间，一旦窗口有变化就计算blocklyArea的坐标和尺寸，然后动态调整blockly工作区的尺寸和坐标已适配窗口的变化，相关部分的代码如下：

浏览器打开index.html，可以看到blockly工作区填满了整个屏幕，尝试调整浏览器窗口大小，工作区尺寸也会随之而变化

尺寸动态变化的工作区

完整的代码参考：