DDeiEditor

DDeiEditor是DDei设计器的核心类，每当使用DDeiEditorViewer都会生成一个组件实例，其中的editor属性类型为DDeiEditor。

DDeiEditor实例包含了组件的所有数据，在获取后可以通过它访问其他内容。DDeiEditor中维护了一个实例池，可以根据名称得到任意实例。

一个DDeiEditor实例至少包含一个DDeiFile实例和一个DDei实例。

本篇最后提供的示例可以在文档中直接预览。

属性

属性名	说明	数据类型	静态	默认值	备注
id	id	string	否
containerid	所属容器ID	string	否
files	文件列表	DDeiFile[]	否	[]
currentFileIndex	当前文件下标	number	否	-1
state	状态	DDeiEditorState	否	DESIGNING
modelType	模型名称	string	否	DDeiEditor
ddInstance	DDei内部对象	string	否	DDeiEditor
editMode	编辑模式	number	否	1	1指针/2手/3文本创建/4线段创建
INSTANCE_POOL	实例池	Map	是		以key-value的形式维护了所有DDeiEditor实例
width	画布宽度	number	否		仅用于初始化
height	画布高度	number	否		仅用于初始化
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	否		回调函数
EVENT_MOUSE_MOVE_IN_CONTROL	鼠标进入某控件	Function/null	否		回调函数
EVENT_MOUSE_MOVE_IN_LAYER	鼠标进入画布	Function/null	否		回调函数
EVENT_MOUSE_IN_AREA	鼠标在某个区域	Function/null	否		回调函数
EVENT_BEFORE_ADD_FILE	新建文件-前	Function/null	否		回调函数
EVENT_AFTER_ADD_FILE	新建文件-后	Function/null	否		回调函数
EVENT_BEFORE_CLOSE_FILE	关闭文件-前	Function/null	否		回调函数
EVENT_AFTER_CLOSE_FILE	关闭文件-后	Function/null	否		回调函数
EVENT_BEFORE_CHANGE_FILE	切换文件-前	Function/null	否		回调函数
EVENT_AFTER_CHANGE_FILE	切换文件-后	Function/null	否		回调函数
EVENT_BEFORE_ADD_SHEET	新建页签-前	Function/null	否		回调函数
EVENT_AFTER_ADD_SHEET	新建页签-后	Function/null	否		回调函数
EVENT_BEFORE_DEL_SHEET	删除页签-前	Function/null	否		回调函数
EVENT_AFTER_DEL_SHEET	删除页签-后	Function/null	否		回调函数
EVENT_BEFORE_CHANGE_SHEET	切换页签-前	Function/null	否		回调函数
EVENT_AFTER_CHANGE_SHEET	切换页签-后	Function/null	否		回调函数

方法

addFile

添加文件到列表中,默认添加到最后面

参数

参数名	类型	范围	默认值	备注
file	DDeiFile			文件
index	number			位置下标

返回值

无

removeFile

移除文件，可以传入文件或下标

参数

参数名	类型	范围	默认值	备注
file	DDeiFile			文件
index	number			位置下标

返回值

无

exchangeFile

交换文件的位置

参数

参数名	类型	范围	默认值	备注
indexA	number			位置下标1
indexB	number			位置下标2

返回值

无

changeFile

切换文件

参数

参数名	类型	范围	默认值	备注
fileIndex	number			文件下标
sheetIndex	number			页签下标

返回值

无

loadData

添加数据到设计器中，并刷新设计器为最新加载的数据

参数

参数名	类型	范围	默认值	备注
fileJson	string	object
append	boolean		false	true为追加文件，false为覆盖

返回值

无

addControls

向当前画布添加控件,缺省坐标为当前画布的中心

参数

参数名	类型	默认值	备注
controls	object[]		控件配置数组
controls[n].id	string		ID，画布唯一，不传则按序号自动生成
controls[n].model	string		控件定义编号
controls[n].code	string		编码，一般用于业务
controls[n].width	number		初始化宽度
controls[n].height	number		初始化高度
controls[n].text	string		文本
controls[n].offsetX	number		初始偏移位置x，以中心为0，0，采用PC坐标系
controls[n].offsetY	number		初始偏移位置y，以中心为0，0，采用PC坐标系
controls[n].x	number		初始位置x，以中心为0，0，采用PC坐标系
controls[n].y	number		初始位置y，以中心为0，0，采用PC坐标系
applyRatio	boolean	true	应用缩放值，位置和大小乘以当前stage的缩放值
notify	boolean	true	通知刷新，同步调整纸张区域大小等信息，并重绘画布
beforeInvoke	boolean	false	是否调用前置回调函数

