API文档
本文档提供了DDei组件所包含的关键API接口,以及重要类之间的关系,并以可运行示例代码的形式说明API的调用,便于开发人员进行查阅、调试和复制。
如需了解详细的API教程以及参数说明,请参考DDei文档
设计器
设计器API用于操作设计器实例,能够获取和修改画布、图层、图形以及图形属性等信息。
DDeiEditor
DDeiEditor
是DDei设计器的核心类,每当使用DDeiEditorViewer
都会生成一个组件实例,通过该实例,可以访问几乎所有的数据。
DDei
DDei
是DDeiEditor
的一个内置对象,实现了部分与图形显示有关但与设计器无关的功能、配置以及公共方法。
DDeiFile
DDeiFile
是代表一个设计文件,一个文件含有多个DDeiSheet(页签)
。在打开文件时,文件实例会被装载进DDeiEditor
的files
属性中。
DDeiSheet
DDeiSheet
是代表一个页签,一个页签含有一个DDeiStage
用于显示图形。一个DDeiFile
实例包含多个DDeiSheet
实例。每个DDeiSheet
都有一个stage
属性
DDeiStage
DDeiStage
代表一个舞台,是真正绘制图形的地方,当一个文件的某个页签被激活时,其stage
会被挂载到DDei
对象上。
DDeiLayer
DDeiLayer
代表一个图层,一个图层含有多个DDeiAbstractShape(图形/容器)
。
DDeiAbstractShape
DDeiAbstractShape
代表是所有可见图形的父类,定义了图形所需要的公共属性和方法。
初始化参数
DDei提供了一系列初始化参数,用来定义组件被创建后的样式、行为、权限等,在快速指南
或示例
中演示了怎么使用初始参数和插件,这里将列出更为详细的初始化参数说明。
如需了解如何使用组件,请查看教程快速指南。
使用说明
在传入DDeiEditorView
标签的options
中,config
属性代表初始化参数,是一个JSON,使用方法如下:
const options = {config: { //设置初始化参数 // [!code ++:12]grid: 0, //网格线 background: { color: "blue", opacity: 0.1 }, //背景色 initData: { //初始控件controls: [{model: "102010",text: "初始化图形"},]}},......
}
参数列表
属性名 | 说明 | 数据类型 | 静态 | 默认值 | 备注 |
---|---|---|---|---|---|
width | 画布宽度 | number | 否 | 仅用于初始化 | |
height | 画布高度 | number | 否 | 仅用于初始化 | |
readonly | 只读 | boolean/null | 否 | ||
access | 权限 | object | 否 | 会覆盖readonly | |
access.CREATE | 创建权限 | boolean | 否 | true | |
access.EDIT | 编辑权限 | boolean | 否 | true | |
access.DEL | 删除权限 | boolean | 否 | true | |
access.LINK | 连线权限 | boolean | 否 | true | |
access.SELECT | 选择权限 | boolean | 否 | true | |
access.VIEW | 显示权限 | boolean | 否 | true | |
access.DRAG | 拖拽权限 | boolean | 否 | true | |
access.ROTATE | 旋转权限 | boolean | 否 | true | 大于EDIT |
access.SCALE | 拉伸权限 | boolean | 否 | true | 大于EDIT |
ratio | 缩放比率 | number | 否 | 1.0 | 仅用于初始化 |
mark | 水印 | string/object/null | 否 | 1.0 | 仅用于初始化 查看详情 |
ruler | 标尺 | number | 否 | 1.0 | 仅用于初始化 查看详情 |
grid | 网格 | number/null | 否 | 1 | 仅用于初始化 查看详情 |
paper | 纸张 | string/object/null | 否 | 仅用于初始化 查看详情 | |
background | 背景 | string/object/null | 否 | 仅用于初始化 查看详情 | |
EXT_STAGE_WIDTH | 自动扩展宽度 | boolean | 否 | ||
EXT_STAGE_HEIGHT | 自动扩展宽度 | boolean | 否 | ||
GLOBAL_ALLOW_STAGE_RATIO | 开启全局缩放 | boolean | 否 | true | |
GLOBAL_ADV_WEIGHT | 吸附区域尺寸 | number | 否 | 5 | 大于0时拖拽时会有吸附效果,小于0时没有效果 |
GLOBAL_HELP_LINE_ENABLE | 显示对齐辅助线 | boolean | 否 | true | |
EVENT_LOAD_FILE | 加载文件 | Function/null | 否 | 回调函数 | |
EVENT_SAVE_FILE | 保存文件 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_SELECT_BEFORE | 控件选择前 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_SELECT_AFTER | 控件选择后 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_SELECT_CREATE | 控件创建前 | Function/null | 否 | 回调函数 | |
EVENT_MOUSE_OPERATING | 鼠标操作中 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_DRAG_BEFORE | 拖拽前 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_DRAG_AFTER | 拖拽后 | Function/null | 否 | 回调函数 | |
EVENT_LINE_DRAG_BEFORE | 线拖拽前 | Function/null | 否 | 回调函数 | |
EVENT_LINE_DRAG_AFTER | 线拖砖后 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_DEL_BEFORE | 控件删除前 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_DEL_AFTER | 控件删除后 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_EDIT_BEFORE | 控件编辑前 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_EDIT_AFTER | 控件编辑后 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_EDIT_BEFORE | 控件编辑前 | Function/null | 否 | 回调函数 | |
EVENT_CONTROL_EDIT_AFTER | 控件编辑后 | Function/null | 否 | 回调函数 | |
EVENT_STAGE_CHANGE_WPV | 移动视窗 | Function/null | 否 | 回调函数 | |
EVENT_STAGE_CHANGE_RATIO | 全局缩放 | Function/null | 否 | 回调函数 |
仓库信息
源码: https://gitee.com/hoslay/ddei-editor
文档: http://docs.ddei.top
在线体验: https://www.ddei.top