DDeiStage

DDeiStage代表一个舞台，一个舞台含有多个DDeiLayer(图层)。 DDeiStage实例包含了一个舞台的所有数据，以及渲染器，在获取后可以通过它访问其他内容。DDeiSheet和DDei中都有stage属性，前者的关系是固定的，后者指向当前激活的画布。

一个DDeiSheet实例至少包含一个DDeiStage实例。

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

属性

属性名	说明	数据类型	静态	默认值	备注
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			用于初始化的数据:

返回值

类型	备注
DDeiStage	DDeiStage实例

toJSON

将DDeiStage实例转换为JSON对象

参数

无

返回值

类型	备注
JSON	包含了DDeiStage所有信息的JSON对象

initRender

初始化渲染器，并绑定

参数

无

返回值

无

calModelNumber

计算并返回当前舞台的模型总数量

参数

无

返回值

类型	备注
number	模型总数量

addLayer

添加图层到舞台中

参数

参数名	类型	默认值	备注
layer	DDeiLayer/undefined		图层，为空会初始化一个
layerIndex	number/undefined		位置下标，为空会添加到末尾
notify	boolean	true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

类型	备注
DDeiLayer	被添加的图层

changeLayer

切换当前图层

参数

参数名	类型	范围	默认值	备注
layerIndex	number			位置下标

返回值

无

removeLayer

删除图层

参数

参数名	类型	范围	默认值	备注
layerIndex	number			位置下标，为空时移除当前图层
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

类型	备注
DDeiLayer	被删除的图层

displayLayer

显示图层

参数

参数名	类型	范围	默认值	备注
layerIndex	number			下标
temp	boolean		false	临时显示

返回值

无

hiddenLayer

隐藏图层

参数

参数名	类型	范围	默认值	备注
layerIndex	number			下标

返回值

无

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

返回值

无

makeSelectModels

选择控件

参数

参数名	类型	范围	默认值	备注
models	DDeiAbstractShape[]/undefined			选择的控件列表
cancelSelectOther	boolean		true	取消选择其他控件

cancelSelectModels

取消选择图形

参数

参数名	类型	范围	默认值	备注
models	DDeiAbstractShape[]/undefined			模型列表
ignore	DDeiAbstractShape[]/undefined			忽略模型列表

返回值

无

clearModels

清除当前画布所有控件

参数

参数名	类型	范围	默认值	备注
destroy	boolean		false	是否及时销毁

返回值

无

getLayerModels

获取所有图层的模型

参数

参数名	类型	默认值	备注
ignoreModelIds	string[]		忽略控件ID
level	number	1	遍历级别
rect	object		有效区域矩阵

返回值

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

searchModels

根据属性搜索控件

参数

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

返回值

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

setStageRatio

设置缩放比率

参数

参数名	类型	范围	默认值	备注
newValue	number		1.0	缩放比率

返回值

无

getStageRatio

获取缩放比率

参数

无

返回值

类型	备注
number	缩放比率

notifyChange

通知改变，刷新画布

参数

无

返回值

无

toImageDataUrl

返回画布图片

参数

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

返回值

类型	备注
string	图片的base64编码

示例

代码

vue

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

效果预览

技术支持

QQ:3697355039

微信公众号:ddei757

DDeiStage ​

属性 ​

方法 ​

示例 ​

技术支持 ​

DDeiStage

属性

方法

示例

技术支持