DDei在线设计器-DDeiCore-面板插件

news2024/12/24 21:47:37

DDei-Core-面板

  面板是一个可见的功能界面，既可以装载到布局（Layout）上，也能够被嵌套进其它面板，这一篇对DDei-Core的提供的主要面板进行介绍，最后以表格的形式列举其它面板。

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

顶部菜单栏

  顶部菜单栏一般放在整个界面的最上方，用于显示重要的操作功能。

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

  顶部菜单栏是一个插件容器，每一个部分都是一个单独的插件。
在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreTopMenuPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件，配置每个子插件  // [!code ++:6]
  DDeiCoreTopMenuPanel.configuration({
    'panels': ["ddei-core-panel-fileinfo", 
       "ddei-core-panel-operate", "ddei-core-panel-fontandtext", "ddei-core-panel-tool"
      , "ddei-core-panel-sort"]
  })
],

基本信息

插件名ddei-core-panel-topmenu
类名DDeiCoreTopMenuPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
panels功能面板Array<string/json/DDeiPluginBase>[“ddei-core-panel-fileinfo”, “ddei-core-panel-operate”, “ddei-core-panel-fontandtext”, “ddei-core-panel-tool” , “ddei-core-panel-sort”]

控件工具项

  控件工具箱提供了控件的分组展示，用户可以通过拖拽的方式，创建控件。

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

在这里插入图片描述

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreToolboxPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件，配置选项  // [!code ++:7]
  DDeiCoreToolboxPanel.configuration({
    search:false, //关闭搜索功能
    expand:false, //关闭收折功能
    custom: true, //开启自定义分组
    customGroups: [302, 301, 102, 101] //配置自定义分组
  })
],

基本信息

插件名ddei-core-panel-toolbox
类名DDeiCoreToolboxPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
search开启搜索功能booleantrue/falsetrue
expand开启收折功能booleantrue/falsetrue
custom开启自定义分组booleantrue/falsefalse
customGroups自定义分组Array<string/number>custom为true时生效

主画布

  主画布负责展示图形，是整个DDei的核心。主画布支持无限画布、拖拽、旋转、缩放、拉伸、连线等操作，可以参考功能示例进行设置。不论选用哪种布局，都必须存在一个主画布插件。

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

使用方式

主画布没有配置项，建议通过插件名直接使用

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreCanvasViewPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件  // [!code ++:2]
  DDeiCoreCanvasViewPanel
],

基本信息

插件名ddei-core-panel-canvasview
类名DDeiCoreCanvasViewPanel
类别Panel

配置信息

  主画布无需配置。

属性面板

  属性面板提供了图形属性的展示和编辑功能，该面板和主画布联动，当选中图形后，会根据图形的属性配置，会刷新面板的内容，呈现属性编辑器。

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

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCorePropertyViewPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件  // [!code ++:4]
  DDeiCorePropertyViewPanel.configuration({
    expand:false, //关闭收折功能
  })
],

基本信息

插件名ddei-core-panel-propertyview
类名DDeiCorePropertyViewPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
expand开启收折功能booleantrue/falsetrue

底部菜单栏

  底部菜单栏一般用于非重要属性的编辑和信息的展示，用户可以切换页签、调整缩放比例、管理图层等。

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

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreBottomMenuPanel } from "ddei-editor";

使用

extensions: [
  ......
  //使用插件，配置子插件  // [!code ++:8]
  DDeiCoreBottomMenuPanel.configuration({
      'panels': [
                "ddei-core-panel-bottom-sheets",
                "ddei-core-panel-bottom-shapecount",
                "ddei-core-panel-bottom-managelayers"
                ]
  })
],

基本信息

插件名ddei-core-panel-bottommenu
类名DDeiCoreBottomMenuPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
panels功能面板Array<string/json/DDeiPluginBase>[“ddei-core-panel-bottom-sheets”, “ddei-core-panel-bottom-shapecount”, “ddei-core-panel-bottom-play”,“ddei-core-panel-bottom-managelayers”, “ddei-core-panel-bottom-changeratio”, “ddei-core-panel-bottom-suitratio”]

多文件编辑

  多文件编辑提供了文件卡片切换、文件创建、关闭等功能，多文件一般放置在主画布上方，位于标准布局的中间。

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

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreOpenFilesViewPanel } from "ddei-editor";;

使用

extensions: [
  ......
  //布局的配置
  DDeiCoreStandLayout.configuration({
    //配置插件
    'top': [],
    'middle': ['ddei-core-panel-openfilesview','ddei-core-panel-canvasview'], //通过插件名引用多文件插件 // [!code ++] 
    'bottom': [],
    'left': [],
    'right': []
  }),
  //配置多文件插件 // [!code ++:4]
  DDeiCoreOpenFilesViewPanel.configuration({
    max:3
  })
],

