DDeiAbstractShape

  DDeiAbstractShape代表是所有可见图形的父类，定义了图形所需要的公共属性和方法。   DDeiAbstractShape实例包含了一个图形的所有数据和渲染器，在获取后可以通过它访问其他内容。DDeiAbstractShape中的layer指向所在图层,stage指向所属舞台，pModel指向其父容器，顶级指向layer。

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

属性

属性名	说明	数据类型	静态	默认值	备注
id	图形ID	string	否		画布唯一
unicode	唯一编号	string	否	系统生成	自动编码
code	编码	string			一般用于业务
text	文本	string
poly	坐标策略	number	否	1	1直角坐标/2极坐标
rotate	旋转量	number	否	1.0	只读
cpv	中心点向量	object	否	(0,0,0)	中心点坐标
hpv	平行拉伸向量	objec[]	否		用于计算旋转/拉伸量
pvs	点向量	object[]	否		构成图形的所有点
essBounds	实际大小	object	否		未经旋转、缩放的实际大小
text	文本	string	否		显示文本
sptStyle	特殊文本样式	object[]	否
zIndex	图层层次	number	否		影响渲染顺序
state	背景	DDeiEnumControlState	否	DEFAULT
stage	所属舞台	DDeiStage	否
layer	所属图层	DDeiLayer	否
pModel	所属容器	DDeiContainer	否
modelCode	模型的编码	string	否		区分modelType相同，但业务含义不同的模型
modelType	模型类型	string	否	AbstractShape
border	边框	object
border.type	边框类型	number	0无/1实线
border.color	边框颜色	string
border.opacity	透明度	number	0-1之间	1
border.width	宽度	number	>0	1
border.dash	线段样式	Array	>0
border.roung	圆角	number	0-10	0
fill	填充	object
fill.type	填充类型	number	0无/1纯色/2图片
fill.color	填充颜色	string
fill.image	填充图片	string			url/base64
fill.opacity	透明度	number	0-1之间	1
font	字体	object
font.family	字体名称	string		系统默认
font.color	字体颜色	string		black
font.size	字体大小	string		14
textStyle	文本样式	object
textStyle.align	横向对齐	number	1左/2中/3右	2
textStyle.valign	纵向对齐	number	1上/2中/3下	2
textStyle.feed	自动换行	number	1是/0否	1
textStyle.scale	超范围策略	number	0隐藏/1省略/2缩小/3扩展	0	文本超出控件大小时的策略
textStyle.lockWidth	锁定宽度	number	0否/1是	0	超范围自动扩展的情况下锁定宽度
textStyle.hollow	镂空	number	0否/1是	0
textStyle.bold	加粗	number	0否/1是	0
textStyle.italic	斜体	number	0否/1是	0
textStyle.underline	下划线	number	0否/1是	0
textStyle.deleteline	删除线	number	0否/1是	0
textStyle.bgcolor	文本背景	string
textStyle.hspace	水平间距	number	0-10	0.5
textStyle.vspace	垂直间距	number	0-10	0.5
mirrorX	水平镜像	boolean		false
mirrorY	垂直镜像	boolean		false

方法

static initByJSON

  根据JSON，创建一个DDeiAbstractShape实例（实际为子类实例）

参数

参数名	类型	范围	默认值	备注
json	object			文件JSON数据
tempData	object			用于初始化的数据:{currentContainer:当前容器实例,currentStage:当前stage实例,currentLayer:当前layer实例}
initPVS	boolean		true	是否初始化点向量

返回值

类型	备注
DDeiAbstractShape	DDeiAbstractShape实例（实际为子类实例）

static loadFromJSON

  将JSON转换为一个DDeiAbstractShape实例（实际为子类实例）

参数

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

返回值

类型	备注
DDeiAbstractShape	DDeiAbstractShape实例（实际为子类实例）

toJSON

  将图形实例转换为JSON对象

参数

  无

返回值

类型	备注
JSON	包含了DDeiAbstractShape实例（实际为子类实例）所有信息的JSON对象

initRender

  初始化渲染器，并绑定

参数

  无

返回值

  无

initPVS

  初始化向量，基于width和height构建向量，默认中心点在0，0的位置

参数

  无

返回值

  无

executeSample

  执行采样，根据配置获取构成图形的向量点

参数

  无

返回值

  无

syncVectors

  同步一个图形的向量到当前图形

参数

参数名	类型	范围	默认值	备注
source	DDeiAbstractShape			源
clonePV	boolean		false	是否采用克隆的方式同步

返回值

  无

transVectors

  对当前图形执行向量变换

参数

