DDei在线设计器-DDeiCore-图形插件

news2025/11/1 14:37:25

DDei-Core-图形

  DDei-Core-图形插件包含了基础绘图形状与基础流程形状两个分组，大约100来个图形，能够满足很基本的框图、架构图、流程图的绘制。

  图形以分组的形式组织，一个分组中包含多个图形，一个图形也能够同时存在于多个分组。图形、属性以及分组都是基于JSON配置，这个JSON可以来自于插件也可以来自服务端。

  如需了解详细的API教程以及参数说明，请参考DDei文档

使用说明

  本插件包括画布、图层、线段、正方形、长方形、圆形、三角形、平行四边形等多边形以及流程的相关形状，提供了基础属性，默认具备边框、填充和文本三组属性。

效果截图
在这里插入图片描述

在这里插入图片描述

使用

  本插件缺省包含在DDei包中，可以直接使用。如果不需要修改默认图形属性，则可以省略下面两个步骤。

  本插件不能通过插件名使用，且只能出现在extensions第一级。

引入

import { DDeiCoreControls } from "ddei-editor";

使用

extensions: [
  ......
  //通过插件，配置分组或控件缺省值  // [!code ++:9]
  DDeiCoreControls.configuration({ 
    '100002': { //设置编号100002控件的边框为红色，宽度为3像素
      border: { color: 'red', width: 3 }
    },
    '100001': {
      border: { color: 'yellow' }
    }
  })
],

基本信息

插件名-
类名DDeiCoreControls
类别Control

图形列表

插件名-
类名DDeiCoreControls
类别Control

分组

IDCODE名称主题说明
101basic-shapes基础绘图形状basic基础的绘图形状，包含了正方形、长方形、三角形、圆形、线条等基础形状
102basic-flow-shapes基础流程形状basic基础的流程形状，包含了开始、结束、任务、分支等基础形状

基础绘图形状

ID名称分组ID说明
DDeiStage画布无画布的图形定义
DDeiLayer图层无图层的图形定义
100401连接线无连线的图形定义
100500多边形无多个3-N边构成的多边形
100201矩形容器无矩形形状的容器，能够包含其他容器
100200文本101根据内容自动调整大小的文本
100001正方形101
100002长方形101
100003圆形101
100004圆角正方形101
100005圆角矩形101
100006椭圆101
100007矩形边框101
100010三角形101
100011直角三角形101
100012直接三角形-圆角101
100013圆角三角形101
100014圆角三角形101
100015圆角三角形101
100020五边形101
100021圆角五边形101
100030六边形101
100031圆角六边形101
100040菱形101
100041圆角菱形101
100050平行四边形101
100051平行四边形-圆角101
100060梯形101
100061圆角梯形101
100070五角星101
100076六角形101
100075六芒星101
100077六芒星101
104001角101
104105小括号101
104115中括号101
104125大括号101
100110半圆101

基础流程形状

ID名称分组ID说明
102001开始102
102002开始102
102010任务102
102011任务102
102012开始或结束102
102020分支102
102021分支102
102040子流程102
102041预定义流程102
103003文档102
103030数据102
103031数据102
103032存储数据102
103033顺序数据102
103013直接数据102
102090结束102
102091结束102
102092结束102
103010数据库102
103001人员102
103002人员102
102050循环界限102
102052手动输入102
102057手动操作102
102053卡片102
102054准备102
103004纸带102
102055推迟102
102056显示内容102
102051跨页引用102
102058控制传递102

属性

  图形用于在画布上展示图像，图形和属性共同构成一个完整的定义。每创建一个图形，就会根据定义生成一个图形实例，每个图形实例都有一组属性，如：边框、背景、文本、ID等。以下为属性清单，大多数图形都适用。

画布

