【国产开源可视化引擎】Meta2d.js API-Core

国产开源

乐吾乐潜心研发，自主可控，持续迭代优化

Github：https://github.com/le5le-com/meta2d.js

Gitee: meta2d.js: The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。

欢迎Star、Fork、博文支持

2D可视化引擎

// 创建
new Meta2d('id', options);

属性

名称	类型	描述
parent	HTMLElement	可视化引擎的父容器
options	Options	可视化引擎选项
canvas	Canvas	绘画画板
store	Meta2dStore	绘画数据。包括文件数据和各种状态数据等
websocket	WebSocket	原生 WebSocket 客户端。仅连接成功才有实例
mqttClient	Mqtt.Client	mqtt.js 通信客户端
beforeAddPens	(pens: Pen[]) => Promise<boolean>	添加 Pen[] 前生命周期函数，返回 true 允许
beforeRemovePens	(pens: Pen[]) => Promise<boolean>	移除 Pen[] 前生命周期函数，返回 true 允许
beforeAddAnchor	(pen: Pen, anchor: Point) => Promise<boolean>	添加 Anchor 前生命周期函数，返回 true 允许
beforeRemoveAnchor	(pen: Pen, anchor: Point) => Promise<boolean>	移除 Anchor 前生命周期函数，返回 true 允许

数据结构

通过 meta2d.data() 函数获取，返回数据格式如下：

名称	类型	描述
color	string	画笔默认颜色，如果没特别设置，颜色包括：文字和边框
penBackground	string	画笔默认背景色
activeColor	string	画笔选中颜色
activeBackground	string	画笔选中背景颜色
pens	Pen[]	画笔数组
x	number	画布 x 偏移
y	number	画布 y 偏移
width	number	画布大屏宽度
height	number	画布大屏高度
scale	number	画布缩放比例
origin	Point	画布原点
center	Point	画布缩放中心点
locked	LockState	画布锁定
websocket	string	websocket 通信地址
mqtt	string	mqtt 通信地址
mqttTopics	string	mqtt 订阅主题
background	string	画布背景颜色
socketCbJs	string	消息通信回调函数 js 代码
initJs	string	打开图纸后，执行的初始脚本
grid	boolean	是否显示网格
gridColor	string	网格颜色
gridSize	number	网格大小
rule	boolean	是否显示标尺
ruleColor	string	标尺颜色
fromArrow	string	默认起始箭头
toArrow	string	默认终点箭头
lineWidth	number	默认线宽
smoothNum	number	连线平滑量，默认20，值越大越平滑，值越小画面越流畅。

Options

通过new Meta2d('id', options)或setOptions函数设置

