DDei在线设计器-API-DDeiAbstractShape

DDeiAbstractShape

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

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

属性

属性名说明数据类型静态默认值备注
id图形IDstring否画布唯一
unicode唯一编号string否系统生成自动编码
code编码string一般用于业务
text文本string
poly坐标策略number否11直角坐标/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边框类型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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/861645.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用 Node.js 发送电子邮件

使用 Node.js 发送电子邮件

前言&#xff1a;大多数 Web 应用程序都需要发送电子邮件。它可能用于注册、密码重置、状态报告&#xff0c;甚至是完整的营销活动&#xff08;例如新闻通讯和促销&#xff09;。本教程介绍如何在 Node.js 中发送电子邮件&#xff0c;但这些概念和挑战适用于您使用的任何系统。…
阅读更多...
Spring Boot与JMS消息中间件的集成

Spring Boot与JMS消息中间件的集成

Spring Boot与JMS消息中间件的集成 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨一下如何在Spring Boot中集成JMS&#xff08;Java Message Se…
阅读更多...
jieba--《红楼梦》章节分卷并计算TF-IDF值（超详细）

jieba--《红楼梦》章节分卷并计算TF-IDF值（超详细）

目录 大致步骤&#xff1a; 任务1&#xff1a; 将红楼梦 根据卷名 分隔成 卷文件 红楼梦txt&#xff1a; 红楼梦卷头&#xff1a; 红楼梦章节分卷&#xff1a; 任务2&#xff1a;对每个卷进行分词&#xff0c;并删除包含停用词的内容 1.遍历所有卷的内容&#xff0c;并添…
阅读更多...
Python26 Lambda表达式

Python26 Lambda表达式

1.什么是lambda表达式 lambda 是 Python 中的一个关键字&#xff0c;用于定义简单的匿名函数。与 def 关键字定义的标准函数不同&#xff0c;lambda 函数主要用于需要一个函数对象作为参数的简短操作。lambda 函数的设计哲学是简洁&#xff0c;因此它只能包含一条表达式&#…
阅读更多...
7km远距离WiFi实时图传模块，无人机海上无线传输方案，飞睿智能WiFi MESH自组网技术

7km远距离WiFi实时图传模块，无人机海上无线传输方案，飞睿智能WiFi MESH自组网技术

在浩瀚无垠的海洋上&#xff0c;无人机正在开启一场前所未有的技术创新。它们不再只是天空的舞者&#xff0c;更是海洋的守望者&#xff0c;为我们带来前所未有的视野和数据。而这一切的背后&#xff0c;都离不开一项创新性的技术——飞睿智能远距离WiFi实时图传模块与无线Mesh…
阅读更多...
使用Spring Boot和WebSocket实现实时通信

使用Spring Boot和WebSocket实现实时通信

使用Spring Boot和WebSocket实现实时通信 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot应用中使用WebSocket实现实时通信&am…
阅读更多...
【杂记-浅谈CHAP认证（质询握手身份验证协议）】

【杂记-浅谈CHAP认证（质询握手身份验证协议）】

CHAP认证&#xff08;质询握手身份验证协议&#xff09; 一、CHAP认证概述二、CHAP认证流程三、CHAP认证优势 一、CHAP认证概述 1、CHAP&#xff0c;Challenge Handshake Authentication Protocol&#xff0c;即质询握手身份验证协议&#xff0c;是一种用于网络连接的验证协议…
阅读更多...
JavaScript数组forEach方法退出循环

JavaScript数组forEach方法退出循环

常规for循环退出循环方法 在for循环中退出循环有3种方式&#xff1a;return&#xff08;终止&#xff09;、break&#xff08;退出整个循环&#xff09;、continue&#xff08;退出当次循环&#xff09;。 let arr [0,1,2,3,4,5,6] for(let i0;i<array.length;i){if(array[…
阅读更多...
并发业务使用redis分布式锁

并发业务使用redis分布式锁

伴随着业务体量的上升&#xff0c;我们的qps与并发问题越来越明显&#xff0c;这时候就需要用到让代码一定情况下进行串行执行的工具&#xff1a;锁 1.业务场景代码 OverrideTransactional(rollbackFor Exception.class)public Object testBatch(User user) {LambdaQueryWrapp…
阅读更多...
java必知必会-java IO

java必知必会-java IO

系列文章目录 java必知必会-java环境搭建 java必知必会-java开发工具安装与使用 java必知必会-java关键字、变量和常量 java必知必会-java数据类型和变量定义 java必知必会-java类和对象 java必知必会-java面向对象的三大特性 java必知必会-java继承与重写、重载 java必知必会…
阅读更多...
昇思25天学习打卡营第1天|快速入门-Mnist手写数字识别

昇思25天学习打卡营第1天|快速入门-Mnist手写数字识别

