是否有另一种方法来调整 Blockly 工作区的大小？答案

【问题标题】：Is there another way to resize Blockly workspace?是否有另一种方法来调整 Blockly 工作区的大小？
【发布时间】：2020-11-24 16:05:05
【问题描述】：

我正在尝试在 div 中调整我的 Blockly workspace。我希望如果页面变小，其中的 div 和 Blockly workspace 也会变小。

我知道Google 在其documentation 中提供了一种方法，但我认为它有点“脏”，您必须使用大量代码来调整它的大小。

查看Google Chrome 的调试器，我看到我可以为svg 对象设置max-height，但我不知道在注入工作区时如何更改height：

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox')});

无论如何，它根本无法解决我的问题（只是避免在调整页面大小之前工作区比 div 大）。

我还尝试将我的blocklyDiv 更改为Blockly workspace 注入display: flex;，但它没有任何改变。

有没有比Google's 示例更好的方法来调整Blockly workspace 的大小？

提前致谢！

【问题讨论】：

你有链接或JSFiddle来演示吗？
@darrylyeo 我可以创建一个，但我不知道如何添加 Blockly。
我在块状 div 中使用了一个简单的“宽度：100px”，它可以调整大小。当然，如果块不适合工作区，那么会有滚动条允许在其中移动......我知道这不是你想要的？也许您想更改块的比例以使其适合提供的空间？
@jrierab 但我希望在调整屏幕大小的同时，也调整工作区的大小。在固定宽度的情况下，我无法做到这一点。如果可以同时调整块的大小，那就太好了！
对不起，我的错。我说的是“宽度：100%”，即相对于父 div。它有效地调整了工作区的大小，但也许它可以工作，因为我有一个固定的高度？在任何情况下，您都可以添加一张图片来显示问题所在以及您希望实现的目标。

标签： css blockly

【解决方案1】：

我只使用 CSS 来获得相同的行为...

只需为具有您想要的任何大小和相对位置的块状编辑器创建一个容器，然后将一个块状编辑器放入其中并具有绝对位置。

HTML 代码：

<section id="blocklyContainer">
    <div id="blocklyDiv"></div>
</section>

CSS 代码：

#blocklyContainer {
  position: relative;
  width: 100%;
  height: 100vh;
}

#blocklyDiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

您可以在这里查看 CodePen：blockly resize

【讨论】：

似乎添加了类别……它不再显示侧面板了……
@LucaDetomi 我已经用两个随机类别为您更新了 codepen 示例。它也有效，你可以看看吗？谢谢！
No Juan，我尝试以编程方式更改 blocklyContainer 的宽度（您也可以从 Inspector 执行此操作）并且画布的大小不会更改，直到您强制浏览器窗口调整大小...所以问题仍然：如何更改 Blockly 画布大小，仅更改 DIV 容器的大小，而不更改浏览器窗口大小？

【解决方案2】：

正如我在上面的评论中所说，我允许在固定块状 div 的高度时调整宽度。

<div id="blocklyDiv" style="height: 800px; width: 100%;"></div>

在这里，您可以使用 JSFiddle： blockly workspace resizing.

【讨论】：

看起来不错。您能否详细回答一下您是如何做到的？如我所见，您在注入我从未见过的代码时使用了很多参数。
不需要任何特殊参数来满足您的目的（实际上只需要工具箱选项）。此处指定缩放选项：developers.google.com/blockly/installation/zoom#controls。它们允许使用鼠标滚轮（或半透明图标）放大/缩小工作区。

【解决方案3】：

我通过Blockly.svgResize api解决了这个问题，注意如果尺寸随着transition而变化，你必须设置一个超时函数并在超时回调中调用api，延迟就是transition时间。

【讨论】：