参数名	类型	范围	默认值	备注
matrix	Matrix3			3维变换矩阵
params	object			特殊配置

返回值

  无

setSptStyle

  设置特殊文本样式

WARNING

在手工设置text后需要手动维护关系

参数

参数名	类型	范围	默认值	备注
sIdx	number			开始下标
eIdx	number			结束下标
paths	string[]/string			属性路径
value	any			值
emptyDelete	boolean		true	清楚空值

返回值

  无

getSptStyle

  获取特殊文本样式

WARNING

在手工设置text后需要手动维护关系

参数

参数名	类型	范围	默认值	备注
sIdx	number			开始下标
eIdx	number			结束下标
paths	string[]/string			属性路径

返回值

类型	备注
JSON[]	开始和结束下标之间所有设置的特殊样式

getSptAllStyles

  获取特殊文本样式

WARNING

在手工设置text后需要手动维护关系

参数

参数名	类型	范围	默认值	备注
sIdx	number			开始下标
eIdx	number			结束下标

返回值

类型	备注
JSON[]	开始和结束下标之间所有设置的特殊样式

clearSptStyle

  清空特殊文本样式

参数

  无

返回值

  无

setPosition

  设置坐标位置

参数

参数名	类型	范围	默认值	备注
point	json		{x:0,y:0}	位置
coord	number		2	1标尺坐标/2页面坐标
unit	string	mm/cm/px/inch/m		单位
type	number		2	1圆心/2左上角

返回值

  无

getPosition

  获取坐标位置

参数

参数名	类型	范围	默认值	备注
coord	number		2	1标尺坐标/2页面坐标
unit	string	mm/cm/px/inch/m		单位
type	number		2	1圆心/2左上角

返回值

类型	备注
point	单位下的坐标点

scale

  基于当前大小缩放

参数

参数名	类型	范围	默认值	备注
scaleX	number		1	X缩放比例
scaleY	number		1	Y缩放比例

返回值

  无

setRotate

  设置旋转角度

参数

参数名	类型	范围	默认值	备注
rotate	number		0	0-360

返回值

  无

getProjPointOnLine

  得到点在图形某条线上的投射点

参数

参数名	类型	范围	默认值	备注
point	object			测试点
distance	object			内外部判定区间的距离
direct	number		1	方向，1外部，2内部
index	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 rotateVal = ref(0);

const options = markRaw({
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    initData: {
      controls: [
        {
          id:"shape_1",
          model: "102010",
          text: "初始化图形"
        },
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview'],
      'bottom': [],
      'left': [],
      'right': []
    }),
  ],
})

const rotate = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_5"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("shape_1");
  rotateVal.value += 15;
  model.setRotate(rotateVal.value);
  model.notifyChange()
  
};
const scaleAdd = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_5"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("shape_1");
  model.scale(1.1,1.1);
  model.notifyChange()
};

const scaleDiv = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_5"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("shape_1");
  model.scale(0.9,0.9);
  model.notifyChange()
};

const changeText = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_5"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("shape_1");
  model.text += "-改"
  model.notifyChange()
};

const changeColor = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_5"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("shape_1");
  model.font = {color : "red"}
  model.notifyChange()
};

const moveControl = () => {
  //获取编辑器 
  let editor = proxy.$refs["ddei_editor_api_5"].editor;
  //添加控件
  let model:DDeiAbstractShape = editor.getControlById("shape_1");
  //获取坐标，单位（英寸）
  let incPos = model.getPosition(1,'inch');
  incPos.x += 0.1;
  incPos.y += 0.1;
  //设置坐标，单位（英寸）
  model.setPosition(incPos,1,'inch');
  model.text = incPos.x.toFixed(1)+" ,"+incPos.y.toFixed(1)+" 英寸"
  model.notifyChange()
};



</script>

<template>

<button @click="rotate" style="border:1px solid grey;margin-left:5px;padding:5px">旋转</button>
<button @click="scaleAdd" style="border:1px solid grey;margin-left:5px;padding:5px">放大</button>
<button @click="scaleDiv" style="border:1px solid grey;margin-left:5px;padding:5px">缩小</button>
<button @click="changeText" style="border:1px solid grey;margin-left:5px;padding:5px">修改文本</button>
<button @click="changeColor" style="border:1px solid grey;margin-left:5px;padding:5px">变色</button>
<button @click="moveControl" style="border:1px solid grey;margin-left:5px;padding:5px">移动</button>
<DDeiEditorView :options="options" ref="ddei_editor_api_5" id="ddei_editor_api_5"></DDeiEditorView>

效果预览

技术支持

QQ:3697355039

微信公众号:ddei757