名称	类型	描述
color	string	画笔默认颜色，如果没特别设置，颜色包括：文字和边框
background	string	画布背景颜色
shadowOffsetX	number	阴影水平偏移距离
shadowOffsetY	number	阴影垂直偏移距离
shadowBlur	number	阴影模糊效果程度
shadowColor	string	阴影颜色
globalAlpha	number	背景透明度
activeColor	string	画笔选中颜色
activeBackground	string	画笔选中背景颜色
hoverColor	string	鼠标移动到画笔上的颜色
hoverBackground	string	鼠标移动到画笔上的背景颜色
anchorColor	string	锚点颜色
anchorRadius	number	锚点半径
anchorBackground	string	锚点背景颜色
dockColor	string	辅助线颜色
dragColor	string	鼠标框选多个节点时，边框颜色
animateColor	string	连线动画颜色
textColor	string	文字颜色
fontFamily	string	文字字体
fontSize	number	文字大小
lineHeight	number	文字行高
textAlign	string	文字水平对齐方式
textBaseline	string	文字垂直对齐方式
rotateCursor	string	旋转控制点的鼠标样式
hoverCursor	string	鼠标经过画笔的样式
disableInput	boolean	禁用双击弹出输入框
disableRotate	boolean	禁止旋转
disableAnchor	boolean	禁止显示锚点
autoAnchor	boolean	连线时，自动选中节点锚点
disableEmptyLine	boolean	禁止存在两端关联缺少的连线
disableRepeatLine	boolean	禁止存在关联重复的连线
disableScale	boolean	禁止画布缩放
disableTranslate	boolean	禁止画布移动
disableDock	boolean	取消所有辅助线
disableDockLine	boolean	取消移动连线时辅助线
minScale	number	画布最小缩放比例
maxScale	number	画布最大缩放比例
keydown	KeydownType	快捷键监听对象，默认 document；-1 不监听快捷键，需在 Meta2d 初始化时配置
grid	boolean	是否显示网格
autoAlignGrid	boolean	是否自动对齐网格
gridColor	string	网格颜色
gridSize	number	网格大小
rule	boolean	是否显示标尺
ruleColor	string	标尺颜色
ruleOptions	object	{    height:number; //高度    background:string; //背景颜色    underline:boolean; //下边线是否显示    textColor:string; //文字颜色    textLeft:number; //文字左偏移    textTop:number;//文字顶部偏移    baseline:string; //‘bottom’表示子刻度靠下对齐  },
drawingLineName	string	默认连线类型名称
fromArrow	string	默认连线起始箭头
toArrow	string	默认连线终点箭头
autoPolyline	boolean	是否自动计算多线段锚点
interval	number	绘画帧时长
animateInterval	number	动画帧时长
dragAllIn	boolean	框选画笔时，是否需要全部在框选区域内
scroll	boolean	默认是否显示滚动条。与默认缩放互斥，建议不要同时配置禁止缩放：disableScale
defaultAnchors	Point[]	默认图形的默认锚点，例如：正方形等。
moveConnectedLine	boolean	是否允许拖动连接线
mouseRightActive	boolean	是否允许右键选中节点，默认true允许
disableClipboard	boolean	是否禁止系统剪切板，默认false不禁止
drawingLineLength	number	画线过程中允许的最大长度，为0表示不限
disableTouchPadScale	boolean	是否禁止触控板双指缩放，默认false
domShapes	string[]	扩展的dom画笔name,处理dom移动过程中会产生新的dom问题
textRotate	boolean	文字是否旋转,默认true
textFlip	boolean	文字是否镜像,默认true
polylineSpace	number	pen.lineName==='polyline'时，拐点到锚点的距离，默认10
hoverAnchorColor	string	鼠标经过锚点的颜色
unavailableKeys	string[]	需要屏蔽的快捷键，注意复制/粘贴需要关闭disableClipboard配置。
activeLineDash	number[]	选中框 线条样式（dash）
activeLineWidth	number	选中框 线宽
activeGlobalAlpha	number	选中框 透明度
strictScope	boolean	严格大屏范围（严格不允许大屏范围外作图）(v≥1.0.33)
padding	Padding(number)	画布限制超出大屏范围的拖拽边界值，如果整个大屏范围在可视页面，则无效果。(v≥1.0.33)
resizeMode	boolean	选中时，显示8个调整图元大小的操作方块，默认显示4个。(v≥1.0.33)
width	number	画布大屏宽度
height	number	画布大屏高度
scaleOff	number	滚轮缩放，滚动每次缩放的大小
scrollButScale	boolean	滚动模式下，滚轮缩放画布，拖动滚动条滚动页面

Meta2dStore

meta2d.store的数据结构定义：

名称	类型	描述
id	string	当前引擎实例 id。一个页面可以有多个可视化引擎实例
data	Meta2dData	绘画（图纸）数据。包含自动计算的临时变量
pens	Object（id: pen）	画笔 map。方便检索 pen
active	Pen[]	选中的画笔。数组
hover	Pen	鼠标经过活动的画笔。单 Pen
activeAnchor	Point	选中的锚点
hoverAnchor	Point	鼠标经过活动的锚点
animates	Set	正在播放动画的 pen
dpiRatio	number	高清屏比例。一般用户不用修改此值
clipboard	Pen[]	剪贴板内容
histories	EditAction[]	撤消重做内容
historyIndex	number	撤消重做游标
options	Options	可视化引擎选项

函数

constructor

构造函数，创建一个可视化引擎对象。

参数：

• parent ：string | HTMLElement
  可视化引擎的父容器 id 或 Element 元素
• options ：Options
  可视化引擎选项，可缺省

返回：
void

示例：

var meta2d = new Meta2d('meta2d');

var meta2d = new Meta2d('meta2d', options);

var meta2d = new Meta2d(div, options);

setOptions

设置引擎选项。

参数：

• options ：Options
  可视化引擎选项

返回：
void

示例：

var meta2d = new Meta2d('meta2d');
meta2d.setOptions(options);

Copy

getOptions

获取引擎选项。

参数：
无

返回：
void

示例：

var meta2d = new Meta2d('meta2d');
var options = meta2d.getOptions();

resize

重置可视化引擎大小

参数：

• width: number
  新的宽度。可缺省自适应
• height: number
  新的高度。可缺省自适应

返回：
void

示例：

meta2d.resize();

meta2d.resize(1000, 800);

addPen

添加画笔 Pen 到画布

参数：

• pen: Pen
  画笔
• history: boolean
  是否加入编辑历史记录（撤消重做）。缺省不加入历史

返回：
void

示例：

const pen = {
  name: 'rectangle',
  text: '矩形',
  x: 100,
  y: 100,
  width: 100,
  height: 100,
};
meta2d.addPen(pen);

meta2d.addPen(pen, true);

addPens

批量添加画笔 Pen 到画布

参数：

• pen: Pen[]
  画笔数组
• history: boolean
  是否加入编辑历史记录（撤消重做）。缺省不加入历史

返回：
void

示例：

const pen = {
  name: 'rectangle',
  text: '矩形',
  x: 100,
  y: 100,
  width: 100,
  height: 100,
};

const pen2 = {
  name: 'rectangle',
  text: '矩形2',
  x: 300,
  y: 100,
  width: 100,
  height: 100,
};

meta2d.addPens([pen, pen2]);

meta2d.addPens([pen, pen2], true);

render

重绘。主要用于手动修改数据后，重绘显示最新画面。

参数：

• dirty: number | boolean
  时间的毫秒数 或 是否脏
  可为空 - 表示当前时间，下一个绘画周期重绘
  true - 于空完全相同
  false - 且 meta2d.canvas.dirty(新版本dirty重命名为patchFlags) 为 true 时，在下一个绘画周期重绘。常用在不确定是否需要重绘时使用，例如说本次修改数据可能需要重绘时，在可能的情况下将 (meta2d.canvas.dirty = true) ，再执行 meta2d.render(false) ，这样不会导致非重绘的情况也重绘。
  number - 不推荐使用 number
  主要用于避免一帧内，多次频繁调用 render 带来不必要的绘画开销

返回：
void

示例：

// 多次频繁调用，有性能保护，且显示最新
for (let i = 0; i < 100; i++) {
  meta2d.render();
}

// 修改过数据，确认数据已经dirty
meta2d.render();

open

打开图纸。图纸指在线绘画的内容，可保存为 json 数据。

参数：

• data: Meta2dData
  json 图纸数据。可为空，表示打开新的空白文档
• render:boolean

是否触发重绘。

返回：
void

示例：

const pen = {
  name: 'rectangle',
  text: '矩形',
  x: 100,
  y: 100,
  width: 100,
  height: 100,
};

meta2d.open({ pens: [pen] });


//render
meta2d.open(data,false); //首次不重绘
meta2d.fitView();//居中/适应窗口大小等操作
meta2d.render(true); //重绘

connectSocket

消息通信重连（默认自动连接）。需要提前已经设置过连接配置。更多用法参考：实时数据通信

参数：
无

返回：
void

示例：

meta2d.store.data.websocket = url;

meta2d.connectSocket();

drawLine

开始钢笔绘画。Enter、Escape、鼠标右键完成绘画。

参数：

• lineName ：string
  线类型名称：内置 curve、polyline、line、mind 4 种。可自定义扩展。
  当 lineName 为空时，表示取消画线

返回：
void

示例：

// 开始钢笔绘画
meta2d.drawLine('curve');

// 取消绘画
meta2d.drawLine();

finishDrawLine

钢笔绘画完成

参数：

• end : boolean
  当前鼠标位置是否作为结束点。默认否。

返回：
void

示例：

// 开始钢笔绘画
meta2d.drawLine('curve');

// 绘画完成
meta2d.finishDrawLine();

drawingPencil

开始铅笔绘画。鼠标抬起完成绘画
参数：
无

返回：
void

示例：

meta2d.drawingPencil();

stopPencil

停止铅笔绘画，鼠标恢复默认状态
参数：
无

返回：
void

示例：

meta2d.stopPencil();

lock

更改画布锁定状态，并且关闭铅笔，钢笔
参数：
lock LockState

参数说明：

enum LockState {
  // 0 -未锁定
  None,
  // 1 - 禁止拖拽/编辑图元；图元可选中、高亮、触发事件等
  DisableEdit,
  // 2 - 禁止编辑图元、禁止左键移动画布；图元可选中、高亮、触发事件等 
  DisableMove,
  // 3 - 禁止缩放画布
  DisableScale, 
  // 4 - 禁止左键移动和缩放画布
  DisableMoveScale,
  // 10 -画布不能移动和缩放，图元不能触发任何事件
  Disable = 10,
}

返回：
void

示例：

meta2d.lock(1);

finishPencil

铅笔绘画完成

参数：
无

返回：
void

示例：

meta2d.drawingPencil();

// 绘画完成
meta2d.finishPencil();

updateLineType

修改连线类型。比如曲线变为直线

参数：

• pen: Pen
  当前连线
• lineName : string
  线类型名称：内置 curve、polyline、line、mind 4 种。可自定义扩展。

返回：
void

示例：

meta2d.updateLineType(line, 'curve');

meta2d.updateLineType(line, 'line');

addDrawLineFn

扩展自定义连线类型。

参数：

• fnName: string
  自定义的连线类型名称。
• fn: (store: Meta2dStore, pen: Pen, mousedwon?: Point) => void
  自定义的连线锚点算法

返回：
void

示例：
参考：自定义连线算法

removeDrawLineFn

移除连线类型。仅 shift 切换时，切换列表中移除。

参数：

• fnName: string
  连线类型名称。

返回：
void

示例：

meta2d.removeDrawLineFn('polyline');

showMagnifier

显示放大镜

参数：
无

返回：
void

示例：

meta2d.showMagnifier();

hideMagnifier

隐藏放大镜

参数：
无

返回：
void

示例：

meta2d.hideMagnifier();

toggleMagnifier

显示或隐藏放大镜

参数：
无

返回：
void

示例：

meta2d.toggleMagnifier();

clear

清空画布资源。打开空白图纸用 open()

参数：
无

返回：
void

示例：

meta2d.clear();

emit

发送自定义消息。底层采用 mitt.js

参数：

• eventType: string | symbol
  消息名称
• data : any
  消息数据

返回：
void

示例：

meta2d.emit('myMessage', { a: 1 });

on

订阅消息

参数：

• eventType: string | symbol
  消息名称
• handler : (event, data) => {}
  消息处理函数

返回：
void

示例：

const fn = (event, data) => {};
meta2d.on('event', fn);
// 不用时，又不销毁meta2d实例，记得取消订阅。

off

取消订阅消息

参数：

• eventType: string | symbol
  消息名称
• handler : (event, data) => {}
  消息处理函数

返回：
void

示例：

const fn = (event, data) => {};
// 订阅
meta2d.on('event', fn);

// 取消订阅
meta2d.off('event', fn);

register

注册自定义图形，用 Path2D 绘画

参数：

• obj : Object
  由<图形名称: 图形绘画函数>组成的 json 对象

返回：
void

示例：

参考：自定义图形库

registerCanvasDraw

注册自定义图形，用 CanvasRenderingContext2D 绘画

参数：

• obj : Object
  由<图形名称: 图形绘画函数>组成的 json 对象

返回：
void

示例：

参考：自定义图形库

registerAnchors

注册自定义图形锚点

参数：

• obj : Object
  由<图形名称: 图形锚点函数>组成的 json 对象

返回：
void

示例：

参考：自定义图形库

registerMoveDock

注册移动辅助线算法

参数：

• store: Meta2dStore
  引擎数据存储对象
• rect: Rect
  拖拽区域
• pens: Pen[]
  本次拖拽的画笔们
• offset: Point
  本次偏移量，即画笔们的 worldRect + offset 得到的即 rect

返回：
json 对象，包含：xDock, yDock

• xDock ： x, y, step, prev, penId
  水平方向的参考线
• yDock ： x, y, step, prev, penId
  垂直方向的参考线
  prev - 参考线的起点
  x,y - 参考线的终点
  step - 自动吸附需要的偏移量，比如 xDock.step=5，表示 rect.x += 5 是最终希望的位置。
  penId - 自动吸附的画笔，对应画笔产生变化

示例：

meta2d.registerMoveDock((store, rect, pens, offset) => {
  return {
    xDock: {
      x,
      y,
      prev,
      step,
      penId
    },
    yDock: {
      x,
      y,
      prev,
      step,
      penId
    },
  };
});

registerResizeDock

注册修改大小辅助线算法

参数：

• store: Meta2dStore
  引擎数据存储对象
• rect: Rect
  拖拽区域
• pens: Pen[]
  本次拖拽的画笔们
• resizeIndex: number
  本次 resize 拖动是哪个点，左上，右上，右下等（可打印查看）

返回：
json 对象，包含：xDock, yDock

• xDock ： x, y, step, prev, penId
  水平方向的参考线
• yDock ： x, y, step, prev, penId
  垂直方向的参考线
  prev - 参考线的起点
  x,y - 参考线的终点
  step - 自动吸附需要的偏移量，比如 xDock.step=5，表示 rect.x += 5 是最终希望的位置。
  penId - 自动吸附的画笔，对应画笔产生变化

示例：

meta2d.registerResizeDock((store, rect, pens, resizeIndex) => {
  return {
    xDock: {
      x,
      y,
      prev,
      step,
      penId
    },
    yDock: {
      x,
      y,
      prev,
      step,
      penId
    },
  };
});

Copy

find

根据 id 或 tag 查找画笔

参数：

• idOrTag: string
  id 或 tag

返回：
符合结果的 pen 数组

示例：

var pens = meta2d.find('aaa');

findOne

根据 id 或 tag 查找画笔，使用 Array.find ，找到一个即返回，找不到 undefined

参数：

• idOrTag: string
  id 或 tag

返回：
符合结果的 pen 对象

示例：

const pen = meta2d.findOne('id');

getPenRect

获取 Pen 相对标尺原点的坐标区域

参数：

• pen: Pen
  画笔对象

返回：
Rect

示例：

var rect = meta2d.getPenRect(pen);

setPenRect

设置 Pen 相对标尺原点的坐标区域

参数：

• pen: Pen
  画笔
• rect: Rect
  区域
• render : boolean
  是否立刻重绘。默认是

返回：
void

示例：

meta2d.setPenRect(pen, { x: 200, y: 200, width: 100, height: 100 });

startAnimate

开始播放动画

参数：

• idOrTagOrPens : string | Pen[]
  id，或 tags，或 Pen[]对象数组，不传执行所有自动播放的画笔的动画

返回：
void

示例：

meta2d.startAnimate('aaa');

meta2d.startAnimate([pen]);

pauseAnimate

暂停播放动画

参数：

• idOrTagOrPens : string | Pen[]
  id，或 tags，或 Pen[]对象数组，不传暂停所有的动画

返回：
void

示例：

meta2d.pauseAnimate('aaa');

meta2d.pauseAnimate([pen]);

stopAnimate

停止播放动画

参数：

• idOrTagOrPens : string | Pen[]
  id，或 tags，或 Pen[]对象数组，不传停止所有动画。

返回：
void

示例：

meta2d.stopAnimate('aaa');

meta2d.stopAnimate([pen]);

startVideo

开始播放视频

参数：

• idOrTagOrPens : string | Pen[]
  id，或 tags，或 Pen[]对象数组

返回：
void

示例：

meta2d.startVideo('aaa');

meta2d.startVideo([pen]);

pauseVideo

暂停播放视频

参数：

• idOrTagOrPens : string | Pen[]
  id，或 tags，或 Pen[]对象数组

返回：
void

示例：

meta2d.pauseVideo('aaa');

meta2d.pauseVideo([pen]);

stopVideo

停止播放视频

参数：

• idOrTagOrPens : string | Pen[]
  id，或 tags，或 Pen[]对象数组

返回：
void

示例：

meta2d.stopVideo('aaa');

meta2d.stopVideo([pen]);

calcAnimateDuration

计算动画帧时长

参数：

• pen: Pen
  画笔

返回：
number 动画帧时长

示例：

const duration = meta2d.calcAnimateDuration(pen);

combine

组合画笔

参数：

• pens: Pen[]
  画笔数组
• showChild: number
  可选参数，默认无需传递。
  若组合为 状态 ，需传递该参数，默认展示第一个即传 0 ，第二个 1。

返回：
void。新画笔为 meta2d.store.active[0]

示例：

meta2d.combine(pens);

// 组合为状态
meta2d.combine(pens, 0);

uncombine

取消组合画笔

参数：

• pen: Pen
  画笔

返回：
void

示例：

meta2d.uncombine(pen);

appendChild

组合为状态追加状态，适用于组合为状态图元已经配置事件/绑定数据点而不想取效组合。

参数：

• pens: Pen[] 画笔数组，默认this.store.active

返回：
void

示例：

meta2d.active(pens);
meta2d.appendChild();  //会找到 组合为状态的图元，并且将其他图元添加为它的子图元

active

选中高亮画笔

参数：

• pens: Pen[]
  画笔数组
• emit: boolean
  是否发送消息，默认true

返回：
void。高亮画笔为 meta2d.store.active

示例：

meta2d.active(pens);

inactive

清空高亮画笔

参数：
无

返回：
void

示例：

meta2d.inactive();

delete

删除画笔

参数：

• pens: Pen[]
  画笔数组
• canDelLocked:boolean

强制删除锁定的画笔，默认false

• history:boolean

是否存入历史记录，默认true

返回：
void

示例：

meta2d.delete(pens);

scale

缩放画布

参数：

• scale: number
  缩放比例。1 表示 100%
• center : Point
  缩放中心点。默认左上角 0 的位置

返回：
void

示例：

// 缩放到120%
meta2d.scale(1.2);

translate

平移画布

参数：

• x: number
  水平偏移量
• y: number
  垂直偏移量

返回：
void

示例：

meta2d.translate(10, 10);

translatePens

平移画笔

参数：

• pens : Pen[]
  画笔数组
• x: number
  水平偏移量
• y: number
  垂直偏移量

返回：
void

示例：

meta2d.translatePens([pen], 10, 10);

getParent

获取父画笔

参数：

• pen: Pen
  画笔
• root : boolean
  是否获取根祖父画笔。默认否，直接父画笔

返回：
Pen

示例：

// 获取父画笔
meta2d.getParent(pen);

// 获取根祖父画笔
meta2d.getParent(pen, true);

data

获取文件保存数据。
与画布数据失去关联关系，即修改该值不影响画布数据。
若要修改后影响画布数据，请使用 meta2d.store.data

参数：
无

返回：
json 数据

示例：

meta2d.data();

copy

复制画笔

参数：

• pens: Pen[]
  画笔数组。如果为空，表示复制选中画笔

返回：
void

示例：

meta2d.copy();

meta2d.copy([pen]);

cut

剪切画笔

参数：

• pens: Pen[]
  画笔数组。如果为空，表示剪切选中画笔

返回：
void

示例：

meta2d.cut();

meta2d.cut([pen]);

paste

粘贴画笔

参数：

空

返回：
void

示例：

meta2d.paste();

undo

撤消

参数：

空

返回：
void

示例：

meta2d.undo();

redo

重做

参数：

空

返回：
void

示例：

meta2d.redo();

connectWebsocket

连接 websocket。

参数：

• websocket : string
  websocket url 地址。如果为空，重连老的地址；否则，更新新地址并连接

返回：
void

示例：

// 重连
meta2d.connectWebsocket();

// 连接新url
meta2d.connectWebsocket(url);

closeWebsocket

关闭 websocket 连接

参数：
无

返回：
void

示例：

meta2d.closeWebsocket();

connectMqtt

连接 mqtt。底层采用 mqtt.js。

参数：

• params : mqtt 配置参数

{
  mqtt: string;  // url
  mqttTopics: string; // 多个topic用,分隔
  mqttOptions?: {
    clientId?: string;
    username?: string;
    password?: string;
    customClientId?: boolean;  // ture - clientId不变；false - clientId随机，避免相同连接clientId冲突
  };
}

返回：
void

示例：

// 重连
meta2d.connectMqtt();

// 连接新配置
meta2d.connectMqtt(params);

closeMqtt

关闭 mqtt 连接

参数：
无

返回：
void

示例：

meta2d.closeMqtt();

connectHttp

连接 http。

参数：
无

返回：
void

示例：

//const { http, httpTimeInterval, httpHeaders } = meta2d.store.data 可获取http配置
meta2d.connectHttp();

closeHttp

关闭 http 连接

参数：
无

返回：
void

示例：

meta2d.closeHttp();

setValue

修改 Pen 属性值, 触发对应画笔们的值变化事件。（若想要不触发值变化事件使用 _setValue）
1.1.15 版本以后，如果如果存在data.id并且id等于画布id(meta2d.store.data.id),则表示修改画布的options属性。

参数：

• data: any
  更新的数据。其中，需要有 id 或 tag，定位查找需要修改的 pen
  新版本以后，新增dataId 方式修改绑定变量的值,详见下方示例。
  新版本以后，当data.id为图纸id(meta2d.store.data.id)的时候,该方法表示修改meta2d.store.data属性
• { render: boolean = true,
  doEvent: boolean = true,
  history: boolean }
  命名参数，参照下方示例
  1. render:更改数据后是否重新渲染画布
     默认会重新渲染，但若在 for 循环中使用 setValue 可能带来性能问题，推荐将值设置成 false ，当 for 循环执行完毕后，使用 meta2d.render()
  2. history:是否将值变化添加到历史记录
  3. doEvent:值变化是否触发画笔事件执行

返回：
void

示例：

// 修改id为aaa的画笔的text属性
meta2d.setValue({ id: 'aaa', text: 'new text' });

// 修改tag为aaa的画笔的text属性
meta2d.setValue({ tag: 'aaa', text: 'new text' });

// 查找id = pen.id的画笔，修改id为111
meta2d.setValue({ id: pen.id, newId: '111' });

// for 循环设置 pens 的 text
for (const pen of pens) {
  meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false });
}
meta2d.render();

