DDei在线设计器-API-DDeiStage

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

技术支持

QQ:3697355039     邮箱：3697355039@qq.com