当前位置: 首页 > news >正文

DDei在线设计器-API-DDeiAbstractShape

DDeiAbstractShape

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

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

属性

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

方法

static initByJSON

  根据JSON,创建一个DDeiAbstractShape实例(实际为子类实例)

参数

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

返回值

类型备注
DDeiAbstractShapeDDeiAbstractShape实例(实际为子类实例)

static loadFromJSON

  将JSON转换为一个DDeiAbstractShape实例(实际为子类实例)

参数

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

返回值

类型备注
DDeiAbstractShapeDDeiAbstractShape实例(实际为子类实例)

toJSON

  将图形实例转换为JSON对象

参数

  无

返回值

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

initRender

  初始化渲染器,并绑定

参数

  无

返回值

  无

initPVS

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

参数

  无

返回值

  无

executeSample

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

参数

  无

返回值

  无

syncVectors

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

参数

参数名类型范围默认值备注
sourceDDeiAbstractShape
clonePVbooleanfalse是否采用克隆的方式同步

返回值

  无

transVectors

  对当前图形执行向量变换

参数

参数名类型范围默认值备注
matrixMatrix33维变换矩阵
paramsobject特殊配置

返回值

  无

setSptStyle

  设置特殊文本样式
::: warning
在手工设置text后需要手动维护关系
:::

参数

参数名类型范围默认值备注
sIdxnumber开始下标
eIdxnumber结束下标
pathsstring[]/string属性路径
valueany
emptyDeletebooleantrue清楚空值

返回值

  无

getSptStyle

  获取特殊文本样式
::: warning
在手工设置text后需要手动维护关系
:::

参数

参数名类型范围默认值备注
sIdxnumber开始下标
eIdxnumber结束下标
pathsstring[]/string属性路径

返回值

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

getSptAllStyles

  获取特殊文本样式
::: warning
在手工设置text后需要手动维护关系
:::

参数

参数名类型范围默认值备注
sIdxnumber开始下标
eIdxnumber结束下标

返回值

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

clearSptStyle

  清空特殊文本样式

参数

  无

返回值

  无

setPosition

  设置坐标位置

参数

参数名类型范围默认值备注
pointjson{x:0,y:0}位置
coordnumber21标尺坐标/2页面坐标
unitstringmm/cm/px/inch/m单位
typenumber21圆心/2左上角

返回值

  无

getPosition

  获取坐标位置

参数

参数名类型范围默认值备注
coordnumber21标尺坐标/2页面坐标
unitstringmm/cm/px/inch/m单位
typenumber21圆心/2左上角

返回值

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

setRotate

  设置旋转角度

参数

参数名类型范围默认值备注
rotatenumber00-360

返回值

  无

getProjPointOnLine

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

参数

参数名类型范围默认值备注
pointobject测试点
distanceobject内外部判定区间的距离
directnumber1方向,1外部,2内部
indexnumber线开始点向量的下标

返回值

  无

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     邮箱:3697355039@qq.com

相关文章:

DDei在线设计器-API-DDeiAbstractShape

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

IPython的使用技巧整理

关于IPython的使用技巧有很多&#xff0c;这里只是梳理了几个常用的以及我目前遇到过的&#xff0c;其他的技巧还没使用过&#xff0c;所以就没有列出来。 01|Tab键自动完成:在shell中输入表达式时&#xff0c;只要按下Tab键&#xff0c;当前命名空间中任何与已输入的字符串相…...

vue项目纯前端实现导出pdf文件

1、下载插件 npm install html2canvas npm install jspdf2、创建htmlToPdf.js&#xff0c;地址&#xff1a;src/utils/htmlToPdf.js import html2Canvas from html2Canvas import JsPDF from jspdf export default { install(Vue, options) { Vue.prototype.getPdfFromH…...

以Bert训练为例,测试torch不同的运行方式,并用torch.profile+HolisticTraceAnalysis分析性能瓶颈

以Bert训练为例,测试torch不同的运行方式,并用torch.profileHolisticTraceAnalysis分析性能瓶颈 1.参考链接:2.性能对比3.相关依赖或命令4.测试代码5.HolisticTraceAnalysis代码6.可视化A.优化前B.优化后 以Bert训练为例,测试torch不同的运行方式,并用torch.profileHolisticTra…...

地球地图:快速进行先进土地监测和气候评估的新工具Earth Map

地球地图:快速进行先进土地监测和气候评估的新工具 这个工具是居于GEE 开发的多功能的一个APP应用,主要进行土地监测和气候评估 Earth Map 什么是地球地图? 地球地图是联合国粮食及农业组织(粮农组织)在粮农组织与谷歌合作框架内开发的一个创新、免费和开放源码的工具。…...

6.22套题

B. Dark 题意&#xff1a;每次能在数列中能使相邻两个数-1&#xff0c;求当数列没有连续非0值的最小贡献 解法:设表示前i个数中前i-1个数是否为0&#xff0c;当前数是j的最小贡献。表示i1以后减掉d的最小贡献。 C. 幸运值 D. 凤凰院真凶...

openEuler搭建hadoop Standalone 模式

Standalone 升级软件安装常用软件关闭防火墙修改主机名和IP地址修改hosts配置文件下载jdk和hadoop并配置环境变量配置ssh免密钥登录修改配置文件初始化集群windows修改hosts文件测试 1、升级软件 yum -y update2、安装常用软件 yum -y install gcc gcc-c autoconf automake…...

nginx更新https/ssl证书的步骤

