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

我在一个customBlocks.js文件中用Blockly完成了以下块：

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工作空间的工作区变量：

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

我想做什么

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

我试过了

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

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

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

var xml = Blockly.Xml.workspacetoDom(workspace);
var xml_text = Blockly.Xml.domToText(xml); 
console.log(xml_text);

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

为什么要实现呢？

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

我的问题

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

编辑：

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

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

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

提前致谢！

解决方法

有一种方法setWarningText来显示这种警告.您可以修改yor生成器如下：

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也没有办法自动生成文档,也不能在网络上使用.

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

解决方法

相关文章