CODE名称数据类型范围缺省值备注
paper纸张object
paper.type纸张类型string无/A4/A3/自定义等A4纸张规格，值为A4
paper.width纸张宽度number210为自定义时设置纸张大小
paper.height纸张高度number297为自定义时设置纸张大小
paper.unit纸张单位stringmm/cm/m/in/px为自定义时设置纸张大小
paper.direct纸张方向number1纵向/2横向2
mark水印object
mark.type水印类型number0无/1文本/2图片0
mark.data水印内容string文字或者图片base64
mark.direct水印方向number1从左往右/2从右往左/3水平1
mark.opacity透明度number0-1之间0.25
mark.font水印字体object为文本时的字体
mark.font.family字体名称string系统缺省
mark.font.size字体大小number14
mark.font.color字体颜色string
ruler标尺object
ruler.display是否显示number0隐藏/1显示1
ruler.unit单位stringmm/cm/m/in/px
grid网格object
grid.display显示模式number0无/1线条/2点阵1
global全局object
global.jumpline跳线number0关闭/1开启1遇到线交叉时，展示跳线

图层

CODE名称数据类型范围缺省值备注
bg背景object
bg.type背景类型number0无/1纯色/2图片1
bg.color背景颜色string
bg.image背景图片stringbase64/url
bg.opacity透明度number0-1之间1
bg.imageMode图片模式number0原始/1缩放/2填充2
bg.imageScale图片缩放number0.01-101
bg.imageAlign图片方位number1-95左上到右下，依次1-9

图形

  大多数图形共有的属性，不同图形可能有删减，初始化值可能不同。

CODE名称数据类型范围缺省值备注
ididstring画布唯一
code编码string一般用于业务
text文本string
width宽度number>0150
height高度number>0150
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

连线

CODE名称数据类型范围缺省值备注
ididstring画布唯一
code编码string一般用于业务
text文本string
type类型number1直线/2折线/3曲线1
weight宽度number>01
color颜色string
dash虚线Array>0
opacity透明度number0-1之间0.25
round圆角number0-300
jumpline跳线number0关闭/1开启1
sp起点object
sp.type起点类型number-1无/1箭头/2圆形/21圆形-实心/3方形/31-方形实心/4菱形/41菱形实心/5三角/51三角实心/6半圆/61半圆实心-1
sp.weight起点大小number1-306
ep终点object
ep.type终点类型number同起点5
ep.weight终点大小number1-306
fill填充object
fill.weight填充大小number0-300
fill.color填充颜色string

文本属性

  在含有文本的控件上，我们通过属性可以整体设置字体颜色等信息，如果需要局部设置某个文本的样式时，需要用到文本属性，文本属性优先级大于属性。

在这里插入图片描述

CODE名称数据类型范围缺省值备注
sptStyle文本样式Array
sptStyle[n].hollow镂空number0否/1是0
sptStyle[n].bold加粗number0否/1是0
sptStyle[n].italic斜体number0否/1是0
sptStyle[n].underline下划线number0否/1是0
sptStyle[n].deleteline删除线number0否/1是0
sptStyle[n].bgcolor文本背景string
sptStyle[n].subtype标注类型number0正常/1上标/2中标/3下标0
sptStyle[n].font字体object
sptStyle[n].font.family字体名称string系统缺省
sptStyle[n].font.size字体大小number14
sptStyle[n].font.color字体颜色string

仓库信息

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

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

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

技术支持

QQ:3697355039     邮箱：3697355039@qq.com

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

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

相关文章

李廉洋：6.11黄金原油持续震荡，今日美盘最新分析策略。

李廉洋：6.11黄金原油持续震荡，今日美盘最新分析策略。

黄金消息面分析：周一（6月10日）金价有所回升，此前一个交易日，金价创下了三年半以来的最大跌幅，原因是中国和美国公布的数据令押注中国需求和美联储降息的投机者感到失望。截至发稿，现货金上涨0.5…
阅读更多...
【Unity+AI01】在Unity中调用DeepSeek大模型！实现AI对话功能！

【Unity+AI01】在Unity中调用DeepSeek大模型！实现AI对话功能！

要在Unity中调用DeepSeek的API并实现用户输入文本后返回对话的功能，你需要遵循以下步骤： 获取API密钥： 首先，你需要从DeepSeek获取API密钥。这通常涉及到注册账户，并可能需要订阅相应的服务。 集成HTTP请求库&#xf…
阅读更多...
西南交通大学【操作系统实验6】