基本信息

插件名ddei-core-panel-openfilesview
类名DDeiCoreOpenFilesViewPanel
类别Panel

配置信息

属性名说明数据类型范围缺省值备注
expand开启收折booleantrue/falsetrue
new允许新建booleantrue/falsetrue
close允许关闭booleantrue/falsetrue
rename允许重命名booleantrue/falsetrue
drag允许拖拽booleantrue/falsetrue
beforeCloseFile关闭文件前回调函数Function可用于弹出询问框

快速颜色

  快速颜色提供了一组常用颜色，用于快速设置图形的边框、文本和填充色。

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

使用方式

安装

  本插件缺省包含在DDei包中，可以直接使用。

引入

import { DDeiCoreOpenFilesViewPanel } from "ddei-editor";;

使用

extensions: [
  ......
  //布局的配置
  DDeiCoreStandLayout.configuration({
    //配置插件
    'top': [],
    'middle': ['ddei-core-panel-canvasview','ddei-core-panel-quickcolorview'], //通过插件名引用快速颜色插件 // [!code ++] 
    'bottom': [],
    'left': [],
    'right': []
  }),
  //配置插件，非必需 // [!code ++:2]
  DDeiCoreQuickColorViewPanel
],

基本信息

插件名ddei-core-panel-quickcolorview
类名DDeiCoreQuickColorViewPanel
类别Panel

配置信息

快速颜色没有配置项，建议通过插件名直接使用

其它

  上述7个面板组成了常见设计器的要素。面板被设计为可以相互组合嵌套的功能界面，不论是一个按钮还是一组功能都可以封装为一个面板插件。封装后的面板插件也能够通过插件名、类名、configuration在任意地方使用，因此上述7个面板也是由一个个子面板组合而来。子面板种类繁多，这里将以表格的方式对这些子面板信息以及配置进行介绍。

顶部菜单-子面板

这些面板用于构成顶部菜单栏

文件信息面板

插件名ddei-core-panel-fileinfo
类名DDeiCoreFileInfoPanel
说明用于显示文件信息、提供保存、导入等按钮以及功能
类别Panel

操作面板

插件名ddei-core-panel-operate
类名DDeiCoreOperatePanel
说明提供剪切、复制、粘贴、格式刷功能
类别Panel

字体样式面板

插件名ddei-core-panel-fontandtext
类名DDeiCoreFontAndTextPanel
说明提供字体以及字体样式设置功能
类别Panel

工具面板

插件名ddei-core-panel-tool
类名DDeiCoreToolPanel
说明提供切换模式（选择、平移画布、创建文本）功能
类别Panel

排序面板

插件名ddei-core-panel-sort
类名DDeiCoreSortPanel
说明提供位置、对齐、旋转、组合等功能
类别Panel

底部菜单-子面板

这些面板用于构成底部菜单栏

多页签面板

基本信息

插件名ddei-core-panel-bottom-sheet
类名DDeiCoreSheetsPanel
说明提供多页签编辑以及切换功能
类别Panel

配置

属性名说明数据类型范围缺省值备注
new允许新建booleantrue/falsetrue
max最大打开数量number00为不限制
rename允许重命名booleantrue/falsetrue
drag允许拖拽booleantrue/falsetrue

图形总数面板

信息

插件名ddei-core-panel-bottom-shapecount
类名DDeiCoreShapeCountPanel
说明统计并显示当前文件的图形总数
类别Panel

配置

属性名说明数据类型范围缺省值备注
title文本标题string形状数

预览播放面板

插件名ddei-core-panel-bottom-play
类名DDeiCorePlayPanel
说明显示播放图标，用于预览播放所有页签的图
类别Panel

图层管理面板

插件名ddei-core-panel-bottom-managelayers
类名DDeiCoreManageLayersPanel
说明显示图层管理按钮，点击后会弹出图层管理弹框
类别Panel

全局缩放面板

信息

插件名ddei-core-panel-bottom-changeratio
类名DDeiCoreChangeRatioPanel
说明显示调整缩放按钮，对当前页签进行全局缩放
类别Panel

配置

属性名说明数据类型范围缺省值备注
delta按钮点击增量number0.05
min最小值number0.1
max最大值number4
dialog开启弹框booleantrue
range开启范围选择booleantrue
step范围选择步长number0.1

最佳比例面板

插件名ddei-core-panel-bottom-suitratio
类名DDeiCoreSuitRatioPanel
说明显示最佳缩放比例按钮，点击后自动设置为刚好能显示出完整图形的缩放比例
类别Panel

仓库信息

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

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

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

技术支持

QQ:3697355039     邮箱：3697355039@qq.com

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

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

相关文章

Java并发编程三大神器之Semaphore

Java并发编程三大神器之Semaphore

