画布(class Topology)是整个绘画载体


// es6, npm lib
import { Topology } from 'topology-core';

// es5, bundle.js
Le5leTopology.Topology


class Topology的成员变量列表


名称

类型

默认值

描述

parentElem

HTMLElement

null

canvas元素的父元素。画布铺满整个父元素

canvas

HTMLElement

null

html的canvas元素,主画布,离屏的图像化显示。

offscreen自定义Canvas类Canvas

离屏层

hoverLayer

自定义HoverLayer类

HoverLayer

活动层

activeLayer

自定义Activelayer类

Activelayer

选中层

animateLayer

自定义AnimateLayer类

AnimateLayer

动画层

data

class TopologyData {

  nodes: Node[] = [];

  lines: Line[] = [];

  lineName = 'curve';

  fromArrowType = '';

  toArrowType = 'triangleSolid';

  scale = 1;

  locked = 0;

}


画布数据。

nodes - 节点数据

lines - 连线数据

lineName - 默认连线(名称)类型

fromArrowType - 连线起点默认箭头

toArrowType - 连线终点默认箭头

scale - 画布缩放大小

bkColor - 画布的背景色


locked - 画布锁定状态:

enum Lock {

  None,

  Readonly,

  NoEvent

}


None      (0)  - 未锁定,可任意编辑。

Readonly (1) - 只读模式,允许选中

NoEvent  (2) - 禁止鼠标交互,无法做任何操作。纯静态画面模式。

options

自定义Options接口

...

画布选项。详细描述见下面构造函数



class Topology的成员函数列表


constructor构造函数

constructor(parent: string | HTMLElement, options?: Options)


参数

名称

类型

是否必选

描述

parent string | HTMLElement

canvas的父元素

options

Options

画布选项


画布选项 Options


import { Options, KeyType} from 'topology-core/options';
const options: Options = {...}


名称

类型

是否必选

描述

widthnumber

画布宽。默认为parent的width

height

number

画布高。默认为parent的height

color

string

画布默认节点、连线颜色。默认黑。

activeColor

string

选中层颜色

hoverColor

string

活动层颜色

dragColor

string

鼠标框选节点的拖选框颜色

font

object: {

    color: string;

    fontFamily: string;

    fontSize: number;

    lineHeight: number;

    textAlign: string;

    textBaseline: string;

  }

画布默认字体

hideInput

boolean

是否禁止双击节点文字,出现文字输入框

hideRotateCP

boolean

是否隐藏节点旋转控制点

hideSizeCP

boolean

是否隐藏节点大小控制点

disableScale

boolean

是否禁止默认的Ctrl + 鼠标滚轮缩放。


用户仍然可以使用scale函数,方便用户定制缩放交互。

disableEmptyLine

boolean

是否禁止连线终点为空(未连接到节点)

rotateCursor

string

控制节点旋转的鼠标图标。cur格式文件。

playIcon

string

视频播放时,播放图标。

必须为字体图标的类名:例如,阿里字体图标

pauseIcon

string

视频播放时,暂停图标

fullScreenIcon

string

视频播放时,全屏图标

loopIcon

string

视频播放时,循环播放图标

translateKey

enum KeyType {

  CtrlOrAlt,

  None,

  Ctrl,

  Shift,

  Alt

}

平移画布快捷键类型


平移画布时,是否同时需要Ctrl/Shift/Alt等功能键

scaleKeyKeyType

缩放画布快捷键类型

on

 回调函数:

