這篇可視化編程工具blockly——工作區(qū)文章創(chuàng)建了一個固定大小的工作區(qū)勒魔，不過創(chuàng)建一個可以根據(jù)頁面尺寸變化改變的blockly工作區(qū)往往更加實用，本文在基于這篇文章的基礎(chǔ)上演示如何創(chuàng)建一個動態(tài)變化的blockly工作區(qū)畦戒。
1.創(chuàng)建html頁面區(qū)域
首先需要指定一個html元素來放置blockly工作區(qū)，工作區(qū)需要根據(jù)該元素的坐標和尺寸動態(tài)調(diào)整布局，該元素可以使用div、table等元素，唯一的要求是需要指定id价匠。至于CSS需要根據(jù)自己的應用設計進行性調(diào)整当纱，本文以占滿屏幕的div元素作為示例，編輯index.html代碼踩窖，增加如下代碼：
<div id="blocklyArea" style="min-height: 100vh;"></div>
2.注入blockly
接下來就是調(diào)用blockly的inject方法來向html頁面注入工作區(qū)代碼坡氯，和可視化編程工具blockly——工作區(qū)一文中的代碼是一樣的
<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.定位
最后一步的目的是監(jiān)聽瀏覽器窗口大小變化時間，一旦窗口有變化就計算blocklyArea的坐標和尺寸洋腮，然后動態(tài)調(diào)整blockly工作區(qū)的尺寸和坐標已適配窗口的變化箫柳，相關(guān)部分的代碼如下：
<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區(qū)域上
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); //重新渲染工作區(qū)
};
// 監(jiān)聽瀏覽器窗口的resize事件，觸發(fā)onresize方法
window.addEventListener('resize', onresize, false);
// 初次打開頁面需要計算一次blocklyArea元素的坐標和尺寸并渲染工作區(qū)
onresize();
Blockly.svgResize(workspace);
// ------------------定位部分代碼 end-------------------
</script>
瀏覽器打開index.html啥供，可以看到blockly工作區(qū)填滿了整個屏幕悯恍，嘗試調(diào)整瀏覽器窗口大小，工作區(qū)尺寸也會隨之而變化
尺寸動態(tài)變化的工作區(qū)
完整的代碼參考：
<!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區(qū)域上
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>
