网站首页 > 知识剖析正文

可视化编程工具blockly——可调整大小的工作区

nixiaole 2024-11-22 18:49:33 知识剖析 21 ℃

这篇可视化编程工具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>

上一篇：你真的了解分页吗?(上)
下一篇：设置表格列宽——在富文本编辑器中的实现

网站首页 > 知识剖析 正文

可视化编程工具blockly——可调整大小的工作区

1.创建html页面区域

2.注入blockly

3.定位

猜你喜欢

网站首页 > 知识剖析正文