西南交通大学【操作系统实验6】

实验目的 学习如何产生一个系统调用，以及怎样通过往内核中增加一个新函数，从而在内核空间中实现对用户空间的读/写。学习重建内核。 实验内容 （1）设计并实现一个新的系统调用pedagogictime() ，该函数通过使用一个引用…
阅读更多...
Stable diffusion的SDXL模型，针不错！（含实操）

Stable diffusion的SDXL模型，针不错！（含实操）

与之前的SD1.5大模型不同，这次的SDXL在架构上采用了“两步走”的生图方式： 以往SD1.5大模型，生成步骤为 Prompt → Base → Image，比较简单直接；而这次的SDXL大模型则是在中间加了一步 Refiner。Refiner的作用是什么呢…
阅读更多...
Base64编码和ASCII编码

Base64编码和ASCII编码

1字节Byte 8比特bit 单位换算关系Byte1Byte 8bitKB1024ByteMB1024KBGB1024MB 网速中的Mbps和MB/s Mbps 1M bit/s 1024 K bit/s 1024 * 1024 bit/s MB/s 1024 KB/s 1024 * 1024 B/s 1024 * 1024 * 8 bit/s 所以：1Mbps 1/8 MB/s 1个bit，可以表示…
阅读更多...
利用Python的NLTK库来查询指定单词的同义词

利用Python的NLTK库来查询指定单词的同义词

一、NTLK库介绍 NLTK（Natural Language Toolkit） 是Python中最为知名的自然语言处理（NLP）库之一，它提供了丰富的模块和数据结构，专门用于人类语言数据的统计自然语言处理。它包含了文本处理库用于分类、标记…
阅读更多...
手机丢失不惊慌，华为手机已升级至楼层级设备查找！

手机丢失不惊慌，华为手机已升级至楼层级设备查找！

出门总是丢三落四，手机丢了怎么办？不要怕，只要你的华为手机升级至云空间新版本，就可以进行楼层级设备查找，现在可以查看到具体的楼层了！ 之前有手机丢失过的朋友，肯定有相似的经历&#xff0c…
阅读更多...
网页宽度现在右侧有一个竖条空白,怎么啦车网站都没办法完全铺满宽度,怎么回事怎么解决

网页宽度现在右侧有一个竖条空白,怎么啦车网站都没办法完全铺满宽度,怎么回事怎么解决

问: 网页宽度怎么设置全覆盖 回答: 经过检查,发现 是这个网站的最外层html标签设置了宽度,所以导致,当我们删除html的宽度后就解决了这个问题.
阅读更多...
【会议征稿，ACM出版】2024年粤港澳大湾区教育数字化与计算机科学国际学术会议（EDCS 2024，6月21-23）

【会议征稿，ACM出版】2024年粤港澳大湾区教育数字化与计算机科学国际学术会议（EDCS 2024，6月21-23）

人工智能、区块链、虚拟现实技术等新一轮技术革命正在推进社会结构变革；数字化转型正在重塑社会、劳动力市场和未来工作形式，其中关于教育领域，2019，2020的冠状病毒病大流行给全球教育带来巨大挑战，加速了教育数字化转…
阅读更多...
海南聚广众达电子商务咨询有限公司打造一站式电商服务

海南聚广众达电子商务咨询有限公司打造一站式电商服务

在数字经济的浪潮中，电商行业蓬勃发展，各种平台和服务商如雨后春笋般涌现。其中，海南聚广众达电子商务咨询有限公司凭借其专业的团队和丰富的经验，在抖音电商服务领域独树一帜，成为业界的佼佼者。 海南聚广众达电子商…
阅读更多...
Advanced Intelligent Systems 清华大学曲钧天团队设计了基于光纤传感技术的多模态触觉感知仿生机械手

Advanced Intelligent Systems 清华大学曲钧天团队设计了基于光纤传感技术的多模态触觉感知仿生机械手

