Blockly获取workspace的代码块截图

本文介绍了如何在使用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.引入一

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值