一、上传nginx证书到服务器 上传步骤略。。。 二、更新证书 &#xff08;一&#xff09;确认nginx的安装目录 我这里的环境是/etc/nginx/ &#xff08;二&#xff09;确认nginx的证书目录 查看/etc/nginx/nginx.conf&#xff0c;证书目录就在/etc/nginx目录下 将新的证书tes…...

【Android面试八股文】说一说Handler的sendMessage和postDelay的区别?

文章目录 一、`sendMessage` 方法1.1 主要用法1.2 适用场景二、`postDelayed` 方法2.1 主要用法2.2 适用场景三、 区别总结3.1 区别3.2 本质上有差别吗?四、实例对比4.1 使用`sendMessage`4.2 使用`postDelayed`五、结论Handler类在Android中用于消息传递和任务调度。 sendMe…...

Java学习 - Redis主从复制

主从复制是什么 用于建立一个和主数据库完全一样的数据库环境&#xff0c;称为从数据库 主从复制的作用 数据备份读写分离 主从复制使用方式 通过slaveof命令 创建从节点 redis-slave> slaveof 127.0.0.1 6379取消从节点 redis-slave> slaveof no one通过配置 配置…...

图的拓扑排序

图的拓扑排序&#xff08;Topological Sorting&#xff09;是一种线性排序&#xff0c;用于有向无环图&#xff08;Directed Acyclic Graph&#xff0c;DAG&#xff09;。拓扑排序将图中的顶点排成一个线性序列&#xff0c;使得对于每一条有向边 (u, v)&#xff0c;顶点 u 都排…...

windows USB 设备驱动开发-总章

通用串行总线 (USB) 提供可扩展的即插即用串行接口&#xff0c;确保外围设备的标准、低成本的连接。 USB 设备包括键盘、鼠标、游戏杆、打印机、扫描仪、存储设备、调制解调器、视频会议摄像头等。USB-IF 是一个特别兴趣组 (SIG)&#xff0c;负责维护官方 USB 规范、测试规范和…...

springboot解析自定义yml文件

背景 公司产品微服务架构下有十几个模块&#xff0c;几乎大部分模块都要连接redis。每次在客户那里部署应用&#xff0c;都要改十几遍配置&#xff0c;太痛苦了。当然可以用nacos配置中心的功能&#xff0c;配置公共参数。不过我是喜欢在应用级别上解决问题&#xff0c;因为并不…...

【C/C++】静态函数调用类中成员函数方法 -- 最快捷之一

背景 注册回调函数中&#xff0c;回调函数是一个静态函数。需要调用类对象中的一个成员函数进行后续通知逻辑。 方案 定义全局指针&#xff0c;用于指向类对象this指针 static void *s_this_obj;类构造函数中&#xff0c;将全局指针指向所需类的this指针 s_this_obj this…...

佣金的定义和类型

1. 佣金的定义 基本定义&#xff1a;佣金是指在商业交易中&#xff0c;代理人或中介机构为促成交易所获得的报酬。它通常是按交易金额的一定比例计算和支付的。支付方式&#xff1a;佣金可以是固定金额&#xff0c;也可以是交易金额的百分比。 2. 佣金的类型 销售佣金&#…...

python数据分析实训任务二(‘风力风向’)

import numpy as np import matplotlib.pyplot as plt # 数据 labelsnp.array([东风, 东北风, 北风, 西北风, 西风, 西南风, 南风, 东南风]) statsnp.array([2.1, 2, 0, 3, 1.5, 3, 6, 4]) # 将角度转换为弧度 anglesnp.linspace(0, 2*np.pi, len(labels), endpointFalse).toli…...

Java技术栈总结:数据库MySQL篇

一、慢查询 1、常见情形 聚合查询 多表查询 表数据量过大查询 深度分页查询 2、定位慢查询 方案一、开源工具 调试工具&#xff1a;Arthas运维工具&#xff1a;Prometheus、Skywalking 方案二、MySQL自带慢日志 在MySQL配置文件 /etc/my.conf 中配置&#xff1a; # …...

vue-cli 项目打包优化-基础篇

1、项目打包完运行空白 引用资源路径问题&#xff0c;打包完的【index.html】文件引用其他文件的引用地址不对 参考配置&#xff1a;https://cli.vuejs.org/zh/config 修改vue.config.js &#xff0c;根据与 后端 或 运维 沟通修改 module.export {// 默认 publicPath: //…...

24/06/26(1.1129)动态内存

strtok 字符串分割函数 #include<stdio.h> int main(){ char str[] "this,a sample string."; char* sep ","; char* pch strtok(str, sep); printf("%s\n", pch); while (pch ! NULL){ printf("%s\…...

基于 elementUI / elementUI plus,实现 主要色(主题色)的一件换色(换肤)

一、效果图 二、方法 改变elementUI 的主要色 --el-color-primary 为自己选择的颜色&#xff0c;核心代码如下&#xff1a; // 处理主题样式 export function handleThemeStyle(theme) {document.documentElement.style.setProperty(--el-color-primary, theme) } 三、全部代…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

数据库正常,但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

理想汽车5月交付40856辆,同比增长16.7%

6月1日&#xff0c;理想汽车官方宣布&#xff0c;5月交付新车40856辆&#xff0c;同比增长16.7%。截至2025年5月31日&#xff0c;理想汽车历史累计交付量为1301531辆。 官方表示&#xff0c;理想L系列智能焕新版在5月正式发布&#xff0c;全系产品力有显著的提升&#xff0c;每…...