乐吾乐画布
画布是 meta2d 的核心，所有展示和交互都在画布上呈现。
创建画布
- 指定 html 的父 Element
// 提前设置好css样式，特别是大小位置
<div id="meta2d"></div>
- 在 js 中创建实例
// 'meta2d'为id或Element实例；options可选
var meta2d = new Meta2d('meta2d', options);
// 核心库将自动添加
// window.meta2d = meta2d;
- 根据业务，调用 meta2d api 开始使用
// 例如：打开一个meta2d格式文件
meta2d.open(json);
// 获取文件数据
const json = meta2d.data();
拖拽图形库
1. 创建图形库工具栏
创建图形库工具栏 html 元素，绑定拖拽事件或 touch 事件
<div class="tools">
<div
class="icon"
draggable="true"
ondragstart="onDragstart($event, menu)"
onclick="onTouchstart($event, menu)"
ontouchstart="onTouchstart($event, menu)"
>
<img src="xxx" />
<div>Rectangle</div>
</div>
</div>
2. 传递数据
在工具栏相应事件函数中，给 meta2d 传递 pen 对象数据即可
const pen = {
name: 'rectangle',
text: '矩形',
width: 100,
height: 100,
};
onDragstart = (e) => {
e.dataTransfer.setData('Text', JSON.stringify(pen));
};
// 支持鼠标单击添加图形
import { deepClone } from '@meta2d/core';
onTouchstart = (e) => {
meta2d.canvas.addCaches = deepClone([pen]);
};
Options 选项
| 名称 | 类型 | 描述 |
|---|---|---|
| color | string | 画笔默认颜色，如果没特别设置，颜色包括：文字和边框 |
| 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 | 禁止设置锚点 |
| alwaysAnchor | boolean | 默认显示锚点 |
| autoAnchor | boolean | 连线时，自动选中节点锚点 |
| disableEmptyLine | boolean | 禁止存在两端关联缺少的连线 |
| disableRepeatLine | boolean | 禁止存在关联重复的连线 |
| disableScale | boolean | 禁止画布缩放 |
| disableTranslate | boolean | 禁止画布移动 |
| disableDockLine | boolean | 取消辅助线 |
| minScale | number | 画布最小缩放比例 |
| maxScale | number | 画布最大缩放比例 |
| keydown | KeydownType | 快捷键监听对象，默认 document；-1 不监听快捷键，需在 Meta2d 初始化时配置 |
| grid | boolean | 是否显示网格 |
| gridColor | string | 网格颜色 |
| gridSize | number | 网格大小 |
| rule | boolean | 是否显示标尺 |
| ruleColor | string | 标尺颜色 |
| drawingLineName | string | 默认连线类型名称 |
| fromArrow | string | 默认连线起始箭头 |
| toArrow | string | 默认连线终点箭头 |
| autoPolyline | boolean | 是否自动计算多线段锚点 |
| interval | number | 绘画帧时长 |
| animateInterval | number | 动画帧时长 |
| dragAllIn | boolean | 框选画笔时，是否需要全部在框选区域内 |
| scroll | boolean | 默认是否显示滚动条。与默认缩放互斥 |
| defaultAnchors | Point[] | 默认图形的默认锚点，例如：正方形等。 |
| moveConnectedLine | boolean | 是否允许拖动连接线 |
| mouseRightActive | boolean | 是否允许右键选中节点，默认true允许 |
| disableClipboard | boolean | 是否禁止系统剪切板，默认false不禁止 |
| drawingLineLength | number | 画线过程中允许的最大长度，为0表示不限 |
| disableTouchPadScale | number | 是否禁止触控板双指缩放，默认false |
默认值
const defaultAnchors = [
{
x: 0.5,
y: 0,
},
{
x: 1,
y: 0.5,
},
{
x: 0.5,
y: 1,
},
{
x: 0,
y: 0.5,
},
],
文件数据
通过 meta2d.data() 函数获取，返回数据格式如下：
| 名称 | 类型 | 描述 |
|---|---|---|
| color | string | 画笔默认颜色，如果没特别设置，颜色包括：文字和边框 |
| penBackground | string | 画笔默认背景色 |
| activeColor | string | 画笔选中颜色 |
| activeBackground | string | 画笔选中背景颜色 |
| pens | Pen[] | 画笔数组 |
| x | number | 画布 x 偏移 |
| y | number | 画布 y 偏移 |
| 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 | 默认线宽 |
成员属性
| 名称 | 类型 | 描述 |
|---|---|---|
| canvas | Canvas | 绘画画板 |
| store | Meta2dStore | 绘画数据。包括文件数据和各种状态数据等 |
| websocket | WebSocket | 原生 WebSocket 客户端。仅连接成功才有实例 |
| mqttClient | Mqtt.Client | mqtt.js 通信客户端 |
Meta2dStore
| 名称 | 类型 | 描述 |
|---|---|---|
| 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 | 可视化引擎选项 |