Blockly安装后是不能直接使用的，需要借助其它应用才能使用，官方叫注入。
本文通过注入网页的形式来开始探索blockly。
准备工作
先准备一个最简单的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
</head>
<body>
还没放内容
</body>
</html>
固定尺寸的工作区
如下面的代码所示，只需要3个步骤，即可完成注入，是注入网页的最简单方法了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
<!-- STEP1: 包含核心 Blockly 脚本和核心模块 -->
<script src="./node_modules/blockly/blockly_compressed.js"></script>
<script src="./node_modules/blockly/msg/en.js"></script>
</head>
<body>
<!-- STEP2: 在页面正文的某处添加一个空 div 并设置其大小 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- STEP3: 调用以下命令将 Blockly 注入空div。此脚本应位于页面底部，或由 onload 事件调用 -->
<script>
var workspace = Blockly.inject(document.getElementById('blocklyDiv'), {});
</script>
</body>
</html>
可调整尺寸的工作区
通过前面的操作，得到了一个注入成功的工作区。很简单，但是尺寸是固定的，实际应用中没啥意义。所以还是得实现尺寸可以调整的。总共有3个过程：
定义区域
使用 HTML 表格或带有 CSS 的 div，创建一个在页面调整大小时会重排的空白区域，这里叫blocklyArea。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
<style>
html,
body {
height: 100%;
margin: 0%;
}
</style>
</head>
<body>
<table style="height: 100%; width: 100%">
<tr>
<td id="blocklyArea" style="height: 99%; background: #fc9;">
Blockly 最后会放在这里
</td>
</tr>
</table>
</body>
</html>
注入Blockly
这一步跟上一小节《固定尺寸的工作区》一样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly 探索之旅</title>
<!-- STEP1: 包含核心 Blockly 脚本和核心模块 -->
<script src="./node_modules/blockly/blockly_compressed.js"></script>
<script src="./node_modules/blockly/msg/en.js"></script>
<style>
html,
body {
height: 100%;
margin: 0%;
}
</style>
</head>
<body>
<!-- STEP2: 在页面正文的某处添加一个空 div 并设置其大小 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- STEP1: 定义一个区域 -->
<table style="height: 100%; width: 100%">
<tr>
<td id="blocklyArea" style="height: 99%; background: #fc9;">
Blockly 最后会放在这里
</td>
</tr>
</table>
<!-- STEP3: 调用以下命令将 Blockly 注入空div。此脚本应位于页面底部，或由 onload 事件调用 -->
<script>
var workspace = Blockly.inject(document.getElementById('blocklyDiv'), {});
</script>
</body>
</html>
定位
最后一步是将 blocklyDiv 元素放在 blocklyArea 元素上。
首先，将上一个过程 blocklyDiv 元素中的style样式全部删除，然后添加绝对定位：
<div id="blocklyDiv" style="position: absolute"></div>
其次，修改注入脚本，为将 'blocklyDiv' 置于 'blocklyArea' 上，可以直接用下面的脚本替换
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {});
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();
Blockly.svgResize(workspace);
</script>
网友评论