/*
1.属性绑定变量
2.meta2d.initBindDatas(); 
*/
meta2d.setValue({dataId:'d-1-a-001',value:20});

//复杂数据结构,支持级联选择更新。
//例如echarts
meta2d.setValue({id:pen.id,"echarts.option.series.0.data.0":100}); //对应pen.echarts.option.series[0].data[0]这个属性值

setDatas

参数：

• datas: { dataId: string; value: any }[]
  dataId 绑定的变量
  value 更新的数据
• { render: boolean,
  history: boolean ,
  doEvent: boolean}
  使用方式同setValue

示例：

/*
1.2.5 版本及以后
1.属性绑定变量
2.meta2d.initBindDatas(); 
*/
meta2d.setDatas([{dataId:'d-1-a-001',value:20}]);

updateValue

修改 Pen 属性值
该方法不调用 render 方法，需要手动调用 render
推荐使用 setValue

参数：

• pen: Pen
  需要更新的画笔
• data: any
  更新的数据

返回：
void

示例：

const pen = meta2d.store.data.pen[0];

meta2d.updateValue(pen, {background: '#f40'});

pushHistory

添加一个编辑历史到队列

参数：

• action: EditAction
  历史行为数据

enum EditType {
  Add,
  Update,
  Delete,
}

interface EditAction {
  type?: EditType;
  initPens?: Pen[];  // 更新前的数据
  pens?: Pen[];      // 更新后的数据
}