返回值

类型	备注
DDeiAbstractShape[]	创建的实例集合

addControlsToLayer

向特定图层添加控件,缺省坐标为当前画布的中心

参数

参数名	类型	默认值	备注
controls	object[]		控件配置数组
controls[n].id	string		ID，画布唯一，不传则按序号自动生成
controls[n].model	string		控件定义编号
controls[n].code	string		编码，一般用于业务
controls[n].width	number		初始化宽度
controls[n].height	number		初始化高度
controls[n].text	string		文本
controls[n].offsetX	number		初始偏移位置x，以中心为0，0，采用PC坐标系
controls[n].offsetY	number		初始偏移位置y，以中心为0，0，采用PC坐标系
controls[n].x	number		初始位置x，以中心为0，0，采用PC坐标系
controls[n].y	number		初始位置y，以中心为0，0，采用PC坐标系
layerIndex	number	-1	图层下标，默认当前图层
applyRatio	boolean	true	应用缩放值，位置和大小乘以当前stage的缩放值
notify	boolean	true	通知刷新，同步调整纸张区域大小等信息，并重绘画布
beforeInvoke	boolean	false	是否调用前置回调函数

返回值

类型	备注
DDeiAbstractShape[]	创建的实例集合

addLines

向当前画布添加连线

参数

参数名	类型	默认值	备注
controls	object[]		连线配置数组
controls[n].id	string		ID，画布唯一，不传则按序号自动生成
controls[n].model	string		控件定义编号
controls[n].code	string		编码，一般用于业务
controls[n].type	number	1	线段类型：1直线，2折线，3曲线
controls[n].dash	number[]	null	线段虚线、默认为实线
controls[n].round	number		圆角，默认为直角
controls[n].startPoint	object		开始点信息
controls[n].startPoint.x	number		开始点X坐标
controls[n].startPoint.y	number		开始点Y坐标
controls[n].endPoint	object		结束点信息
controls[n].endPoint.x	number		结束点X坐标
controls[n].endPoint.y	number		结束点Y坐标
controls[n].smodel	object		开始控件信息，传入后，线和控件会建立关联，并随控件移动
controls[n].smodel.id	object		开始控件ID
controls[n].smodel.x	number		开始点X坐标
controls[n].smodel.y	number		开始点Y坐标
controls[n].smodel.rate	number		点在线的位置比例，如在中心点，则为0.5
controls[n].smodel.sita	number		点在控件圆心的角度，上-90，下90，左0，右180
controls[n].emodel	object		结束控件信息，传入后，线和控件会建立关联，并随控件移动
controls[n].emodel.id	object		结束控件ID
controls[n].emodel.x	number		结束点X坐标
controls[n].emodel.y	number		结束点Y坐标
controls[n].emodel.rate	number		点在线的位置比例，如在中心点，则为0.5
controls[n].emodel.sita	number		点在控件圆心的角度，上-90，下90，左0，右180
calPointsPath	boolean	true	计算连线点，为true则会在添加后立即重新计算连线路径
applyRatio	boolean	true	应用缩放值，位置和大小乘以当前stage的缩放值
notify	boolean	true	通知刷新，同步调整纸张区域大小等信息，并重绘画布
beforeInvoke	boolean	false	是否调用前置回调函数

返回值

类型	备注
DDeiAbstractShape[]	创建的实例集合

返回值

无

removeControls

根据ID删除控件

参数

参数名	类型	默认值	备注
ids	string[]		ID数组
destroy	boolean	true	删除渲染控件
notify	boolean	true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

clearModels

清除当前画布所有控件

参数

参数名	类型	范围	默认值	备注
destroy	boolean		false	是否及时销毁
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

searchModels

根据属性搜索控件

参数

