起步

1. 安装

参考前面《安装》

2. 创建基础画布

// 1. 导入绘画引擎
import { Topology } from '@topology/core';
// 图形库
import { register as registerFlow } from '@topology/flow-diagram';
import { register as registerActivity } from '@topology/activity-diagram';
import { register as registerClass } from '@topology/class-diagram';
import { register as registerSequence } from '@topology/sequence-diagram';
import { register as registerChart } from '@topology/chart-diagram';
// 注册图形库
registerFlow();
registerActivity();
registerClass();
registerSequence();
registerChart();
// 2. 创建画布
// 其中，第一个参数'topo-canvas'表示canvas所在的父dom元素id，通常为<div class="canvas" id="topo-canvas"></div>；
// 第二个参数{}表示画布选项，这里表示全部使用默认值。具体选项请参考后面的api文档。
var canvas = new Topology('topo-canvas', {});
// 3. 渲染图形
// 画布图形数据，可以来自于官网下载的json
const json = {pens:[xxxx]};
canvas.open(json);
// 或 用window.topology对象 === 上面的canvas
topology.open(json);
// 4. 如果json发送变化，重绘
canvas.render();

new Topology()后，同时会在浏览器window下面创建一个topology引擎对象。
topology属性和api函数参考：API文档
例如：topology.pureData()表示获取引擎画布数据。

3. 左边图形库和右边属性栏

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

1. 在html上定义ondragstart函数 （html拖曳详细教程请百度）
2. 定义ondrag函数：

onDrag(event) {
  // @topology/core >= 0.2.26，解决浏览器手势插件命名冲突
  event.dataTransfer.setData('Topology', JSON.stringify(json));
}
// @topology/core < 0.2.26
event.dataTransfer.setData('Text', JSON.stringify(json));

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

{
  text: '圆角矩形',
  rect: {
    width: 200,
    height: 50
  },
  paddingLeft: 10,
  paddingRight: 10,
  paddingTop: 10,
  paddingBottom: 10,
  borderRadius: 0.1,
  name: 'rectangle'
}

https://www.yuque.com/alsmile/topology/faq#O7ntD

4. 示例

一分钟快速使用： https://www.yuque.com/alsmile/topology/odiyyq
topology-vue 使用指南：https://www.yuque.com/alsmile/topology/ay411e

es5使用示例： https://github.com/le5le-com/topology-es5-demo

es6简单使用示例： https://github.com/le5le-com/topology-demo-es6

typescript使用示例： https://github.com/le5le-com/topology/tree/master/src/app/home

附. 常用画布方法

// 获取画布数据
const data = this.canvas.data;
// 保存为图片blob
// toImage函数参数：type, quality, callback
this.canvas.toImage(null, null, blob => {
  // Do sth.
});
// 下载为图片
// saveAsImage函数参数：filename, type, quality
this.canvas.saveAsImage('canvas.png');
// 编辑相关操作
this.canvas.cut();
this.canvas.copy();
this.canvas.paste();
this.canvas.undo();
this.canvas.redo();