DDei在线设计器-API-DDeiEditor

DDeiEditor

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

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

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

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

属性

方法

addFile

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

参数

返回值

  无

removeFile

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

参数

返回值

  无

changeFile

  交换文件

参数

返回值

  无

addControls

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

参数

返回值

  无

removeControls

  根据ID删除控件

参数

返回值

  无

getControlById

  根据ID获取控件

参数

返回值

changeTheme

  设置主题

参数

返回值

  无

changeStyle

  修改样式

参数

返回值

  无

changeEditMode

  修改当前编辑模式

参数

返回值

  无

setEditable

  设置是否可以编辑

参数

返回值

  无

setAccessInfo

  设置权限信息

参数

返回值

  无

changeState

  修改编辑器状态

参数

返回值

  无

notifyChange

  通知改变，刷新画布

参数

  无

返回值

  无

示例

代码

<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>

仓库信息

源码: https://gitee.com/hoslay/ddei-editor

文档: http://docs.ddei.top

在线体验: https://www.ddei.top

技术支持