Vue实现图形化积木式编程(十一)

温温温B

已于 2022-07-23 14:09:03 修改

阅读量881

点赞数

文章标签： vue.js 前端 javascript

于 2022-07-07 11:16:12 首次发布

本文链接：https://blog.csdn.net/weixin_41895625/article/details/125653706

版权

Blockly插件使用

路由
前言
最终实现效果
本文内容
- 安装
- 使用
后续计划
开源项目GitHub链接
资源下载链接
你的点赞是我继续编写的动力

路由

Vue实现图形化积木式编程(十二) ---- 执行Blockly生成代码

历史回顾

Babylon.js部分

Blockly部分

前言

一年前想要做一个web端的图形化积木式编程（类似少儿编程）的案例，当时只是觉得积木模块和3D引擎都是我没有接触过的领域，能把它们结合起来做一个类似游戏案例挺有意思的。
现在回过头来看，在公司接触了流程自动化、HTML网页图文编辑、视频模版自动化等底代码平台的学习和开发之后，我觉得这是低代码的一种表现形式，也是我觉得喜欢和想要坚持的道路。
系统还不够完善，任重而道远。当然啦，停更这么久了，终于闲下来了，还是想要把未完待续给继续下去。这篇文章虽然内容很短，但是算是我重启博客之旅的开始吧哈哈哈哈哈。🏃🏃‍♀️🏃🏃‍♀️

TIPS：该案例设计主要参考iRobot Coding,只用做学习用途，侵删。

https://code.irobot.com/#/

最终实现效果

本文内容

Blockly自定义块插件使用，本项目使用的@blockly/fixed-edges插件，用于固定左上角边缘。

安装

安装使用npm i @blockly/插件名称

使用

具体使用可查看插件集合，fixed-edges插件使用方法如下。

import * as Blockly from 'blockly';
import {FixedEdgesMetricsManager} from '@blockly/fixed-edges';//导入插件

// 配置插件属性，固定左上角
FixedEdgesMetricsManager.setFixedEdges({
  top: true,
  left: true,
});

//注入blockly
const workspace = Blockly.inject('blocklyDiv', {
  toolbox: toolboxCategories,
  //配置插件
  plugins: {
    metricsManager: FixedEdgesMetricsManager,
  },
});

后续计划

小车控制方法的封装
接入js-interpreter，步骤运行block块

开源项目GitHub链接

https://github.com/Wenbile/Child-Programming-Web

资源下载链接

你的点赞是我继续编写的动力