DDei在线设计器-API-DDeiEditor

DDeiEditor

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

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

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

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

属性

属性名说明数据类型静态默认值备注
ididstring
containerid所属容器IDstring
files文件列表DDeiFile[][]
currentFileIndex当前文件下标number-1
state状态DDeiEditorStateDESIGNING
modelType模型名称stringDDeiEditor
ddInstanceDDei内部对象stringDDeiEditor
editMode编辑模式number11指针/2手/3文本创建/4线段创建
INSTANCE_POOL实例池Map以key-value的形式维护了所有DDeiEditor实例
width画布宽度number仅用于初始化
height画布高度number仅用于初始化
ratio缩放比率number1.0仅用于初始化
mark水印string/object/null1.0仅用于初始化 查看详情
ruler标尺number1.0仅用于初始化 查看详情
grid网格number/null1仅用于初始化 查看详情
paper纸张string/object/null仅用于初始化 查看详情
background背景string/object/null仅用于初始化 查看详情
EXT_STAGE_WIDTH自动扩展宽度boolean
EXT_STAGE_HEIGHT自动扩展宽度boolean
GLOBAL_ALLOW_STAGE_RATIO开启全局缩放booleantrue
GLOBAL_ADV_WEIGHT吸附区域尺寸number5大于0时拖拽时会有吸附效果,小于0时没有效果
GLOBAL_HELP_LINE_ENABLE显示对齐辅助线booleantrue
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回调函数

方法

addFile

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

参数

参数名类型范围默认值备注
fileDDeiFile文件
indexnumber位置下标

返回值

  无

removeFile

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

参数

参数名类型范围默认值备注
fileDDeiFile文件
indexnumber位置下标

返回值

  无

changeFile

  交换文件

参数

参数名类型范围默认值备注
indexAnumber位置下标1
indexBnumber位置下标2

返回值

  无

addControls

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

参数

参数名类型范围默认值备注
controlsobject[]控件配置数组
controls[n].idstringID,画布唯一
controls[n].modelstring控件定义编号
controls[n].codestring编码,一般用于业务
controls[n].widthnumber初始化宽度
controls[n].heightnumber初始化高度
controls[n].textstring文本
controls[n].offsetXnumber初始偏移位置x,以中心为0,0
controls[n].offsetYnumber初始偏移位置y,以中心为0,0

返回值

  无

removeControls

  根据ID删除控件

参数

参数名类型范围默认值备注
idsstring[]ID数组

返回值

  无

getControlById

  根据ID获取控件

参数

参数名类型范围默认值备注
idstringID

返回值

类型备注
DDeiAbstractShape控件实例模型

changeTheme

  设置主题

参数

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

返回值

  无

changeStyle

  修改样式

参数

参数名类型范围默认值说明
namestring主题名称
objobjectK-V样式对象

返回值

  无

changeEditMode

  修改当前编辑模式

参数

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

返回值

  无

setEditable

  设置是否可以编辑

参数

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

返回值

  无

setAccessInfo

  设置权限信息

参数

参数名类型范围默认值说明
configobject权限配置,K-V数据
config.keystringCREATE/EDIT/DRAG/SELECT/LINK/DEL
config.valuebooleantrue有权限/false无权限

返回值

  无

changeState

  修改编辑器状态

参数

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

返回值

  无

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

技术支持

QQ:3697355039     邮箱:3697355039@qq.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/29176.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 【包含数据预处理】基于词频生成词云图

基于词频生成词云图 背景目的 有一篇中文文章&#xff0c;或者一本小说。想要根据词频来生成词云图。 为什么中文需要分词 中文分词是理解和处理中文文本的关键步骤&#xff0c;它直接影响到后续的文本分析和信息提取的准确性和有效性。 无明显单词分隔&#xff1a;中文文本不…

Einops 张量操作快速入门

张量&#xff0c;即多维数组&#xff0c;是现代机器学习框架的支柱。操纵这些张量可能会变得冗长且难以阅读&#xff0c;尤其是在处理高维数据时。Einops 使用简洁的符号简化了这些操作。 Einops &#xff08;Einstein-Inspired Notation for operations&#xff09;&#xff…

BGP、IGP、EGP学习

文章目录 前言边界网关协议&#xff08;BGP&#xff09;内部网关协议&#xff08;IGP&#xff09;外部网关协议&#xff08;EGP&#xff09;联系与区别 前言 本文是对边界网关协议&#xff08;BGP&#xff09;、内部网关协议&#xff08;IGP&#xff09;和外部网关协议&#x…

linux top命令显示系统资源使用情况

通过这些键盘快捷键和操作&#xff0c;您可以在 top 命令中查看特定的系统资源使用情况&#xff0c;按不同的指标对进程进行排序&#xff0c;以及更好地监视系统的运行情况。 top 或 htop&#xff1a;显示系统资源使用情况&#xff0c;包括 CPU 占用、内存使用以及运行的进程信…

NLP学习与踩坑记录(持续更新版)

NLP学习与踩坑记录&#xff08;持续更新版&#xff09; OSError: Cant load tokenizer for bert-base-uncased.google.protobuf.message.DecodeError: Error parsing messageDeepspeed 本博客记录了博主在学习NLP时遇到了各种各样的问题与解决方法&#xff0c;供大家参考&#…

JS最新的关键字和保留字

在JavaScript中&#xff0c;关键字和保留字是用于定义语言语法和特性的特殊标识符。这些关键字和保留字不能被用作变量名、函数名或其他标识符。以下是JavaScript中最新的关键字和保留字的分点表示和归纳&#xff1a; 关键字&#xff08;Keywords&#xff09; JavaScript中的…

oracle SCHEDULER

