DDeiLayer

  DDeiLayer代表一个图层，一个图层含有多个DDeiAbstractShape(图形/容器)。   DDeiLayer实例包含了一个图层的所有数据，以及渲染器，在获取后可以通过它访问其他内容。DDeiStage中的layers属性代表舞台的所有图层。

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

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

属性

属性名	说明	数据类型	静态	默认值	备注
id	图层ID	string	否
unicode	唯一编号	string	否	系统生成	自动编码
name	名称	string	否	系统生成
models	图形集合	DDeiAbstractShape[]	否
midList	图形ID集合	string[]	否
index	下标	number	否		当前layer所在stage的下标
display	是否显示	number	否	1	0不显示/1显示
lock	锁定	boolean	否		false
print	打印	boolean	否	true
modelNumber	模型总数量	object	否	0
bg	背景	object	否		查看详情
stage	所属舞台	DDeiStage	否
modelType	模型类型	string	否	DDeiLayer

方法

static initByJSON

  根据JSON，创建DDeiLayer实例

参数

参数名	类型	范围	默认值	备注
json	object			文件JSON数据
tempData	object			用于初始化的数据:{currentContainer:当前容器实例,currentStage:当前stage实例}

返回值

类型	备注
DDeiLayer	DDeiLayer实例

static loadFromJSON

  将JSON转换为一个DDeiLayer实例

参数

参数名	类型	范围	默认值	备注
json	object			文件JSON数据
tempData	object			用于初始化的数据:{currentDdInstance:当前ddInstance实例,currentStage:当前stage实例}

返回值

类型	备注
DDeiLayer	DDeiLayer实例

toJSON

  将DDeiLayer实例转换为JSON对象

参数

  无

返回值

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

initRender

  初始化渲染器，并绑定

参数

  无

返回值

  无

calModelNumber

  计算并返回当前图层的模型总数量

参数

  无

返回值

类型	备注
number	模型总数量

addModel

  添加模型

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape			模型

返回值

  无

getModelById

  根据ID获取图形

参数

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

返回值

类型	备注
DDeiAbstractShape/null	图形实例

getModelsByBaseType

  根据类别获取图形

参数

参数名	类型	范围	默认值	备注
bmt	string			模型类型来自modelType/baseModelType

返回值

类型	备注
DDeiAbstractShape[]	图形实例列表

removeModel

  删除当前图层模型

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape			模型
destroy	boolean		false	是否销毁

返回值

  无

removeModels

  移除多个模型

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表
destroy	boolean		false	是否销毁

返回值

  无

removeModelById

  根据ID删除控件

参数

参数名	类型	范围	默认值	备注
ids	string[]			id列表

返回值

  无

cancelSelectModels

  取消选择图形

参数

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

返回值

  无

getSelectedModels

  获取选中图形

参数

  无

返回值

类型	备注
DDeiAbstractShape[]	图形实例列表

pushUp

   将控件设置到上一层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表

返回值

  无

pushDown

   将控件设置到下层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表

pushTop

   将控件设置到顶层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表

pushBottom

   将控件设置到底层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表

返回值

  无

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_4"].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_4"].editor;
  let stage:DDeiStage = editor.files[0].sheets[0].stage
  let layer:DDeiLayer = stage.layers[stage.layerIndex]
  //删除控件
  layer.removeModelById(["control_1"])
};

const pushTop = () => {
  //获取编辑器 
  let editor:DDeiEditor = proxy.$refs["ddei_editor_api_4"].editor;
  let stage:DDeiStage = editor.files[0].sheets[0].stage
  let layer:DDeiLayer = stage.layers[stage.layerIndex]
  //获取控件
  let shape:DDeiAbstractShape = layer.getModelById("control_1");
  layer.pushTop([shape])
};

const pushBottom = () => {
  //获取编辑器 
  let editor:DDeiEditor = proxy.$refs["ddei_editor_api_4"].editor;
  let stage:DDeiStage = editor.files[0].sheets[0].stage
  let layer:DDeiLayer = stage.layers[stage.layerIndex]
  //删除控件
  let shape:DDeiAbstractShape = layer.getModelById("control_1");
  layer.pushBottom([shape])
};



</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="pushBottom" style="border:1px solid grey;margin-left:5px;padding:5px">移至底层</button>
<button @click="pushTop" 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_4" id="ddei_editor_api_4"></DDeiEditorView>
</div>
</template>

效果预览

技术支持