彩票走势图

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在年终钜惠抢购立享优惠只需2345，立即查看详情>>

点击下载MindFusion.Diagramming for WinForms最新试用版

在此博客文章中，我们将演示如何设置Unix / Linux系统以在Electron.js下运行示例JavaScript图应用程序。我们使用一台运行Raspberry Pi OS的Raspberry Pi计算机，Raspberry Pi OS是为Raspberry Pi硬件而优化的基于Debian的OS。

这是我们的测试应用程序的外观：

我们想要干净安装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目录的写权限。我们检查谁是目录的所有者：

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

二.图表设置

我们使用Electron快速入门指南中的默认模板准备一个空白页。在网页的主体中，我们创建一个Canvas，该Canvas将被该图使用：

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

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

<script>
   //创建图
   var Diagram = MindFusion.Diagramming.Diagram;

    //创建图对象
    const canvas = document.getElementById（“ diagram”）;
    const diagram = Diagram.create（canvas）;
    diagram.setUndoEnabled（true）;
    diagram.setAllowInplaceEdit（true）;
</ script>

让我们创建一个呈现一些文本的示例节点。我们这样做：

//创建一个样本节点
const node = diagram.getFactory（）。createShapeNode（10，10，40，30）;
node.setText（“ Hello world！”）;

npm start

三.替换默认的Electron.js菜单

我们要用对图表项目执行的操作替换默认的电子菜单“复制”，“剪切”，“粘贴”，“撤消”和“重做”。Diagram API支持相同的命令，我们希望它们执行而不是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));

这就是我们教程的结尾。从以下位置下载示例项目：https : 
//mindfusion.eu/_samples/FirstApp.zip

有关技术问题，请使用JS Diagram论坛：https : //mindfusion.eu/Forum/YaBB.pl?board=jsdiag_disc

关于JavaScript绘图：此本地JavaScript库为开发人员提供了创建和自定义任何类型的图，决策树，流程图，类层次结构，图，家谱树，BPMN图等的能力。该控件提供了丰富的事件集，众多的自定义选项，动画，图形操作，样式和主题。您有100多个预定义节点，表节点和15多种自动布局算法。在//mindfusion.eu/javascript-diagram.html上了解有关JavaScript制图的更多信息。