返回：
void

示例：

meta2d.pushHistory({ type: EditType.Add, pens: [pen] });

meta2d.pushHistory({
  type: EditType.Update,
  pens: currentPens,
  initPens,
});

meta2d.pushHistory({ type: EditType.Delete, pens });

showInput

显示输入框

参数：

• pen: Pen
  画笔

返回：
void

示例：

meta2d.showInput(pen);

Copy

hideInput

隐藏输入框

参数：

• pen: Pen
  画笔

返回：
void

示例：

meta2d.hideInput(pen);

Copy

clearDropdownList

移除画布下拉列表 HTML Element

当设置 pen.dropdownList=[{text,...}]属性，pen 可以作为下拉框使用，并生成画布下拉列表 HTML Element 对象。选中下拉列表选项后，会触发 pen.setValue({id:pen.id,text,...})行为。

参数：
无

返回：
void

示例：

meta2d.clearDropdownList();

Copy

pushChildren

给画笔添加子对象

参数：

• parent: Pen
  父画笔
• children: Pen[]
  子元素

返回：
void

示例：

meta2d.pushChildren(pen, [child]);

Copy

renderPenRaw

使用 CanvasRenderingContext2D 绘画 Pen。主要用于在第三方 canvas 中绘画

参数：

• ctx: CanvasRenderingContext2D
  CanvasRenderingContext2D
