这篇可视化编程工具blockly——工作区文章创建了一个固定大小的工作区，不过创建一个可以根据页面尺寸变化改变的blockly工作区往往更加实用，本文在基于这篇文章的基础上演示如何创建一个动态变化的blockly工作区。
1.创建html页面区域
首先需要指定一个html元素来放置blockly工作区，工作区需要根据该元素的坐标和尺寸动态调整布局，该元素可以使用div、table等元素，唯一的要求是需要指定id。至于CSS需要根据自己的应用设计进行性调整，本文以占满屏幕的div元素作为示例，编辑index.html代码，增加如下代码：
<div id="blocklyArea" style="min-height: 100vh;"></div>
2.注入blockly
接下来就是调用blockly的inject方法来向html页面注入工作区代码，和可视化编程工具blockly——工作区一文中的代码是一样的
<div id="blocklyDiv" style="position: absolute"></div>
<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>
<script src="./blockly/blockly_compressed.js"></script>
<script src="./blockly/blocks_compressed.js"></script>
<script src="./blockly/msg/js/zh-hans.js"></script>
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv,
{toolbox: document.getElementById('toolbox')});
</script>
3.定位
最后一步的目的是监听浏览器窗口大小变化时间，一旦窗口有变化就计算blocklyArea的坐标和尺寸，然后动态调整blockly工作区的尺寸和坐标已适配窗口的变化，相关部分的代码如下：
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv,
{toolbox: document.getElementById('toolbox')});
// ------------------定位部分代码 start-------------------
var onresize = function(e) {
// 计算blocklyArea元素的绝对坐标和尺寸
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// 将blocklyDiv定位到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); //重新渲染工作区
};
// 监听浏览器窗口的resize事件，触发onresize方法
window.addEventListener('resize', onresize, false);
// 初次打开页面需要计算一次blocklyArea元素的坐标和尺寸并渲染工作区
onresize();
Blockly.svgResize(workspace);
// ------------------定位部分代码 end-------------------
</script>
浏览器打开index.html，可以看到blockly工作区填满了整个屏幕，尝试调整浏览器窗口大小，工作区尺寸也会随之而变化
尺寸动态变化的工作区
完整的代码参考：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>blockly demo</title>
</head>
<body>
<div id="blocklyArea" style="min-height: 100vh;"></div>
<div id="blocklyDiv" style="position: absolute"></div>
<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>
<script src="./blockly/blockly_compressed.js"></script>
<script src="./blockly/blocks_compressed.js"></script>
<script src="./blockly/msg/js/zh-hans.js"></script>
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv,
{toolbox: document.getElementById('toolbox')});
var onresize = function(e) {
// 计算blocklyArea元素的绝对坐标和尺寸
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// 将blocklyDiv定位到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();
Blockly.svgResize(workspace);
</script>
</body>
</html>
网友评论