Blockly获取workspace的代码块截图

最新推荐文章于 2024-06-06 23:44:08 发布

__zackxiong__

最新推荐文章于 2024-06-06 23:44:08 发布

阅读量1.6k

点赞数

分类专栏： Blockly 文章标签： blockly

本文链接：https://blog.csdn.net/qq_22046267/article/details/81586649

版权

本文介绍了如何在使用Blockly的项目中实现代码块截图功能。首先获取工作区对象，重点关注svgBlockCanvas_属性，它是SVG对象。接着整理工作区的块以确保完整，然后引入saveSvgAsPng库将SVG转换为PNG。最后，通过库的svgAsPngUri方法完成转化。

摘要由CSDN通过智能技术生成

对于一些需要使用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.引入一

关注