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

我正在尝试在div中调整我的Blockly workspace。我希望如果页面变得更小，它的div和Blockly workspace也会变小。是否有另一种方式来调整Blockly工作区的大小？

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

综观Google Chrome调试器我看到了，我可以设置一个max-height到svg对象，但我不知道如何更改height当你注入工作区：

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

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

我也尝试更改我的blocklyDiv，其中我将Blockly workspace注入到display: flex;但它不会改变任何内容。

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

在此先感谢！

来源

2016-04-25 Francisco Romero

你有一个链接或的jsfiddle证明？ – darrylyeo

@darrylyeo我可以创建一个，但我不知道如何添加Blockly到它。 –

我在blockly div中使用了一个简单的“width：100px”，它调整了大小。当然，如果块不适合工作区，那么会出现滚动条以允许在其中移动...我明白那不是你想要的吗？也许你想改变块的规模，使它们适合提供的空间？ – jrierab

正如我在上面的评论中所说的，我在调整blockly div的高度时允许宽度调整大小。

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

在这里，你有的jsfiddle一起玩： blockly workspace resizing。

来源

2016-05-31 11:45:47 jrierab

它看起来不错。你能否提供详细的答案，你如何做到这一点？正如我所看到的，当你注入我之前从未见过的代码时，你已经使用了很多参数。 –

无需为您的目的使用任何特殊参数（只需要工具箱选项）。缩放选项在此处指定：https：//developers.google.com/blockly/installation/zoom#controls。它们允许使用鼠标滚轮（或半透明图标）在工作区中放大/缩小。 – jrierab

我用CSS只得到相同的行为...

只需创建一个容器，你想要的任何大小和相对位置blockly编辑器，然后把blockly编辑器中具有绝对的位置。

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-25 03:50:09

似乎添加类别....它不显示侧面板了... –

@LucaDetomi我已经更新了两个随机类别的codepen示例。它也在工作，你可以看一下吗？谢谢！ –

没有胡安，我试图以编程方式更改'blocklyContainer'的宽度（您也可以从Inspector中执行此操作），并且在您强制浏览器窗口调整大小之前，画布大小不会更改...所以问题仍然存在：如何更改Blockly画布大小只改变DIV容器的大小，不改变浏览器窗口大小？ –

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

回答

相关问题