参数名	类型	默认值	备注
keywords	string		搜索关键字
attr	string		属性名称
isReg	boolean	false	是否正则表达式
area	number	1	搜索范围1本页/2本文档/3所有打开文件
matchCase	boolean	false	区分大小写
matchAll	boolean	false	全字匹配

返回值

类型	备注
Array	搜索结果，包含了满足所有条件的控件以及位置列表

replaceModelsData

替换模型属性数据

参数

参数名	类型	默认值	备注
models	DDeiAbstractShape[]		搜索关键字
attr	string		属性名称
sIdx	number	-1	开始坐标
eIdx	number	-1	结束坐标
data	string	''	替换的数据

返回值

无

centerModels

将舞台可视区域的中心点移动到控件的外接矩形中心

参数

参数名	类型	范围	默认值	备注
stage	DDeiStage			舞台，为空则会用当前舞台
modelIds	string[]			模型ID集合

返回值

无

getControlById

根据ID获取控件

参数

参数名	类型	范围	默认值	备注
id	string			ID

返回值

类型	备注
DDeiAbstractShape	控件实例模型

changeTheme

设置主题

参数

参数名	类型	范围	默认值	说明
themeName	string			主题名称

返回值

无

changeStyle

修改样式

参数

参数名	类型	范围	默认值	说明
name	string			主题名称
obj	object			K-V样式对象

返回值

无

changeEditMode

修改当前编辑模式

参数

参数名	类型	范围	默认值	说明
mode	number	1指针/2手/3文本创建/4线创建	1	模式

返回值

无

setEditable

设置是否可以编辑

参数

参数名	类型	范围	默认值	说明
editable	boolean			true可编辑/false不可编辑

返回值

无

setAccessInfo

设置权限信息

参数

参数名	类型	范围	说明
config	object		权限配置,K-V数据
config.key	string	CREATE/EDIT/DRAG/SELECT/LINK/DEL/SCALE/COMPOSE
config.value	boolean		true有权限/false无权限

返回值

无

changeState

修改编辑器状态

参数

参数名	类型	范围	默认值	说明
state	DDeiEditorState			状态

返回值

无

notifyChange

通知改变，刷新画布

参数

无

返回值

无

toImageDataUrl

返回画布图片

参数

参数名	类型	范围	默认值	说明
models	DDeiAbstractShape[]			模型，为空则返回整个画布的图片

返回值

类型	备注
string	图片的base64编码

示例

代码

vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import {DDeiEditor,DDeiCoreStandLayout,DDeiAbstractShape} from "ddei-editor";
import { defineComponent, markRaw,getCurrentInstance } from "vue";
//获取主对象实例，代替this获取$refs
const {proxy} = getCurrentInstance()

const options = markRaw({
  config: { 
    "background": { color: "blue", opacity: 0.1 }, //背景色
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview'],
      'bottom': [],
      'left': [],
      'right': []
    }),
  ],
})
const createControl = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  let editor1 = DDeiEditor.INSTANCE_POOL.get("ddei_editor_api_1")
  //添加控件
  editor.addControls([
        {
          id:"control_1",
          model: "102010",
          text: "新图形"
        },
      ]);
};
const removeControl = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  //添加控件
  editor1.removeControls(["control_1"]);
};
const changeControlText = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("control_1");
  model.text += "-改"
  model.notifyChange()
};
const changeEditable = () => {
  this.editable = !this.editable
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_1"].editor;
  editor.setEditable(this.editable)
};
</script>

<template>

<button @click="createControl" style="border:1px solid grey;margin-left:5px;padding:5px">创建控件</button>
<button @click="removeControl" style="border:1px solid grey;margin-left:5px;padding:5px">删除控件</button>
<button @click="changeControlText" style="border:1px solid grey;margin-left:5px;padding:5px">修改文本</button>
<button @click="changeEditable" style="border:1px solid grey;margin-left:5px;padding:5px">锁定/解锁</button>

<div style="width:400px;height:400px;margin:100px auto;">
  <DDeiEditorView :options="options" ref="ddei_editor_api_1" id="ddei_editor_api_1"></DDeiEditorView>
</div>
</template>

效果预览

技术支持

QQ:3697355039

微信公众号:ddei757

DDeiEditor ​

属性 ​

方法 ​

示例 ​

技术支持 ​

DDeiEditor

属性

方法

示例

技术支持