四川网站建设公司/兰蔻搜索引擎营销案例

DDeiAbstractShape

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

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

属性

属性名	说明	数据类型	静态	默认值	备注
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

方法

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	单位下的坐标点

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>

仓库信息

源码: https://gitee.com/hoslay/ddei-editor

文档: http://docs.ddei.top

在线体验: https://www.ddei.top

技术支持

QQ:3697355039     邮箱：[e-mail]