• pen: Pen
  画笔
• rect: Rect
  区域。默认 pen 自身区域

返回：
void

示例：

meta2d.pushChildren(ctx, pen);

Copy

toPng

生成 png 图像

参数：

• padding: Padding(number)
  图片留白边距。默认 0
• callback: (blob: Blob ) => void
  回调函数。默认不传，返回给当前函数的返回值；否则返回给回调函数的 blob 参数
• containBkImg:boolean = false
  生成png图像时，是否考虑背景图片
• maxWidth

最大像素宽度，值越大，像素越高。

返回：
当 callback 为空时，返回 blob。

示例：

var blob = meta2d.toPng();

var blob1 = meta2d.toPng(10,undefined,true);

Copy

downloadPng

下载为 png 文件

参数：

• name: string
  文件名
• padding: Padding(number)
  图片留白边距。默认 0
• maxWidth

最大像素宽度，值越大，像素越高。

返回：
void

示例：

meta2d.downloadPng();

Copy

activeToPng

选中图元生成 png 图像

参数：

• padding: Padding(number)
  图片留白边距。默认 2

返回：
返回 blob。

示例：

meta2d.active(pens);
let blob = meta2d.activeToPng();

Copy

pensToPng

图元生成 png 图像

参数：

• pens:Pen[] 画布数组， 默认为选中图元
• padding: Padding(number)
  图片留白边距。默认 2