从Oracle 10g开始&#xff0c;推荐使用DBMS_SCHEDULER包&#xff0c;因为它提供了更强大的功能和灵活性&#xff0c;包括更复杂的调度规则、依赖管理和事件驱动等 1. 用法 DBMS_SCHEDULER.CREATE_JOB (job_name IN VARCHAR2,job_type IN VARCHAR2,job…

软件测试流派:深入比较与总结

软件测试流派&#xff1a;深入比较与总结 前言1. 分析流派2. 标准流派3. 质量流派4. 上下文驱动流派5. 敏捷流派流派比较与总结 前言 在现代软件开发中&#xff0c;不同的软件测试流派代表了各自独特的方法论、实践重点和案例应用。理解这些流派的差异有助于选择适合特定项目需…

温度传感器NST175手册阅读

温度传感器NST175手册阅读 首先看芯片的输入和输出&#xff1a;主要关注IIC接口&#xff0c;毕竟是要驱动这个芯片读取温度。在编写此博客时还未对改温度传感器进行调试&#xff0c;只是阅读手册&#xff0c;把需要重点关注的地方标记出来。 一、芯片管脚 二、温度输出格式 …

618大促背后:优秀制造企业如何精准备货?

618这场年中购物盛宴点燃了消费者的热情。而在背后&#xff0c;是许许多多的制造企业在默默发力&#xff0c;对于他们来说&#xff0c;这不仅仅是一个促销的机会&#xff0c;更是一个检验供应链响应速度、库存管理能力以及市场洞察力的关键时刻。那么&#xff0c;优秀的制造企业…

WACV2024检测Detection论文49篇速览

WACV2024 Detection论文摘要速览49篇 Paper1 CLRerNet: Improving Confidence of Lane Detection With LaneIoU 摘要小结: 车道线检测是自动驾驶和驾驶辅助系统中的关键组成部分。现代基于锚点的深度车道检测方法在车道检测基准测试中表现出色。通过初步的实验&#xff0c;我们…

前端菜鸡流水账日记 -- 各类网站(持续更新版)

哈喽大家&#xff0c;这篇文章主要是打算用来放一些我们平时用的到的连接之类的&#xff0c;大多数都是我自己收藏了的&#xff0c;现在和之后如果有新增都会放到这里&#xff0c;持续更新的~~~~ &#xff08;各种类型的都有&#xff09; -----------------------------------…

5.卷积神经网络

目录 1.从全连接到卷积分类猫和狗的图片总结2.卷积层一维卷积,二维卷积,三维卷积总结基础卷积的代码实现3.卷积层里的填充和步幅填充步幅总结4.卷积层里的多输入多输出通道多个输入通道多个输出通道多个输入和输出通道1 * 1卷积层总结5.池化层二维最大池化池化层的填充,步幅…

macbook屏幕录制技巧,这2个方法请你收好

在当今数字化时代&#xff0c;屏幕录制成为了一项不可或缺的技能&#xff0c;无论是教学演示、游戏直播&#xff0c;还是软件操作教程&#xff0c;屏幕录制都能帮助我们更直观地传达信息。MacBook作为苹果公司的标志性产品&#xff0c;其屏幕录制功能也备受用户关注。本文将详细…

区区微服务,何足挂齿?

背景 睿哥前天吩咐我去了解一下微服务&#xff0c;我本来想周末看的&#xff0c;结果周末没带电脑&#xff0c;所以只能周一看了。刚刚我就去慕课网看了相关的视频&#xff0c;然后写一篇文章总结一下。这篇文章算是基础理论版&#xff0c;等我之后进行更多的实践&#xff0c;…

Cesium4Unreal - # 011A Http通信

文章目录 Http通信1 思路2 步骤2.1 添加依赖模块2.2 实现Http客户端2.2.1 MyHttpActor.h2.2.1 MyHttpActor.cpp2.3 蓝图代码2.4 数据Http通信 1 思路 在 Unreal Engine中接收 Http数据,我们可以使用Unreal Engine自带的Http支持。 2 步骤 2.1 添加依赖模块 在项目的 Your…

帕金森患者在饮食上需要注意什么

帕金森病患者在饮食上应该遵循以下几个基本原则&#xff1a; 饮食清淡&#xff1a;应多吃新鲜的水果和蔬菜&#xff0c;如苹果、芹菜、菠菜等&#xff0c;以补充维生素和促进胃肠道蠕动。营养均衡&#xff1a;应多吃富含优质蛋白的食物&#xff0c;如鸡蛋、牛奶&#xff0c;以…

Swift开发——元组

Swift语言的数据类型包括整型、浮点型、字符串、布尔型、数组、元组、集合和字典等,本文将详细介绍元组。 01、元组 严格意义上,元组不属于数据类型,而属于数据结构。元组将一些变量或常量或字面量组织成一个有序的序列,索引号从0开始,用圆括号“()”括起来,各个元素间用…

hive 安装 嵌入模式 笔记

$ hive $ HIVE_HOME/bin/schematool -dbType derby –initSchema $ schematool -verbose -validate -dbType derby $HIVE_HOME/bin/hiveserver2 这个启动了先不要关闭&#xff0c;再打开一个终端进行下面的步骤 Beeline -u &#xff08;用自己的名字和密码&#xff09; show d…

redis每日一题:Redis哨兵是如何工作的

状态感知&#xff1a; &#xff08;1&#xff09;哨兵要知道整个集群的拓扑关系&#xff0c;因此每隔10秒会向master节点发送info命令&#xff0c;返回信息中&#xff0c;包含了每个slave节点的端口号。 &#xff08;2&#xff09;向每个master节点特殊的pubsub中发送master当…