对于一些需要使用blockly的项目来说,有可能需要代码截图这个功能,这里就把我实现好的放出来,并简单说一说原理。
上面是官方的例子,那么我们如何拿到整个工作区域的代码块截图呢?
1.首先,需要获取工作区域(workplace)的对象
var demoWorkspace = Blockly.inject('blocklyDiv',{
media: '../../media/',
toolbox: document.getElementById('toolbox')
});
上面的demoWorkspace就是工作区域的对象。
如果我们使用console.log(demoWorkspace),我们可以再控制台看到很多属性。其中比较重要的一个svgBlockCanvas_ 其实这个就是一个svg对象。
通过对这个svg对象进行一些操作就可以转化为图片。
2.整理工作区域的块(重要)
如果没有完成这一步,得到的块有可能是不完整的。
下面就是整理块的代码,以上面的demoWorkspace这个作为例子:
demoWorkspace.cleanUp()
//整理块,可以在工作区域里右键看到这个功能
3.引入一