(event: stringdata: any=> void

接收画布消息的回调函数。

event - 消息名

data - 消息内容


推荐用es6的箭头函数 ()=>{},方便使用上下文中的this;否则请注意this指向。


例如:

this.canvasOptions.on = this.onMessage ;


onMessage = (eventdata=> {};

extDpiRatio

number

支持高清屏方案后,额外增加的dpi值,默认:0.25。即高清屏默认dpi值为:window.devicePixelRatio / backingStorePixelRatio + 0.25;


似乎不同windows系统+浏览器下,显示效果不一致。有人反映,不加0.25更清晰;个人电脑加0.25更清晰。



var canvas = new Le5leTopology.Topology("topo-canvas", {
  on: function(event, data) {
    console.log(event, data);    
  }
});


resize设置大小

resize(size?: { width: number; height: number })


参数

名称

类型

是否必选

描述

sizeobject

空:自动根据父元素计算

非空:大小等于size的width和height


ondrop拖放接收函数

private ondrop(event: DragEvent)

私有函数。允许接收一个拖曳事件,通过event.dataTransfer.getData('Text')获取一个表示节点数据的json字符串。

json格式如下:


                {
          rect: {
            width: 50,
            height: 70
          },
          is3D: true,
          z: 10,
          zRotate: 15,
          fillStyle: '#ddd',
          name: 'cube',
          icon: '\ue63c',
          iconFamily: 'topology',
          iconColor: '#777',
          iconSize: 30
        }


其中,拖曳事件参数如下

名称

类型

是否必选

描述

name

string

节点名称

rectobject

width

height

is3D

boolean

是否是一个3D类型的节点: 

是 - 多一个z坐标

z

number

3D坐标中的z坐标

zRotate

number

z轴旋转角度

fillStyle

string

填充颜色,默认无。

icon

string

节点图标的字体图标的Unicode

iconFamily

string

字体图标公共类名

iconColor

string

字体图标颜色

iconSize

number

字体图标大小

image

string

节点图标的图片链接。

图片、字体图标同时存在时,图片优先





addNode添加节点

addNode(node: Nodefocus = false): boolean

添加一个节点,返回是否成功。


参数:


示例:


 private ondrop(event: DragEvent) {
    event.preventDefault();
    const node = JSON.parse(event.dataTransfer.getData('Text'));
    node.rect.x = event.offsetX - ((node.width / 2) << 0);
    node.rect.y = event.offsetY - ((node.height / 2) << 0);
    this.addNode(new Node(node), true);
  }


addLine添加连线

addLine(line: Linefocus = false)

添加一个连线。


参数:


addLineByPt添加连线

addLineByPt(name: stringfrom: PointfromArrow: stringto: PointtoArrow: stringfocus = false): boolean

添加一个连线。


参数:


open打开文件

open(data: object

打开一个新文件。通常,data为保存过的画布数据canvas.data。

参数为json对象,非字符串


render重绘画布

render()


getRect获取图形大小,画布四周空白不计算在内

getRect()


如下图,仅计算框选的区域大小,画布四周空白不计算在内。

image.png


undo撤消

undo()


撤消操作。


redo重做

redo()


delete删除选中元素

delete()


cut剪切

cut()


copy复制

copy()


parse粘贴

parse()


toImage

toImage(type?: string, quality?: any, callback?: BlobCallback): string


转换画布为图片:

当callback为空时,返回图片url。参考canvas.toDataURL(type, quality)。

当callback不为空时,返回空;调用callback,传入图片blob。参考canvas.toBlob(callback)

参数

名称

类型

是否必选

描述

type

string

图片类型

quality

string

图片质量

callback

function

callback为空:

返回图片url。

参考canvas.toDataURL(type, quality)


callback不为空:

返回空;调用callback,传入图片blob。

参考canvas.toBlob(callback)


saveAsImage保存画布为图片并下载

saveAsImage(name?: string, type?: string, quality?: any)


参数

名称

类型

是否必选

描述

name

string

图片另存为的文件名。默认 'le5le.topology.png'

type

string

图片类型

quality

string

图片质量


lock 锁定画布

lock(lock: boolean)

对画布锁定,影响整个画布


参数

名称

类型

是否必选

描述

lock

number

0 - 未锁定,可任意编辑。

1 - 全部锁定,不能做任何编辑,允许选中,并高亮

2 - 无法做任何操作,只能响应space事件


lockNodes 锁定节点

lockNodes(nodes: Node[], lock: boolean


lockLines 锁定连线

lockLines(lines: Line[], lock: boolean)


cache缓存画布数据

cache()

缓存当前数据到undo/redo队列末尾,为撤消/重做增加一个数据状态。


overflow图像溢出检查

overflow()

计算图像大小,是否溢出画布范围。是,重新设置画布大小。


updateProps通知有数据属性更新

updateProps(node?: Node)

适用于node或line属性变化。调用此方法通知有属性更新,添加一个缓存,方便undo。


参数

名称

类型

是否必选

描述

node

Node

需要更新属性的节点。


涉及到节点位置、控制点等变化,必须传节点参数

说明:传入参数node主要自动计算node大小。连线属性修改,无需传入参数。


animate渲染(播放)动画

animate()

修改节点、连线动画属性(包括帧、播放/停止状态)后,通知重绘动画。


top置顶节点

top(node: Node)

置顶一个节点到画布顶层。


bottom置底节点

bottom(node: Node)

置底一个节点到画布底层。


combine组合多个节点为一个新节点

combine(nodes?: Node[], stand?: boolean)

参数

名称

类型

是否必选

描述

nodes

Node[]

要组合的节点


默认选中的节点

stand

boolean

子节点是否能够独立选中移动


uncombine取消组合

uncombine(node?: Node

把一个组合节点取消组合,还原到以前多个节点的状态


参数

名称

类型

是否必选

描述

node

Node

要取消组合的节点


默认选中的第一个节点



translate平移画布

translate(x: numbery: number


scale缩放画布

scale(scale: number)

在当前缩放状态下,继续缩放


参数

名称

类型

是否必选

描述

scale

number

1 - 不缩放

> 1 - 放大

< 1 - 缩小


scaleTo缩放到

scaleTo(scale: number

在原始视图基础上,缩放到指定比例。


destory清理资源

destory(

清理画布申请创建的资源。