DDeiStage
DDeiStage代表一个舞台，一个舞台含有多个DDeiLayer(图层)。
DDeiStage实例包含了一个舞台的所有数据，以及渲染器，在获取后可以通过它访问其他内容。DDeiSheet和DDei中都有stage属性，前者的关系是固定的，后者指向当前激活的画布。
一个DDeiSheet实例至少包含一个DDeiStage实例。
本篇最后提供的示例可以在DDei文档直接预览
属性
| 属性名 | 说明 | 数据类型 | 静态 | 默认值 | 备注 |
|---|---|---|---|---|---|
| unicode | 唯一编号 | string | 否 | 系统生成 | 自动编码 |
| idIdx | 当前图形的ID种子 | number | 否 | ||
| layers | 图层集合 | DDeiLayer[] | 否 | ||
| layerIndex | 当前的图层下标 | number | 否 | -1 | |
| selectedModels | 选中模型 | DDeiAbstractShape[] | 否 | 当前选中图形 | |
| ratio | 缩放比率 | number | 否 | 1.0 | |
| width | 画布宽度 | number | 否 | ||
| height | 画布高度 | number | 否 | ||
| wpv | 视窗开始点 | object | 否 | (0,0,0) | |
| spv | 纸张标量开始点 | object | 否 | 中心 | |
| mark | 水印 | object | 否 | 查看详情 | |
| paper | 纸张 | object | 否 | 查看详情 | |
| ruler | 标尺 | object | 否 | 查看详情 | |
| grid | 网格线 | object | 否 | 查看详情 | |
| ddInstance | DDei实例 | DDei | 否 | ||
| modelType | 模型类型 | string | 否 | DDeiStage |
方法
static loadFromJSON
将JSON转换为一个DDeiStage实例
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| json | object | 文件JSON数据 | ||
| tempData | object | 用于初始化的数据:{currentDdInstance:当前ddInstance实例} |
返回值
| 类型 | 备注 |
|---|---|
| DDeiStage | DDeiStage实例 |
toJSON
将DDeiStage实例转换为JSON对象
参数
无
返回值
| 类型 | 备注 |
|---|---|
| JSON | 包含了DDeiStage所有信息的JSON对象 |
initRender
初始化渲染器，并绑定
参数
无
返回值
无
calModelNumber
计算并返回当前舞台的模型总数量
参数
无
返回值
| 类型 | 备注 |
|---|---|
| number | 模型总数量 |
addLayer
添加图层到舞台中
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| layer | DDeiLayer/undefined | 图层，为空会初始化一个 | ||
| layerIndex | number/undefined | 位置下标，为空会添加到末尾 |
返回值
| 类型 | 备注 |
|---|---|
| DDeiLayer | 被添加的图层 |
changeLayer
切换当前图层
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| layerIndex | number | 位置下标 |
返回值
无
removeLayer
删除图层
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| layerIndex | number | 位置下标，为空时移除当前图层 |
返回值
| 类型 | 备注 |
|---|---|
| DDeiLayer | 被删除的图层 |
addModel
添加模型到当前图层
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| model | DDeiAbstractShape | 模型 |
返回值
无
getModelById
根据ID获取图形
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| id | string | id | ||
| allLayer | boolean | false | 默认当前图层，true所有图层 |
返回值
| 类型 | 备注 |
|---|---|
| DDeiAbstractShape/null | 图形实例 |
getModelsByBaseType
根据类别获取图形
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| bmt | string | 模型类型来自modelType/baseModelType |
返回值
| 类型 | 备注 |
|---|---|
| DDeiAbstractShape[] | 图形实例列表 |
removeModel
删除当前图层模型
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| model | DDeiAbstractShape | 模型 | ||
| destroy | boolean | false | 是否销毁 |
返回值
无
removeModelById
根据ID删除控件
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| ids | string[] | id列表 |
返回值
无
cancelSelectModels
取消选择图形
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| models | DDeiAbstractShape[]/undefined | 模型列表 | ||
| ignore | DDeiAbstractShape[]/undefined | 忽略模型列表 |
返回值
无
displayLayer
显示图层
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| layerIndex | number | 下标 | ||
| temp | boolean | false | 临时显示 |
返回值
无
hiddenLayer
隐藏图层
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| layerIndex | number | 下标 |
返回值
无
setStageRatio
设置缩放比率
参数
| 参数名 | 类型 | 范围 | 默认值 | 备注 |
|---|---|---|---|---|
| newValue | number | 1.0 | 缩放比率 |
返回值
无
getStageRatio
获取缩放比率
参数
无
返回值
| 类型 | 备注 |
|---|---|
| number | 缩放比率 |
notifyChange
通知改变，刷新画布
参数
无
返回值
无
示例
代码
<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import {DDeiEditor,DDeiStage,DDeiLayer,DDeiCoreStandLayout,DDeiAbstractShape} from "ddei-editor";
import { defineComponent, markRaw,getCurrentInstance,ref } from "vue";
//获取主对象实例，代替this获取$refs
const {proxy} = getCurrentInstance()const options = markRaw({config: { "grid": 0, //网格线"background": { color: "blue", opacity: 0.1 }, //背景色initData: {controls: [{model: "102010",text: "初始化图形"},]}},//配置扩展插件extensions: [//布局的配置DDeiCoreStandLayout.configuration({//配置插件'top': [],'middle': ['ddei-core-panel-canvasview'],'bottom': [],'left': [],'right': []}),],
})const createControl = () => {//获取编辑器 let editor:DDeiEditor = proxy.$refs["ddei_editor_api_3"].editor;let stage:DDeiStage = editor.files[0].sheets[0].stage//添加控件editor.addControls([{id:"control_1",model: "102010",text: "新图形"},]);
};
const removeControl = () => {//获取编辑器 let editor:DDeiEditor = proxy.$refs["ddei_editor_api_3"].editor;let stage:DDeiStage = editor.files[0].sheets[0].stage//删除控件stage?.removeModelById(["control_1"])
};const addLayer = () => {//获取编辑器 let editor:DDeiEditor = proxy.$refs["ddei_editor_api_3"].editor;let stage:DDeiStage = editor.files[0].sheets[0].stage//添加图层let newLayer:DDeiLayer = stage.addLayer(null,0);newLayer.initRender();
};
const removeLayer = () => {//获取编辑器 let editor:DDeiEditor = proxy.$refs["ddei_editor_api_3"].editor;//获取舞台let stage:DDeiStage = editor.files[0].sheets[0].stage//删除图层stage.removeLayer(0);
};</script><template><button @click="addLayer" style="border:1px solid grey;margin-left:5px;padding:5px">新增图层</button>
<button @click="removeLayer" style="border:1px solid grey;margin-left:5px;padding:5px">删除图层</button>
<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><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" ref="ddei_editor_api_3" id="ddei_editor_api_3"></DDeiEditorView>
</div>
</template>
仓库信息
源码: https://gitee.com/hoslay/ddei-editor
文档: http://docs.ddei.top
在线体验: https://www.ddei.top