左边图形库和右边属性栏

目前开源的是核心库，可以基于核心库开发不同上层应用。核心库只有画布，左边图形库和右边属性栏属于上层业务，每个项目的需求和产品原型可能不同，需要自己调用api文档里面的接口去实现。

使用我们官方的topology-vue组件（这个也是基于核心库开发）的企业版功能需要收费。

核心库已经支持拖曳事件，我们实现左边拖拉拽的时候，只需要：

  1. 在html上定义ondragstart函数 （html拖曳详细教程请百度）
  2. 定义ondrag函数：
  1. onDrag(event) {
  2.   // @topology/core >= 0.2.26，解决浏览器手势插件命名冲突
  3.   event.dataTransfer.setData('Topology', JSON.stringify(json));
  4. }
  6. // @topology/core < 0.2.26
  7. event.dataTransfer.setData('Text', JSON.stringify(json));

上面json格式为 API文档 中的节点格式，例如：

  1. {
  2.   text: '圆角矩形',
  3.   rect: {
  4.     width: 200,
  5.     height: 50
  6.   },
  7.   paddingLeft: 10,
  8.   paddingRight: 10,
  9.   paddingTop: 10,
  10.   paddingBottom: 10,
  11.   borderRadius: 0.1,
  12.   name: 'rectangle'
  13. }

阿里字体图标不显示

需要index.html中加载阿里字体文件

公网地址：

  1.  // 左侧工具栏图标
  2. <link href="//at.alicdn.com/t/font_1113798_m8wtja2grda.css" rel="stylesheet" />
  3. // 右侧图形库图标
  4. <link href="//at.alicdn.com/t/font_1331132_5lvbai88wkb.css" rel="stylesheet" />

本地文件：（源码路径：.\examples\angular\src\assets\font）

  1. // 左侧工具栏图标
  2. <link href="/assets/font/iconfont.css" rel="stylesheet" />
  3. // 右侧图形库图标
  4. <link href="/assets/font/libs/iconfont.css" rel="stylesheet" />

由于官网用了两套阿里字体文件，为了避免冲突，需要设置不同的字体名称：

image.png
image.png

传给画布节点的iconFamily需要根据实际情况正确设置。
在源码中的iconFamily使用的是：topology。 开发者自己的项目，需要更加自己的字体库设置指定。

动态更新变化

  1.   canvas = new Topology(...)<br />可以通过下面3种方式实现：
  1. 通过canvas.data得到画布实时数据，遍历查找canvas.data.nodes、canvas.data.lines等，修改你需要修改的属性，然后执行 canvas.render()
  2. 通过监听消息事件，得到一个node或line，修改你需要修改的属性，然后执行 canvas.render()
  3. 直接canvas.open(你最新的json)

参考：https://github.com/le5le-com/topology-es5-demo

  2. fetch("/data.json", function(text) {
  3.   var data = JSON.parse(text);
  4.   // 锁定画布，禁止编辑
  5.   data.locked = 1;
  6.   console.log(data);
  7.   canvas.open(data);
  9.   // 动画演示示例
  10.   var cnt = 0;
  11.   var colors = ["red", "blue", "yellow"];
  12.   setInterval(() => {
  13.     ++cnt;
  14.     var nodes = [];
  15.     getNode(nodes, canvas.data.nodes, "testImage");
  16.     for (var i = 0; i < nodes.length; i++) {
  17.       if (cnt % 2) {
  18.         nodes[i].image = "/image/s01g_374d46e9c71c823a.png";
  19.       } else {
  20.         nodes[i].image = "/image/g02__bdfcbc32cfc689bc.png";
  21.       }
  22.     }
  24.     nodes = [];
  25.     getNode(nodes, canvas.data.nodes, "testNum");
  26.     for (var i = 0; i < nodes.length; i++) {
  27.       nodes[i].text = +nodes[i].text + 1 + "";
  28.       nodes[i].font.color = colors[cnt % 3];
  29.     }
  30.     canvas.render();
  31.   }, 2000);
  32.   // end.
  33. });

显示完整图像

默认画布以100%比例显示图像，超出部分，可以给父元素设置overflow:auto滚动条属性。

如果要显示完整图像，则需要缩放显示比例：

  1. canvas = new Topology(...);
  3. // 1. 获取有效图像区域
  4. const rect = canvas.getRect();
  6. // 2. 根据rect自行判断图像是否超出，或空白太多。
  8. // 3. 平移或缩放画布内容
  9. canvas.translate(x,y);
  10. canvas.scaleTo(.5);

修改属性后，没有立刻生效

通常情况，节点或连线属性变化后，需要执行：

  1. // 节点或连线属性变化后, 执行画布重绘
  2. canvas.render()

涉及到node/line的位置、控制点等的修改，需要执行：

  1. // 为了稳妥，可以统一使用此函数。
  2. canvas.updateProps(参数);
  4. // 此函数会只计算有关位置、点等属性

参考文档：updateProps

修改连线的name：直线为曲线报错

需要计算连线控制点：line.calcControlPoints();

子节点选择

shift + 单击： 单选，可用于选择子节点/连线。

ctrl + 单击： 多选。
ctrl + 单击鼠标按下不放（移动）：移动子节点。

新版本节点修改

新增了 square 节点，代表原来的rectangle；原来的rectangle 为更直观的长方形。

背景网格

为了避免截图出现网格，目前需要自己实现，在父dom加一个svg（网上很多）就可以了。

参考：
https://github.com/le5le-com/topology/blob/master/examples/angular/src/app/workspace/workspace.component.html

节点特效切换后，为什么不播放了

因为动画帧被清理了，需要重计算，执行node.initAnimate()即可。

topology-vue 编辑页刷新报错

编辑node_modules\@topology\core\src\middles\default.js文件，把最后以后改成：
process.browser && (window.registerTopologyNode = registerNode);

image.png

暂时不为nuxt单独编写特地代码。

topology/example/angular 本地运行

建议使用yarn工具（因为我们用到了yarn workspace模式）

  1. 到源码根目录安装依赖包。源码根目录执行命令行：yarn
  2. 到topology/example/angular目录安装依赖包：yarn
  3. 在topology/example/angular目录命令行执行本地开发命令： yarn start

MQTT一直重连

  1. 检测是否客户端id相同导致一直断线重连
  2. 公网免费服务器不稳定
  3. 如果不希望自动断线重连，设置mqtt.options.reconnections=0即可

鼠标框选错位

原因：

  1. 父dom元素css还没渲染完，就加载画布；
  2. 修改了父dom元素位置

解决方案：

  1. 等待父dom元素css加载完成后在new Topology
  2. 修正画布位置： topology.canvasPos = topology.divLayer.canvas.getBoundingClientRect();

保存为SVG

需要下载：
http://topology.le5le.com/assets/js/canvas2svg.js

svg不具备动态效果。需要动态效果的，请下载json，然后在我们的画布打开open。

添加子节点

  1. child = new Node(item);
  2. child.parentId = node.id;
  3. child.calcRectByParent(node);
  4. node.children.push(child)

可执行 JavaScript 的，有哪些参数？

image.png
可执行 JavaScript 的地方的参数可能是不同的，但这里的本质就是一个普通函数，所以我们可以使用 JS 的函数特性，打印一下 arguments 来查看当前参数。

  1. console.log(arguments);

修改连线控制点，拖拽后，控制点又重新计算

连线类 Line ，存在属性 manualCps ，当为 true 时，会禁止自动计算。
参考链接：https://www.yuque.com/alsmile/topology/line

视频 url 设置

节点 name 为 div 的可以设置视频 URL 。
image.png