scratch3.0二次开发之一个简单块的代码生成

这里简单介绍下一个简单块的代码生成吧,认识下一个块生成代码的过程吧。

要达到的效果

这是要生成代码的块
在这里插入图片描述
这是要生成的代码
在这里插入图片描述

导入一份语言生成文件,如c,python语言文件。

这个早期的scratch-blocks里面是有个generators的文件夹,里面存放的是语言文件,不过现在没有了。这里就拿python文件举例说说吧。
1、每个语言文件是Blockly.Generator方法的实例

 Blockly.Python = new Blockly.Generator('Python');

2、设置语言的关键字:

Blockly.Python.addReservedWords(
'ArithmeticError,AssertionError,AttributeError,BaseException,' +
        'BlockingIOError,BrokenPipeError,BufferError,BytesWarning,' +
        'ChildProcessError,ConnectionAbortedError,ConnectionError,' +
        'ConnectionRefusedError,ConnectionResetError,DeprecationWarning,EOFError,' +
        'Ellipsis,EnvironmentError,Exception,FileExistsError,FileNotFoundError,' +
        'FloatingPointError,FutureWarning,GeneratorExit,IOError,ImportError,' +
        'ImportWarning,IndentationError,IndexError,InterruptedError,'...
        )

3、设置运算符优先级:

 Blockly.Python.ORDER_OVERRIDES = [
        // (foo()).bar -> foo().bar
        // (foo())[0] -> foo()[0]
        [Blockly.Python.ORDER_FUNCTION_CALL, Blockly.Python.ORDER_MEMBER],
        // (foo())() -> foo()()
        [Blockly.Python.ORDER_FUNCTION_CALL, Blockly.Python.ORDER_FUNCTION_CALL],
        // (foo.bar).baz -> foo.bar.baz
        // (foo.bar)[0] -> foo.bar[0]
        // (foo[0]).bar -> foo[0].bar
        // (foo[0])[1] -> foo[0][1]
        [Blockly.Python.ORDER_MEMBER, Blockly.Python.ORDER_MEMBER],
        ...
        ]

4、每次代码的生成都经历了Blockly.Python.init,Blockly.Python.finish的过程:
Blockly.Python.init 创建了两个对象,Blockly.Python.definitions_ 用来存放引入的模块,或函数。

 // Create a dictionary of definitions to be printed before the code.
        Blockly.Python.definitions_ = Object.create(null);
        // Create a dictionary mapping desired function names in definitions_
        // to actual function names (to avoid collisions with user functions).
        Blockly.Python.functionNames_ = Object.create(null);

5、workspace生成代码:

Blockly.Python.workspaceToCode(workspace);

这个代码用在scratch-gui 的 src\containers\blocks.jsx文件中就是

this.ScratchBlocks.Python.workspaceToCode(this.workspace);

6、workspace监听,也在scratch-gui 的 src\containers\blocks.jsx 文件中,添加监听

this.workspace.addChangeListener(function(){...});

这样每拖动一个块到workspace,就会生成相应的代码。

找到生成代码块的type

在这里插入图片描述
在src\lib\make-toolbox-xml.js中,找到对应的块的type,motion_movesteps。

 
            
                
                    10
                
            
        

定义块生成的代码

 Blockly.Python['motion_movesteps'] = function (block) {
        var steps = Blockly.Python.valueToCode(block, "STEPS", Blockly.Python.ORDER_NONE);
        return 'move ' + steps + ' steps\n';
    };

拖动这个块的积木区,生成的代码效果:
scratch3.0二次开发之一个简单块的代码生成_第1张图片

块的取值

1、Blockly.Python.valueToCode
在这里插入图片描述

说明:xml中有value标签包含的用Blockly.Python.valueToCode,”STEPS“是定义块的时候设置的变量名,用来获取值,Blockly.Python.ORDER_NONE定义了这个块的优先级。
Blockly.Python.valueToCode(block, “STEPS”, Blockly.Python.ORDER_NONE);

2、Blockly.Python.statementToCode
在这里插入图片描述
用法: Blockly.Python.statementToCode(block, ‘SUBSTACK’);
说明:‘SUBSTACK’ 是定义块的时候设置的参数名。

还有其他的取值,这里就不详细列举了,还有什么不明白的,可以私信我。

你可能感兴趣的:(scratch3.0二次开发,scratch生成代码)