学习目标&#xff1a;熟练掌握MindSpore使用方法 学习心得体会&#xff0c;记录时间 了解MindSpore总体架构 学会使用MindSpore 简单应用时间-手写数字识别 一、MindSpore总体架构 华为MindSpore为全场景深度学习框架&#xff0c;开发高效&#xff0c;全场景统一部署特点。 …
阅读更多...
Verilog进行结构描述（三）：Verilog模块实例化

Verilog进行结构描述（三）：Verilog模块实例化

目录 1.模块实例化(module instantiation)2.实例数组(Array of Instances) 微信公众号获取更多FPGA相关源码&#xff1a; 1.模块实例化(module instantiation) 模块实例化时实例必须有一个名字。使用位置映射时&#xff0c;端口次序与模块的说明相同。使用名称映射时&#x…
阅读更多...
搭建大型分布式服务（四十）SpringBoot 整合多个kafka数据源-支持生产者

搭建大型分布式服务（四十）SpringBoot 整合多个kafka数据源-支持生产者

系列文章目录 文章目录 系列文章目录前言一、本文要点二、开发环境三、原项目四、修改项目五、测试一下五、小结 前言 本插件稳定运行上百个kafka项目&#xff0c;每天处理上亿级的数据的精简小插件&#xff0c;快速上手。 <dependency><groupId>io.github.vipjo…
阅读更多...
【LeetCode】每日一题：无重复字符的最长子串

【LeetCode】每日一题：无重复字符的最长子串

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串的长度。 解题思路 滑动窗口&#xff0c;水题&#xff0c;但是学到了python的内置函数find&#xff0c;可以查找字符串中字符出现的位置&#xff0c;没有的话返回-1&#xff0c;数组中可以使用index&…
阅读更多...
ZYNQ学习教程？ZYNQ-FPGA实战教程！

ZYNQ学习教程？ZYNQ-FPGA实战教程！

学习 ZYNQ 比FPGA、MCU、ARM 等传统工具开发要求更高&#xff0c;想学好 ZYNQ 也不是一蹴而就的事情。 学习 ZYNQ 要具备的技能&#xff1a; 1、 软件开发人员  计算机组成原理、 C、C语言、 计算机操作系统、tcl 脚本、良好的英语基础 2、 逻辑开发人员 计算机组成原理…
阅读更多...
实际开发中Java线程池怎么配

实际开发中Java线程池怎么配

前言 在实际开发中&#xff0c;业务场景是多种多样的&#xff0c;分为IO密集型与CPU密集型俩种。针对不同的场景。如何配置一个合理的线程池是十分重要的&#xff5e;。 接下来我从Java线程池的生命周期以及实际开发场景讲解如何配置Java线程池 Java线程池 线程池七大参数 核…
阅读更多...
关于服务器的一些知识

关于服务器的一些知识

1. 云服务器 和 轻量应用服务器 腾讯云中的"云服务器"&#xff08;Cloud Virtual Machine, CVM&#xff09;和"轻量应用服务器"&#xff08;Lite Cloud Server&#xff09;都是提供云端计算资源的服务&#xff0c;但它们在定位、特性和使用场景上存在一些差…
阅读更多...
【昇思大模型平台体验篇】day1快速入门

【昇思大模型平台体验篇】day1快速入门

早闻毕晟、昇思等平台&#xff0c;今日有机会能参加入门课程&#xff0c;非视频课程算是我第一次看&#xff0c;也算是对我自己的一个锻炼&#xff0c;之前也没有系统学习模型之类&#xff0c;每天抽出一点点时间来学习一下也是不错的 MindSpore 看来是和torch类似的结构 处理…
阅读更多...
GPT5将引领第四次工业革命：人工智能、物联网、大数据、生物技术、量子计算等的综合体GPT大模型将改变很多现在的工作方式和生活方式，人人必读，人人必用

GPT5将引领第四次工业革命：人工智能、物联网、大数据、生物技术、量子计算等的综合体GPT大模型将改变很多现在的工作方式和生活方式，人人必读，人人必用

2024年6月22日&#xff0c;美国达特茅斯工程学院的一场采访引起了全球科技界的广泛关注。OpenAI首席技术官米拉穆拉蒂在采访中确认&#xff0c;备受期待的GPT-5将在一年半后发布。 这一消息不仅激起了科技界的热烈讨论&#xff0c;也让人们对人工智能&#xff08;AI&#xff09…
阅读更多...
LongRAG：利用长上下文大语言模型提升检索生成效果

LongRAG：利用长上下文大语言模型提升检索生成效果

一、前言 前面我们已经介绍了多种检索增强生成 (RAG) 技术&#xff0c;基本上在保证数据质量的前提下&#xff0c;检索增强生成&#xff08;RAG&#xff09;技术能够有效提高检索效率和质量&#xff0c;相对于大模型微调技术&#xff0c;其最大的短板还是在于有限的上下文窗口…
阅读更多...
最新文章

Copyright @ 2022~2023