如何使用Javascript制作Blockly的一个实例?

前端之家收集整理的这篇文章主要介绍了如何使用Javascript制作Blockly的一个实例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在一个customBlocks.js文件中用Blockly完成了以下块: @H_301_2@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块中放置一个math_number块来放置要移动的像素数量.

我在我的html文件上有一个注入Blockly工作空间的工作区变量:

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

我想做什么

一旦块被显示在Blockly的工作区,而不是之前,从JavaScript中检索这一数量的像素.

我试过了

>我直接尝试从我的broser(谷歌浏览器)的控制台访问工作区变量,并可以获得“子块”,但不是它们的价值.如下:

@H_301_2@console.log(workspace.topBlocks_[0].childBlocks_);

>我也尝试将工作空间转换为dom,然后转换为text:

@H_301_2@var xml = Blockly.Xml.workspaceToDom(workspace); var xml_text = Blockly.Xml.domToText(xml); console.log(xml_text);

在这里我可以看到“子块”的值,我的意思是,math_number块,它存储在文本上,但我不知道如何得到它.

为什么要实现呢?

因为我想要的是检查用户是否向右移动了300像素.如果是这样,那么我会显示一个消息,我会把“你得到它”.

我的问题

有没有可能做一个这个块的实例,我放在工作区,然后访问它的像素值与该实例?

编辑:

我也可以得到@Oriol说左边的值:

@H_301_2@$('#moveDiv').css('left');

但是我并没有把它放在这里,因为它使用Jquery的属性(这根本不重要,因为它也是一个很好的选择,而不是这样).我的意图是将Block放在Blockly工作区上,随时随地进行操作.

提前致谢!

解决方法

有一种方法setWarningText来显示这种警告.您可以修改yor生成器如下: @H_301_2@Blockly.JavaScript['move_right'] = function(block) { var value_pixels = Blockly.JavaScript.valueToCode(block,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; };

这将在块本身中显示为警告图标.

在任何情况下,如果你想“记住”这个value_pixels变量,我相信更容易的方法是在生成器中执行,如上所示.您可以随时将其存储在可自定义功能的外部变量中.

编辑:

如果您需要遍历块结构以用于其他目的,则可以使用:

> Blockly.mainWorkspace.getTopBlocks(true); //获取顶级块
>顶层块列表中的迭代
> block = block.nextConnection&& block.nextConnection.targetBlock(); //要“下降”到块的子块中,然后迭代它们
> if(block.type ==“move_right”)… //检查特定的块类型

我希望这将给出一个起点,但是了解这些“技巧”的最好方法是阅读Blockly源代码.即使代码普遍得到很好的评论,AFAIK也没有办法自动生成文档,也不能在网络上使用.

原文链接:https://www.f2er.com/js/152021.html

猜你在找的JavaScript相关文章