我在 customBlocks.js
文件中使用 Blockly
完成了以下 block :
Blockly.Blocks['move_right'] = {
init: function() {
this.appendValueInput("PIXELS")
.setCheck("Number")
.appendField("move to right");
this.setInputsInline(true);
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
this.setColour(290);
this.setTooltip('');
this.setHelpUrl('http://www.example.com/');
}
};
Blockly.JavaScript['move_right'] = function(block) {
var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
// TODO: Assemble JavaScript into code variable.
var codeMoveRight = "$(\"#moveDiv\").animate({\n " +
"left: \"+=" + value_pixels + "px\"\n" +
"},1000);\n";
return codeMoveRight;
};
根据您在其上设置的像素数将 div
移动到右侧。您必须在 move_right
block 中放置一个 math_number
block ,以放置您想要移动的像素数量。
我的 html
文件中有一个 workspace
变量,它注入(inject)了 Blockly workspace
:
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
我想做什么
它是在 block 显示在 Blockly 的工作区上时从 JavaScript 中检索此数量的像素,而不是之前。
我尝试过的
我直接尝试从我的兄弟 (Google Chrome) 的控制台访问
workspace
变量,并且可以获得“子 block ”但不是它们的值。如下:console.log(workspace.topBlocks_[0].childBlocks_);
我还尝试将工作区转换为 dom,然后再转换为文本:
var xml = Blockly.Xml.workspaceToDom(workspace); var xml_text = Blockly.Xml.domToText(xml); console.log(xml_text);
在这里我可以看到“子 block ”的值,我的意思是
math_number
block ,它存储在文本中,但我不知道如何获取它。
我为什么要实现它?
因为我想要的是检查用户是否向右移动了 300 像素。如果是这样,那么我将显示一条消息,其中我将输入“你明白了!”。
我的问题
是否可以创建我放在工作区中的那个 block 的实例,然后使用该实例访问它的像素值?
编辑:
我也可以获得 left
值,正如@Oriol 所说:
$('#moveDiv').css('left');
但我没有把它放在这里,因为它使用了 Jquery
的一个属性(这根本不重要,因为它也是一个不错的选择,但不是预期的那样)。我的目的是将 Block
的实例放在 Blockly workspace
上,以便以后随时使用它进行操作。
最佳答案
有一种方法setWarningText 可以显示这种警告。您可以按如下方式修改您的生成器:
Blockly.JavaScript['move_right'] = function(block) {
var value_pixels = Blockly.JavaScript.valueToCode(block, 'PIXELS', Blockly.JavaScript.ORDER_ATOMIC);
// TODO: Assemble JavaScript into code variable.
var codeMoveRight = "$(\"#moveDiv\").animate({\n " +
"left: \"+=" + value_pixels + "px\"\n" +
"},1000);\n";
// You can show a blockly warning
if( value_pixels >= 300 ) block.setWarningText("You get it!");
// Or you can store its value elsewere...
// myExternalVar = value_pixels;
return codeMoveRight;
};
这将在 block 本身中显示为警告图标。
无论如何,如果您想“记住”这个value_pixels 变量,我相信更简单的方法是在生成器中完成,如上所示。您始终可以将其存储在可从自定义函数访问的外部变量中。
编辑:
如果出于其他目的需要遍历 block 结构,可以使用:
- Blockly.mainWorkspace.getTopBlocks(true);//获取顶层 block
- 顶级阻止列表的迭代
- block = block.nextConnection && block.nextConnection.targetBlock();//“下降”到 block 的子 block ,然后迭代它们
- if(block.type=="move_right") ...//检查特定的方 block 类型
我希望这能提供一个起点,但了解这些“技巧”的最佳方式是阅读 Blockly 源代码。即使代码通常有很好的注释,AFAIK 也没有办法自动生成文档,而且它在网络上也不可用。
关于javascript - 如何使用 Javascript 创建 Blockly block 的实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36499757/