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.mfbz.cn/a/760041.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Crontab命令详解：轻松驾驭Linux定时任务，提升系统效率

Crontab命令详解：轻松驾驭Linux定时任务，提升系统效率

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 引言&#xff1a; crond是Linux系统中用来定期执行命令或指定程序任务的一种服务或软件…
阅读更多...
C++ | Leetcode C++题解之第199题二叉树的右视图

C++ | Leetcode C++题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> rightSideView(TreeNode* root) {unordered_map<int, int> rightmostValueAtDepth;int max_depth -1;stack<TreeNode*> nodeStack;stack<int> depthStack;nodeStack.push(ro…
阅读更多...
【数据结构】（C语言）：二叉搜索树

【数据结构】（C语言）：二叉搜索树

二叉搜索树&#xff1a; 树不是线性的&#xff0c;是层级结构。基本单位是节点&#xff0c;每个节点最多2个子节点。有序。每个节点&#xff0c;其左子节点都比它小&#xff0c;其右子节点都比它大。每个子树都是一个二叉搜索树。每个节点及其所有子节点形成子树。可以是空树。…
阅读更多...
leetCode.98. 验证二叉搜索树

leetCode.98. 验证二叉搜索树

leetCode.98. 验证二叉搜索树 题目描述 代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(n…
阅读更多...
鱼叉式钓鱼

鱼叉式钓鱼

鱼叉式网络钓鱼&#xff1a; 鱼叉式网络钓鱼是一种网络钓鱼形式&#xff0c;它针对特定个人或组织发送定制消息&#xff0c;旨在引发特定反应&#xff0c;例如泄露敏感信息或安装恶意软件。这些攻击高度个性化&#xff0c;使用从各种来源收集的信息&#xff0c;例如社交媒体资…
阅读更多...
sky18流水线设计

sky18流水线设计

1.最大时钟频率确定 时钟周期要大于等于组合逻辑的delay&#xff08;最大的那条delay&#xff09; Freq_max(Mhz) 1000/T_delay(ns); 数据吞吐率Throughput Freq_max *Toggle_rate;//Toggle_rate&#xff1a;如两个时钟&#xff0c;输入变一次&#xff0c;就是50%&#xff1b…
阅读更多...
【考研408计算机组成原理】微程序设计重要考点指令流水线考研真题＋考点分析

【考研408计算机组成原理】微程序设计重要考点指令流水线考研真题＋考点分析

苏泽 “弃工从研”的路上很孤独&#xff0c;于是我记下了些许笔记相伴&#xff0c;希望能够帮助到大家 目录 微指令的形成方式 微指令的地址形成方式 对应考题 题目&#xff1a;微指令的地址形成方式 - 断定方式 解题思路&#xff1a; 答题&#xff1a; 分析考点&…
阅读更多...
大模型系列课程学习-基于2080TI-22G魔改卡搭建双卡大模型训练平台（双系统）

大模型系列课程学习-基于2080TI-22G魔改卡搭建双卡大模型训练平台（双系统）

1.选择合适的硬件配置 再配置电脑之前&#xff0c;需要确认自己需要的显存大小、主板、内存条、电源、散热等核心配件。经过前期调研&#xff0c;选择的硬件配置如下&#xff1a; &#xff08;1&#xff09;主板&#xff1a;华南X99_F8D(DDR4主板)&#xff0c;因为需要支持双卡…
阅读更多...
1Panel运维利器：功能详解与实操指南

1Panel运维利器：功能详解与实操指南

官网地址:https://1panel.cn/ 1Panel简介 1Panel是杭州飞致云信息科技有限公司旗下产品&#xff0c;是一款现代化、开源的Linux服务器运维管理面板&#xff0c;于2023年3月推出。 名称&#xff1a;1Panel开源Linux面板 所属公司&#xff1a;杭州飞致云信息科技有限公司 编写语…
阅读更多...
基于HarmonyOS NEXT开发智能提醒助手

基于HarmonyOS NEXT开发智能提醒助手

目录 目录 目录 前言 关于HarmonyOS NEXT 智能提醒助手需求分析 智能提醒助手设计 1、系统架构 2、功能模块 智能提醒助手的应用场景 智能提醒助手的竞争力 具体技术实现 未来展望 结束语 前言 随着智能设备的普及和物联网技术的飞速发展&#xff0c;人们对于智能…
阅读更多...
忙忙碌碌的混沌之中差点扑了个空而错过年中这条线

忙忙碌碌的混沌之中差点扑了个空而错过年中这条线

文章目录 前言初见端倪混沌初始力不从心心力交瘁拾遗补缺总结 前言 突然意识到过完这个周末已经7月份了&#xff0c;他预示着我的2024年已经过半了&#xff0c;过年回家仿佛还是昨天的事情&#xff0c;怎么转眼间已经到了年中了。心里还是不愿承认这件事&#xff0c;翻开自己2…
阅读更多...
Nacos配置中心客户端源码分析（一）: 客户端如何初始化配置

Nacos配置中心客户端源码分析（一）: 客户端如何初始化配置

本文收录于专栏 Nacos 推荐阅读&#xff1a;Nacos 架构 & 原理 文章目录 前言一、NacosConfigBeanDefinitionRegistrar二、NacosPropertySourcePostProcessor三、AbstractNacosPropertySourceBuilder总结「AI生成」 前言 专栏前几篇文章主要讲了Nacos作为服务注册中心相关…
阅读更多...
github主页这样优化，让人眼前一亮

github主页这样优化，让人眼前一亮

我的主页&#xff08;一之十六&#xff09; 1. 创建与账户ID同名的仓库 注意&#xff1a;记得勾选Add a README file 2. markdown语法自定义README.md 3. 辅助工具 优秀profile&#xff1a;https://zzetao.github.io/awesome-github-profile/动态文字&#xff1a;https://r…
阅读更多...
SpringMVC（1）——入门程序+流程分析

SpringMVC（1）——入门程序+流程分析

MVC都是哪三层&#xff1f;在Spring里面分别对应什么&#xff1f;SpringMVC的架构是什么&#xff1f; 我们使用Spring开发JavaWeb项目&#xff0c;一般都是BS架构&#xff0c;也就是Browser&#xff08;浏览器&#xff09;-Server&#xff08;服务器&#xff09;架构 这种架构…
阅读更多...
谷歌开发者新号上架攻略：开发者实战经验分享

谷歌开发者新号上架攻略：开发者实战经验分享

前段时间&#xff0c;不少开发者朋友们在纷纷在吐槽新账号没法上架成功。以前谷歌对新号是真的很严格&#xff0c;但现在情况似乎有所好转。 今天&#xff0c;和大家聊聊如何在新号成功上架上“快人一步”&#xff0c;以及怎样增加账号权重提高上架成功率。 首先&#xff0c;我…
阅读更多...
成绩发布背后：老师的无奈与痛点

成绩发布背后：老师的无奈与痛点

在教育的广阔天地里&#xff0c;教师这一角色承载着无数的期望与责任。他们不仅是知识的传播者&#xff0c;更是学生心灵的引路人。而对于班主任老师来说&#xff0c;他们的角色更加多元&#xff0c;他们不仅是老师&#xff0c;还必须是“妈妈”。除了像其他老师一样备课、上课…
阅读更多...
Linux文件系统与设备文件

Linux文件系统与设备文件

一、Linux文件操作 Linux的文件系统API主要涉及创建、打开、读写、定位、关闭文件 创建 int creat(const char *filename, mode_t mode);mode: 代表新建文件的存取权限&#xff0c;需要和umask相与才能确定最终权限(mode&umask)。 umask代表文件在创建时需要去掉的存取…
阅读更多...
8.12 矢量图层面要素单一符号使用十(箭头线渲染边界)

8.12 矢量图层面要素单一符号使用十(箭头线渲染边界)

前言 本章介绍矢量图层线要素单一符号中箭头线渲染边界的使用说明&#xff1a;文章中的示例代码均来自开源项目qgis_cpp_api_apps 箭头线渲染边界&#xff08;Outline: Arrow&#xff09; Outline系列只画边界&#xff0c;不填充内容以protected_areas.shp为例&#xff0c;图…
阅读更多...
Spring 动态增强逻辑执行分析

Spring 动态增强逻辑执行分析

1、假如UserService中存在被增强的public 普通方法&#xff0c;那么spring ioc时就会创建对应的代理对象放置到容器中&#xff1b; 2、那么Controller中注入的userService就是代理对象&#xff1b; Service public class UserService {Transactionalpublic void f2(String us…
阅读更多...
【训练篇】MLU370-M8 完成 qwen1.5-7b-chat-lora训练及推理

【训练篇】MLU370-M8 完成 qwen1.5-7b-chat-lora训练及推理

文章目录 前言一、平台环境配置二、环境 or 模型准备1.模型下载2.环境准备2.1 modelscope2.2 transformers2.3 accelerate2.4 deepspeed2.5 peft2.6 环境代码修改 3训练代码准备4 代码修改 三&#xff0c;训练后推理验证四.推理效果展示1.微调前2.微调后 前言 本期我们采用魔塔…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站