随着软体机器人技术的发展，触觉感知在人机安全交互、可穿戴设备和医疗器械领域发挥着重要作用。如何用简单的系统集成更多的触觉感知、获取更多交互信息面临着诸多挑战。 近日，清华大学国际研究生院曲钧天助理教授团队在国际期刊Advanced Intelligent S…
阅读更多...
python的resample()函数

python的resample()函数

介绍 在Python中，resample()函数是一个常用的工具，用于对时间序列数据进行重新采样。这个函数可以将时间序列数据从一个频率转换为另一个频率，比如将每天的数据转换为每月的数据。在本教程中，我将向你展示如何使用resample()函数，并解释每个步骤的具体含义。 整体流程 首先…
阅读更多...
泉城济南的隐秘珍宝与山东旅游必去十大景点

泉城济南的隐秘珍宝与山东旅游必去十大景点

泉城济南的隐秘珍宝与山东旅游必去十大景点 济南，这座历史悠久的城市，不仅以其丰富的人文底蕴著称，还拥有诸多引人入胜的自然景观。在这片华夏神州广阔的齐鲁大地上，济南特别以其“三无风景区”——无影山、无影潭、无影泉——而闻…
阅读更多...
云联HIS系统源码，二级医院信息系统源码，支持云架构部署模式

云联HIS系统源码，二级医院信息系统源码，支持云架构部署模式

采用java语言开发B/S广域互联模式，支持云架构部署模式，支持大数据分析技术；支持与医保平台接口、电子票据对接。 云HIS系统相关技术： 后台：JavaSpring，SpringBoot，SpringMVC，Sprin…
阅读更多...
Facebook商城号怎么做？思路与操作分析

Facebook商城号怎么做？思路与操作分析

2016 年，Facebook打造了同名平台 Facebook Marketplace。通过利用 Facebook 现有的庞大客户群，该平台取得了立竿见影的成功，每月访问量将超过 10 亿。对于个人卖家和小企业来说，Facebook Marketplace是一个不错的销货渠道&#xf…
阅读更多...
电商项目-day02

电商项目-day02

文章目录 分析项目结构登录请求项目搭建Result总结 分析项目结构 语法的限制打开 端口修改 修改port 前端的入口工程是main.js 登录请求 早期的登录是使用session 称为 会话 也称为域 使用jwt进行验证 模块 spzx-partent 父工程 使用pom 其他的模块都是 jar包 项目搭…
阅读更多...
《Brave New Words 》5.1 传递真相：偏见和虚假信息现状

《Brave New Words 》5.1 传递真相：偏见和虚假信息现状

Part V: Keeping Kids Safe 第五部分：确保孩子安全 Never travel faster than your guardian angel can fly. —Mother Teresa 永远不要比你的守护天使飞得更快。 ——特蕾莎修女 Distrust and caution are the parents of security. —Benjamin Franklin 不信任和谨…
阅读更多...
LabVIEW轴承试验机测控系统

LabVIEW轴承试验机测控系统

开发了一种基于LabVIEW软件开发的大功率风电机组增速箱轴承试验机测控系统。系统主要用于模拟实际工况，进行轴承可靠性分析，以优化风电机组的性能和可靠性。通过高度自动化的测控系统，实现了对试验机的精确控制，包括速度、振动、温…
阅读更多...
白嫖Cloudflare Workers 搭建 Docker Hub镜像加速服务|

白嫖Cloudflare Workers 搭建 Docker Hub镜像加速服务|

简介 基于Cloudflare Workers 搭建 Docker Hub镜像加速服务。 首先要注册一个Cloudflare账号。 Cloudflare账号下域名的一级域名，推荐万网注册个top域名，再转移到Cloudflare，很便宜的。 注意 Worker 每天每免费账号有次数限制，为…
阅读更多...
48.HTTP 规范规定，跟随重定向时必须使用 GET 方法

48.HTTP 规范规定，跟随重定向时必须使用 GET 方法

起因： 今天在练习一个Django功能时，把form的method设置为POST，但是实际提交时，一直是GET方法。最后，从下面这张图发现了端倪： 第一次是method是POST方法，被重定向时，变成了GET。 继…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023