返回：
返回 blob。

示例：

meta2d.active(pens);
let blob = meta2d.pensToPng();

Copy

getRect

获取图纸区域

参数：

• pens: Pen[]
  画笔数组。默认为空，表示整个图纸

返回：
Rect

示例：

var rect = meta2d.getRect();

Copy

fitView

自适应屏幕显示。会缩放画布到合适尺寸

参数：

• fit: boolean
  true，完整展示整个图纸；false，短边展示图纸，长边会被截取显示不完整
• viewPadding: Padding（number）
  图纸留白边距。默认 10

返回：
void

示例：

meta2d.fitView();

meta2d.fitView(true, 20);

Copy

gotoView

定位画笔到屏幕中心显示

参数：

• pen: Pen
  定位的画笔

返回：
void

示例：

meta2d.gotoView(pen);

Copy

centerView

居中显示可视区域。不缩放

参数：
无

返回：
void

示例：

meta2d.centerView();

Copy

hasView

是否存在画笔对象

参数：
无

返回：
void

示例：

var hasPens = meta2d.hasView();

Copy

scrollView

宽度放大到屏幕尺寸，并滚动到最顶部。（滚动模式下有效）

参数：

• viewPadding: Padding（number）
  图纸留白边距。默认 10
• pageMode: boolean
  false，是否设置为页面模式？页面模式下，无横向滚动条。竖向滚动条根据内容高度确定是否显示。

返回：
void

示例：

meta2d.scrollView()

meta2d.scrollView(1,true);

Copy

screenView

宽度/高度充满屏幕

参数：

• viewPadding: Padding（number）
  图纸留白边距。默认 10
• WorH: boolean
  true，默认宽度充满屏幕

返回：
void

示例：

//宽度充满时会置顶
meta2d.screenView();

//高度充满时会居中
meta2d.screenView(10,false);

Copy