Java并发编程三大神器之Semaphore 1、Semaphore是什么2、Semaphore小试牛刀3、Semaphore和CountDownLatch组合使用4、Semaphore常用方法5、Semaphore 结语 1、Semaphore是什么 Semaphore 是一个计数信号量&#xff0c;是JDK1.5引入的一个并发工具类&#xff0c;位于java.util.…
阅读更多...
YOLOv10涨点改进SPPF创新结构，重新设计全局平均池化层和全局最大池化层，增强全局视角信息和不同尺度大小的特征

YOLOv10涨点改进SPPF创新结构，重新设计全局平均池化层和全局最大池化层，增强全局视角信息和不同尺度大小的特征

本文改进:SPPF_improve利用全局平均池化层和全局最大池化层，加入一些全局背景信息和边缘信息，从而获取全局视角信息并减轻不同尺度大小所带来的影响，强烈推荐，适合直接使用，paper创新级。 目录 1，YOLOv10介绍 1.1 C2fUIB介绍 1.2 PSA介绍 1.3 SCDown 2.SPP &SP…
阅读更多...
React 中的事件处理

React 中的事件处理

React 中是如何处理事件的&#xff0c;现在下面简单的一段代码&#xff1a; export default function App() {const AList lazy(()>import(./List.js))const r useRef(null) const [show, setShow] useState(false);return (<><button onFocus{()>{setShow…
阅读更多...
如何用 ChatGPT DALL-E3绘画（10个案例）

如何用 ChatGPT DALL-E3绘画（10个案例）

如何用ChatGPT绘画——10个案例&#xff08;附提示词&#xff09; DALL•E 3可以在ChatGPT plus里直接使用了。 如果想免费使用&#xff0c;可以用新必应免费使用。 上次有个朋友问&#xff1a;DALL•E 3 有什么用。 这里用十个案例&#xff0c;来解释一下这个问题。 1.创…
阅读更多...
国产MCU芯片（1）：航顺芯片MCU概览

国产MCU芯片（1）：航顺芯片MCU概览

前言： 截止2023年底，全国有3451家芯片设计公司，已经IPO的就有168家，尚未IPO的3283家中超过一半的年营收在1000万以下，迅猛发展的几年的确有些国产芯片开始站上赛道，这也是国际大背景下的一种必然选择，毕竟突然间出现的大市场需要国产顶上，但资本市场是周期性的，国产替…
阅读更多...
扫地机LiDAR形态之美

扫地机LiDAR形态之美

石头扫地机V20 LiDAR: Flash光源和Spot光源切换 图来自 Robot森 LiDAR（Light Detection and Ranging，激光雷达）技术在扫地机器人中的应用，不仅提升了机器的智能性和实用性，还展现了一种科技与艺术的融合之美。 一、外观设计的精致性 紧凑与轻巧：扫地机器人的LiDAR传感器…
阅读更多...
qt笔记之main.cpp加载qml文件的3种方法QQuickView 、QQmlApplicationEngine、QQuickWidget

qt笔记之main.cpp加载qml文件的3种方法QQuickView 、QQmlApplicationEngine、QQuickWidget

qt笔记之main.cpp加载qml文件的3种方法QQuickView 、QQmlApplicationEngine、QQuickWidget —— 2024-06-16 下午 code review! 文章目录 qt笔记之main.cpp加载qml文件的3种方法QQuickView 、QQmlApplicationEngine、QQuickWidget1.使用qtcreator创建qml空项目&#xff0c;默…
阅读更多...
手把手教你如何在Windows11下安装Docker容器

手把手教你如何在Windows11下安装Docker容器

文章的主要要点&#xff1a; 为什么使用Docker&#xff1a;Docker可以简化部署过程&#xff0c;特别适合新手或在学习新技能&#xff08;如Redis、MySQL、消息队列、Nginx等&#xff09;时使用。 安装前的准备&#xff1a;在安装Docker之前&#xff0c;需要在Windows中开启一些…
阅读更多...
ModuleNotFoundError: No module named ‘distutils‘的解决办法

ModuleNotFoundError: No module named ‘distutils‘的解决办法

最近想试试odoo17&#xff0c;在windows环境下&#xff0c;想安装试验一下&#xff0c;结果老出现oduleNotFoundError: No module named ‘distutils‘错误。查了一下&#xff0c;以为是python版本导致的&#xff0c;结果试了很多版本如下&#xff1a; 试了几个&#xff0c;每个…
阅读更多...
HLS入门实验

HLS入门实验

文章目录 一、HLS介绍1.1 什么是HLS1.2HLS与VHDL/Verilog编程技术有什么关系?1.3HLS的关键技术和技术局限性1.3.1关键技术1.3.2 技术局限性 二、HLS入门实验2.1安装Vivado2.2创建项目2.3添加文件2.4仿真2.5创建Vivado工程2.6生成IP核2.7添加代码 参考 一、HLS介绍 1.1 什么是…
阅读更多...
【C语言】解决C语言报错：Race Condition

