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			模型
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

getModelById

根据ID获取图形

参数

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

返回值

类型	备注
DDeiAbstractShape/null	图形实例

getModelsByBaseType

根据类别获取图形

参数

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

返回值

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

removeModel

删除当前图层模型

参数

参数名	类型	默认值	备注
model	DDeiAbstractShape		模型
destroy	boolean	false	是否销毁
notify	boolean	true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

removeModels

移除多个模型

参数

参数名	类型	默认值	备注
model	DDeiAbstractShape[]		模型列表
destroy	boolean	false	是否销毁
notify	boolean	true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

removeModelById

根据ID删除控件

参数

参数名	类型	范围	默认值	备注
ids	string[]			id列表
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

cancelSelectModels

取消选择图形

参数

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

返回值

无

getSelectedModels

获取选中图形

参数

无

返回值

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

pushUp

将控件设置到上一层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

pushDown

将控件设置到下层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

pushTop

将控件设置到顶层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

pushBottom

将控件设置到底层

参数

参数名	类型	范围	默认值	备注
model	DDeiAbstractShape[]			模型列表
notify	boolean		true	通知刷新，同步调整纸张区域大小等信息，并重绘画布

返回值

无

setStageRatio

设置缩放比率

参数

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

返回值

无

getStageRatio

获取缩放比率

参数

无

返回值

类型	备注
number	缩放比率

notifyChange

通知改变，刷新画布

参数

无

返回值

无

示例

代码

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

效果预览

技术支持

QQ:3697355039

微信公众号:ddei757

DDeiLayer ​

属性 ​

方法 ​

示例 ​

技术支持 ​

DDeiLayer

属性

方法

示例

技术支持