topView

顶部对齐。

参数：

• paddingTop
  图纸顶部留白边距。默认 10

返回：
void

示例：

meta2d.topView()

Copy

fitSizeView

适应到配置的大屏宽高(options.width/height)。会缩放画布到合适尺寸

参数：

• fit: boolean|string
  true，完整展示整个图纸；false，短边展示图纸，长边会被截取显示不完整。配置为'width'/'height'表示大屏宽度/高度适应屏幕大小
• viewPadding: Padding（number）
  图纸留白边距。默认 10

返回：
void

示例：

meta2d.fitSizeView();

meta2d.fitSizeView('width');

meta2d.fitSizeView(true, 20);

Copy

centerSizeView

大屏范围居中视图

参数：
无

返回：
void

示例：

meta2d.centerSizeView();

Copy

alignNodes

节点对齐

参数：

• align: string
  对齐方式: left, right, top, bottom, center, middle
• pens: Pen[]
  画笔数组。默认为整个图纸
• rect: Rect
  对齐区域。默认当前 pens 占据区域

返回：
void

示例：

meta2d.alignNodes('left');

meta2d.alignNodes('left', pens);

Copy

spaceBetween

水平等分对齐

参数：

• pens: Pen[]
  画笔数组。默认为整个图纸
• width: number
  宽度。默认当前 pens 占据区域

返回：
void

示例：

meta2d.spaceBetween();

meta2d.spaceBetween(undefined, 1000);

Copy

spaceBetweenColumn

垂直等分对齐

参数：

• pens: Pen[]
  画笔数组。默认为整个图纸
• height: number
  高度。默认当前 pens 占据区域

返回：
void

示例：

meta2d.spaceBetweenColumn();

meta2d.spaceBetweenColumn(null, 1000);

Copy

alignNodesByFirst

参考第一个画笔对齐

参数：

• align
  对齐方式，left, right, top, bottom, center, middle
• pens: Pen[]
  画笔数组。默认为整个图纸

返回：
void

示例：

meta2d.alignNodesByFirst('left', meta2d.store.active);

Copy

alignNodesByLast

参考最后一个画笔对齐

参数：

• align
  对齐方式，left, right, top, bottom, center, middle
• pens: Pen[]
  画笔数组。默认为整个图纸

返回：
void

示例：

meta2d.alignNodesByLast('left', meta2d.store.active);

Copy

beSameByFirst

相同大小，参考第一个画笔

参数：

• pens: Pen[]
  画笔数组。默认为整个图纸
• attribute

'width'/'height'，默认不传宽高都相同

返回：
void

示例：

meta2d.beSameByFirst( meta2d.store.active);

meta2d.beSameByFirst( meta2d.store.active,'width');

Copy

beSameByLast

相同大小，参考最后一个画笔

参数：

• pens: Pen[]
  画笔数组。默认为整个图纸
• attribute

'width'/'height'，默认不传宽高都相同

返回：
void

示例：

meta2d.beSameByLast( meta2d.store.active);

meta2d.beSameByLast( meta2d.store.active,'width');

Copy

alignNodesV

大屏对齐

参数：

• align: string
  对齐方式: left, right, top, bottom, center, middle
• pens: Pen[]
  画笔数组。默认为整个图纸

返回：
void

示例：

meta2d.alignNodesV('left',meta2d.store.active);

Copy

layout

均匀分布排版

参数：

• pens: Pen[]
  画笔数组。默认为整个图纸
• width: number
  宽度，超过换行。默认当前 pens 占据区域宽度。
• space: number
  间距。默认 30

返回：
void

示例：

meta2d.layout();

meta2d.layout(undefined, undefined, 50);

Copy

showMap

显示鹰眼地图

参数：
无

返回：
void

示例：

meta2d.showMap();

Copy

hideMap

隐藏鹰眼地图

参数：
无

返回：
void

示例：

meta2d.hideMap();

Copy

toggleAnchorMode

给 Pen 添加/取消添加锚点

参数：
无

返回：
void

示例：

meta2d.toggleAnchorMode();

Copy

addAnchorHand

给 选中锚点 添加手柄

参数：
无

返回：
void

示例：

meta2d.addAnchorHand();

Copy

removeAnchorHand

删除 选中锚点 的手柄

参数：
无

返回：
void

示例：

meta2d.removeAnchorHand();

Copy

toggleAnchorHand

给选中锚点 添加/删除 手柄

参数：
无

返回：
void

示例：

meta2d.toggleAnchorHand();

Copy

top

置顶画笔

参数：

• pen: Pen
  被置顶的画笔

返回：
void

示例：

meta2d.top(pen);

Copy

bottom

置底画笔

参数：

• pen: Pen
  被置底的画笔

返回：
void

示例：

meta2d.bottom(pen);

Copy

up

移动画笔到上一层

参数：

• pen: Pen
  被移动的画笔

返回：
void

示例：

meta2d.up(pen);

Copy

down

移动画笔到下一层

参数：

• pen: Pen
  被移动的画笔

返回：
void

示例：

meta2d.down(pen);

Copy

setLayer

移动画笔到指定层

参数：

• pen: Pen
  被移动的画笔
• index: number
  指定图层
• pens: Pen[]
  移动到哪个画笔数组。默认为整个图纸

返回：
void

示例：

meta2d.setLayer(pen, 10);

Copy

changePenId

修改画笔 id

参数：

• oldId: string
  旧 id
• newId: string
  新 id

返回：
void

示例：

meta2d.changePenId('1', '2');

Copy

getLines

