MindFusion.Diagramming for WinForms是一個能幫助你創(chuàng)建工作流和進程圖表的.NET控件；數(shù)據(jù)庫實體關(guān)系圖表；組織圖表；對象層次和關(guān)系圖表；圖表和樹。它是基于對象－圖表框，表格和箭頭類型，將其歸類分派給其他并結(jié)合成復雜的結(jié)構(gòu)。該控件提供超過預先定義的50多種圖表框，如自定義設(shè)計樣式和對圖表框著色等。MindFusion.Diagramming for WinForms現(xiàn)已加入在線訂購，Standard Single Developer版本原價2848現(xiàn)在年終鉅惠搶購立享優(yōu)惠只需2345，立即查看詳情>>

點擊下載MindFusion.Diagramming for WinForms最新試用版

在此博客文章中，我們將演示如何設(shè)置Unix / Linux系統(tǒng)以在Electron.js下運行示例JavaScript圖應(yīng)用程序。我們使用一臺運行Raspberry Pi OS的Raspberry Pi計算機，Raspberry Pi OS是為Raspberry Pi硬件而優(yōu)化的基于Debian的OS。

這是我們的測試應(yīng)用程序的外觀：

我們想要干凈安裝Node.js和npm，這就是為什么我們刪除所有以前的版本和安裝的原因，如果有的話：

sudo apt-get remove nodejs
sudo apt-get remove npm

sudo rm -rf ~/.npm
sudo rm -rf /usr/local/lib/node_modules

curl -0 -L //npmjs.org/install.sh | sudo sh

npm -v
node -v

-bash: /usr/bin/npm: No such file or directory

hash -r

在開始安裝electron之前，請確保當前用戶具有對node_modules目錄的寫權(quán)限。我們檢查誰是目錄的所有者：

ls -la / usr / local / lib / node_modules

drwxr-xr-x 3 root root 4096 Nov 30 12:48 .
drwxr-xr-x 6 root   root 4096 Nov 30 12:29 ..
drwxr-xr-x 9 root root 4096 Nov 30 12:29 npm

sudo chown -R pi: /usr/local/lib/node_modules

pi@raspberrypi:~ $ ls -la /usr/local/lib/node_modules
total 12
drwxr-xr-x 3 pi pi   4096 Nov 30 12:48 .
drwxr-xr-x 6 pi root 4096 Nov 30 12:29 ..
drwxr-xr-x 9 pi pi   4096 Nov 30 12:29 npm

npm install electron -g

二.圖表設(shè)置

我們使用Electron快速入門指南中的默認模板準備一個空白頁。在網(wǎng)頁的主體中，我們創(chuàng)建一個Canvas，該Canvas將被該圖使用：

<div>
<canvas id =“ diagram”>
</ canvas>
</ div>

<script src =“ MindFusion.Common.js”> </ script>
<script src =“ MindFusion.Diagramming.js”> </ script>

<script>
   //創(chuàng)建圖
   var Diagram = MindFusion.Diagramming.Diagram;

    //創(chuàng)建圖對象
    const canvas = document.getElementById（“ diagram”）;
    const diagram = Diagram.create（canvas）;
    diagram.setUndoEnabled（true）;
    diagram.setAllowInplaceEdit（true）;
</ script>

讓我們創(chuàng)建一個呈現(xiàn)一些文本的示例節(jié)點。我們這樣做：

//創(chuàng)建一個樣本節(jié)點
const node = diagram.getFactory（）。createShapeNode（10，10，40，30）;
node.setText（“ Hello world！”）;

npm start

三.替換默認的Electron.js菜單

我們要用對圖表項目執(zhí)行的操作替換默認的電子菜單“復制”，“剪切”，“粘貼”，“撤消”和“重做”。Diagram API支持相同的命令，我們希望它們執(zhí)行而不是Electron.js提供的命令。

我們打開電子項目模板的index.js文件并獲得菜單：

const {Menu} = require（'electron'）;
const menu = Menu.getApplicationMenu（）;

for (let item of menu.items)
  {
if (item.submenu)
{
  {
    for (let subitem of item.submenu.items)
{
  switch (subitem.role)
  {
case "undo":
case "redo":
case "cut":
case "copy":
case "paste":
  subitem.click =
    () => win.webContents.send(subitem.role);
  break;
  }
}
  }
}
  }

const {ipcRenderer} = require（'electron'）;

ipcRenderer.on("undo", () => diagram.undo());
ipcRenderer.on("redo", () => diagram.redo());
ipcRenderer.on("cut", () => diagram.cutToClipboard());
ipcRenderer.on("copy", () => diagram.copyToClipboard());
ipcRenderer.on("paste", () => diagram.pasteFromClipboard(10, 10, false, false));

這就是我們教程的結(jié)尾。從以下位置下載示例項目：https : 
//mindfusion.eu/_samples/FirstApp.zip

有關(guān)技術(shù)問題，請使用JS Diagram論壇：https : //mindfusion.eu/Forum/YaBB.pl?board=jsdiag_disc

關(guān)于JavaScript繪圖：此本地JavaScript庫為開發(fā)人員提供了創(chuàng)建和自定義任何類型的圖，決策樹，流程圖，類層次結(jié)構(gòu)，圖，家譜樹，BPMN圖等的能力。該控件提供了豐富的事件集，眾多的自定義選項，動畫，圖形操作，樣式和主題。您有100多個預定義節(jié)點，表節(jié)點和15多種自動布局算法。在//mindfusion.eu/javascript-diagram.html上了解有關(guān)JavaScript制圖的更多信息。