2

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

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

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

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

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

我也尝试改变我blocklyDiv注入的地方Blockly workspace，display: flex;但它并没有改变任何东西。

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

提前致谢！

4

3 回答 3

2

我只使用 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

于 2017-07-25T03:50:09.760 回答
1

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

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

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

于 2016-05-31T11:45:47.673 回答
0

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

于 2020-11-24T08:05:05.143 回答