获取 Pen 的关联连线

参数：

• pen: Pen
  画笔
• type: 'all' | 'in' | 'out' = 'all'
  连线方向。默认所有方向

返回：
Pen[]

示例：

var lines = meta2d.getLines(pen);

Copy

nextNode

获取 Pen 关联连线的下一个 Pen[]

参数：

• pen: Pen
  画笔

返回：
Pen[]

示例：

var pens = meta2d.nextNode(pen);

Copy

previousNode

获取 Pen 关联连线的上一个 Pen[]

参数：

• pen: Pen
  画笔

返回：
Pen[]

示例：

var pens = meta2d.previousNode(pen);

Copy

toComponent

生成自定义组件，方便直接（拖拽）复用。

参数：

• pens: Pen[]
  画笔数组。默认整个画布
• showChild: number
  可选参数，默认无需传递。
  若组合为 状态 ，需传递该参数，默认展示第一个即传 0 ，第二个 1。

返回：
Pen[]。组合成一个组件的画笔数组对象（包含父子 Pen）

示例：

const pens = meta2d.toComponent();

const pens = meta2d.toComponent(undefined, 0);

Copy

setVisible

设置画笔是否可见，并且修改子节点们的 visible。

参数：

• pen: Pen
  画笔
• visible: boolean
  可见
• render: boolean = true
  是否重绘

示例：

const pen = meta2d.findOne('id');
meta2d.setVisible(pen, false);

Copy

destroy

销毁画布，清理资源内存。推荐调用

参数：

• onlyData :boolean

只销毁数据资源，不销毁注册的绘制函数和存储的图片资源。常用于多画布

返回：
void

示例：

meta2d.destroy();

Copy

setBackgroundImage

更改背景图片

参数：
string

返回：
void

示例：

meta2d.setBackgroundImage('/img/logo.png');

Copy

setBackgroundColor

更改背景颜色

参数：
string

返回：
void

示例：

meta2d.setBackgroundColor('#1890ff');
meta2d.render();

Copy

setGrid

更改背景网格

参数：
{ grid: boolean; gridColor: string; gridSize: number; gridRotate: number }
对象 object

返回：
void

示例：

meta2d.setGrid({
  grid: true
});
meta2d.render();

Copy

clearRuleLines

清空所有标尺线

参数：

void

返回：

void

meta2d.clearRuleLines()

Copy

alignPenToGrid

调整pen的坐标，使pen按照网格自动对齐

参数：
pen: Pen
画笔

返回：
void

示例：

meta2d.alignPenToGrid(pen);

Copy

setRule

更改背景标尺

参数：
{ rule: boolean; ruleColor: string; }
对象 object

返回：
void

示例：

meta2d.setRule({
  rule: true
});
meta2d.render();

Copy

getNext

获取当前画笔的所有下一个连接关系

参数：

• pen: Pen
  画笔

返回：
[{
from: Pen, //该节点
fromAnchor: Point, //该节点的连接锚点
line:Pen, //连接线
to: Pen, //被连接Pen
toAnchor: Point, //被连接pen的连接锚点
},...]

示例：

const pen = meta2d.findOne('id');
meta2d.getNext(pen);

Copy

addAnchor

为画笔添加锚点(包括连线)

参数：

• pen: Pen
  画笔
• anchor: Point
  锚点，可以世界坐标，也可以是相对坐标
• index:number
  添加的位置（连线），可选，默认0

返回：
void

示例：

const pen = meta2d.findOne('id');
meta2d.addAnchor(pen,{x:0.5,y:0.5,id:'anchor id'});

const line = meta2d.findOne('id');
meta2d.addAnchor(line,{x:200,y:300},-1); //末尾添加

Copy

connectLine

连接两个画笔

参数：

• from: Pen
  连接画笔
• to: Pen
  被连接画笔
• fromAnchor: Point
  连接画笔的连接锚点，可选，默认距离to最近的锚点
• toAnchor: Point
  被连接画笔的连接锚点，可选，默认距离from最近的锚点
• render:[boolean]
  是否触发重绘，默认是。

返回：

• line:Pen
  两个画笔的连线，

示例：

const from = meta2d.findOne('from');
const to = meta2d.findOne('to');
meta2d.connectLine(from,to);
meta2d.connectLine(from,to,from.anchors[0],to.anchors[0]);
meta2d.connectLine(from,to,from.calculative.worldAnchors[3],to.calculative.worldAnchors[3]);

Copy

formatPainterByFirst

参考第一个选中的节点(pens参数第一个图元)，进行格式刷

参数：

• pens: Pen[]
  画笔

示例：

meta2d.formatPainterByFirst(meta2d.store.active);

Copy

formatPainterByLast

参考最后一个选中的节点(pens参数最后一个图元)，进行格式刷

参数：

• pens: Pen[]
  画笔

示例：

meta2d.formatPainterByLast(meta2d.store.active);

Copy

setFormatPainter

设置格式刷内容，以当前选中图元的第一个图元为参考。格式化内容存储到localStorage的'meta2d-formatPainter'项。

示例：

meta2d.setFormatPainter();

Copy

formatPainter

获取setFormatPainter存储的格式内容，对当前选中的所有图元进行格式刷操作

示例：

meta2d.formatPainter();

Copy

clearFormatPainter

清除选中图元格式，恢复默认状态

示例：

meta2d.clearFormatPainter();

Copy

setFollowers

将其他图元设置为最后一个图元的followers图元

参数：

• pens: Pen[] 默认为选中图元

示例：

meta2d.setFollowers();

Copy