【C语言】解决C语言报错：Race Condition

文章目录 简介什么是Race ConditionRace Condition的常见原因如何检测和调试Race Condition解决Race Condition的最佳实践详细实例解析示例1&#xff1a;缺乏适当的同步机制示例2&#xff1a;错误使用条件变量 进一步阅读和参考资料总结 简介 Race Condition&#xff08;竞争条…
阅读更多...
计算缺失msvcr120.dll文件怎么办，msvcr120.dll丢失的解决方法分享

计算缺失msvcr120.dll文件怎么办，msvcr120.dll丢失的解决方法分享

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到msvcr120.dll”。那么&#xff0c;msvcr120.dll到底是什么&#xff1f;为什么计算机会找不到它&#xff1f;它会对计算机产生什么具体影响&#xff1f;如何解决这个问题&#xff1f;…
阅读更多...
证照之星 XE版软件怎么下载安装? 【详细安装图文教程】

证照之星 XE版软件怎么下载安装? 【详细安装图文教程】

软件简介&#xff1a; 证照之星是国内顶级的证件照片制作软件&#xff0c;具有一键裁剪&#xff0c; 智能背景替换&#xff0c;批量制作、内置证照规格的四大优势。同时两大独创技术&#xff1a;智能去除皮肤油光、证照服装替换。同时支持联机拍摄&#xff1a;支持网络摄像头及…
阅读更多...
linux中批量给文件改名

linux中批量给文件改名

rename 需要批量将文件名前的UC-10_取消掉&#xff0c;以数字来命名文件 rename s/UC-10_// *.jpg 修改成功 要是修改为其他名字需要在单引号的第二个/后加字符即可 例如要改为li
阅读更多...
一段代码读取Chrome存储的所有账号密码和Cookie

一段代码读取Chrome存储的所有账号密码和Cookie

先写结论&#xff1a; Chrome密码管理里的账号密码&#xff0c;还有Cookie&#xff0c;安全性并不算太高&#xff0c;一段代码就可以自动读取并上报到其它地方。 尤其是国内用户大多喜欢破解软件&#xff0c;这些软件只要注入这样一段代码&#xff0c;就无声无息的把你的所有账…
阅读更多...
74HC04做陶瓷和晶体振荡器实验初步

74HC04做陶瓷和晶体振荡器实验初步

面包板&#xff0c;电压5V 17.6Mhz晶振&#xff0c;起振OK 其他的465K&#xff0c;1M&#xff0c;4M&#xff0c;10M&#xff0c;16M&#xff0c;20M陶瓷不起振 更换过Rf也不起作用&#xff0c;待研究。 rf参考&#xff0c;这是人家博客给出的。 还看到一个文章说&#xff…
阅读更多...
框架的使用

框架的使用

什么是框架&#xff1f; 盖房子&#xff0c;框架结构 框架结构就是房子主体&#xff0c;基本功能 把很多基础功能已经实现&#xff08;封装了&#xff09; 框架&#xff1a;在基础语言之上&#xff0c;对各种基础功能进行封装&#xff0c;方便开发者&#xff0c;提高开发效…
阅读更多...
3D ToF赋能小米CyberDog 2提升视觉灵敏度

3D ToF赋能小米CyberDog 2提升视觉灵敏度

随着科技的进步，智能机器人越来越多地融入我们的日常生活。其中，CyberDog 2作为一款前沿的四足机器人，凭借其出色的视觉灵敏度和多功能技术配备，受到了广泛的关注。本文将重点探讨CyberDog 2的视觉系统，尤其是其四种不同类型的摄像头如何共同提升其视觉灵敏度，以及激光传…
阅读更多...
书生·浦语大模型实战营第二期作业六

书生·浦语大模型实战营第二期作业六

1、安装环境&#xff1a; 2、安装legent和agentlego&#xff1a; 3、部署apiserver&#xff1a; 4、legent web demo&#xff1a; 5、没搜到&#xff0c;很尴尬&#xff1a; 6、自定义工具&#xff1a; 7、智能体“乐高”&#xff1a; 8、智能体工具&#xff0c;识别图片&#…
阅读更多...
C++ 矩阵乘法

C++ 矩阵乘法

描述 如果A是个x行y列的矩阵&#xff0c;B是个y行z列的矩阵&#xff0c;把A和B相乘&#xff0c;其结果将是另一个x行z列的矩阵C。这个矩阵的每个元素是由下面的公式决定的 矩阵的大小不超过100*100 输入描述&#xff1a; 第一行包含一个正整数x&#xff0c;代表第一个矩阵的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023