Blockly插件使用

• 路由
• • 下一篇
  • 歷史回顧
  • • Babylon.js部分
    • Blockly部分
• 前言
• 最終實現效果
• 本文內容
• • 安裝
  • 使用
• 后續計劃
• 開源項目GitHub鏈接
• 資源下載鏈接
• 你的點贊是我繼續編寫的動力

路由

下一篇

• Vue實現圖形化積木式編程(十二) ---- 執行Blockly生成代碼

歷史回顧

Babylon.js部分

• Vue實現圖形化積木式編程(一) ---- Babylon.js基礎場景搭建
• Vue實現圖形化積木式編程(二) ---- Babylon.js加載模型到場景中
• Vue實現圖形化積木式編程(三) ---- Babylon.js點擊拖拽移動模型
• Vue實現圖形化積木式編程(四) ---- Babylon.js實現碰撞效果
• Vue實現圖形化積木式編程(五) ---- Babylon.js自定義啟動界面
• Vue實現圖形化積木式編程(六) ---- Babylon.js相機控制與相機動畫
• Vue實現圖形化積木式編程(七) ---- babylonjs-gui 按鈕實現
• Vue實現圖形化積木式編程(八) ---- 將3d界面放入可拖動窗口中

Blockly部分

• Vue實現圖形化積木式編程(九) ---- Blockly代碼塊編輯區域基本場景搭建
• Vue實現圖形化積木式編程(十) ---- 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

資源下載鏈接

• Vue前端源碼
• ThinkJS后端源碼

你的點贊是我繼續編寫的動力

總結

以上是生活随笔為你收集整理的Vue实现图形化积木式编程(十一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。