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

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

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

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

相关文章

Python 全栈系列252 一些小计划

Python 全栈系列252 一些小计划

说明 最近整体进展还比较顺利&#xff0c;不过也因为这样&#xff0c;好几个线头怎么继续平衡和推进需要稍微捋一下。 内容 按重要|紧急方法来看&#xff0c;线头1是重要且紧急的&#xff0c;QTV200也算重要且紧急&#xff0c;其他都算是重要不紧急。 线头1: 数据清洗 虽然…
阅读更多...
超好用的几个提升知识储备的网站-搜嗖工具箱

超好用的几个提升知识储备的网站-搜嗖工具箱

和图书 https://www.hetushu.com/ 一个好用的免费看小说网站。和图书是一个提供各种热门电子书,书籍,小说免费在线阅读的网站&#xff0c;涵盖网游、玄幻、穿越、科幻、仙侠、都市、武侠、历史、竞技、军事灵异等多个种类的小说。在这个网站看小说最大的感触简单干净&#xff…
阅读更多...
基于cortex-M3的rtos原理(上)

基于cortex-M3的rtos原理(上)

一、RTOS是什么&#xff1f; 下面是网上搜索到的定义&#xff1a; 看到系统一般会想到window&#xff0c;linux这种&#xff0c;但是rtos区别于它们的是占用资源小&#xff0c;实时性强&#xff0c;可以运行在资源受限的mcu上。一些soc厂商编写的sdk里带有添加“任务”的功能&…
阅读更多...
Day03 链表概念与单向不循环链表的实现

Day03 链表概念与单向不循环链表的实现

目录 1、顺序表的优缺点 2、链式存储的线性表 3、单向不循环链表实现 1、顺序表的优缺点 顺序表的优点是： 由于顺序表数据元素的内存地址都是连续的，所以可以实现随机访问，而且不需要多余的信息来描述相关的数据，所以存储密度高。 顺序表的缺点是： 顺序表的数据在进行…
阅读更多...
http穿透怎么做？

http穿透怎么做？

众所周知http协议的默认端口是80&#xff0c;由于国家工信部要求&#xff0c;域名必须备案才给开放80端口&#xff0c;而备案需要固定公网IP&#xff0c;这就使得开放http80端口的费用成本和时间成本变的很高。那么能不能利用内网穿透技术做http穿透呢&#xff1f;下面我就给大…
阅读更多...
git回滚项目至指定版本

git回滚项目至指定版本

用过两种方式 1.使用git命令 进入到项目目录地址&#xff0c;使用git log查看提交版本信息 按q退出 若非对应分支&#xff0c;使用git checkout 分支名 切换分支 这里回退至上一个版本 git reset --hard 版本号 再次推送即可 这里需要使用-f命令 强行推送 2.在pycharm中…
阅读更多...
Ps：管理动作和动作组

Ps：管理动作和动作组

◆ ◆ ◆ 管理动作 管理“动作” Actions面板中的动作以使其具有条理性&#xff0c;并仅提供项目所需的动作&#xff0c;可以重新排列、复制、删除、重命名和更改动作选项等。 1、重新排列动作中的命令 在“动作”面板中&#xff0c;将命令拖动到同一动作中或另一动作中的新位…
阅读更多...
使用gtest做cpp的单元测试并可查看代码覆盖率

使用gtest做cpp的单元测试并可查看代码覆盖率

前言 由于工作需要&#xff0c;要使用googletest做单元测试&#xff0c;本文记录下搭建gtest单元测试环境&#xff0c;并查看代码覆盖率的方法&#xff0c;以备不时之需。 准备工作 编译gtest 克隆gtest源码&#xff1a; git clone https://github.com/google/googletest.g…
阅读更多...
Vue44-创建vue脚手架

Vue44-创建vue脚手架

一、Vue脚手架的版本说明 vue cli&#xff1a;command line interface 命令行接口工具 用最新的脚手架&#xff0c;这样可以兼容vue3荷vue2版本。 二、通过vue脚手架创建项目 注意&#xff1a; 执行npm run serve 启动项目的时候&#xff0c;要进入到创建的vue项目里面&…
阅读更多...
Java高级特性

Java高级特性

引言 Java不仅提供了基础的编程功能&#xff0c;还包括了一系列强大的高级特性&#xff0c;这些特性能够显著提高代码的灵活性、可扩展性和性能。本文将详细介绍Java的几个高级特性&#xff0c;包括反射机制、注解与注释、泛型编程、以及Lambda表达式与Stream API&#xff0c;并…
阅读更多...
KVM+GFS分布式存储系统构建高可用群集

KVM+GFS分布式存储系统构建高可用群集

KVMGFS 分布式存储系统构建 KVM 高可用群集 一&#xff1a;理论概述 1.1&#xff1a;Glusterfs 简介 Glusterfs 文件系统是由 Gluster 公司的创始人兼首席技术官 Anand Babu Periasamy编写。 一个可扩展的分布式文件系统&#xff0c; 用于大型的、 分布式的、 对大量数据进行访…
阅读更多...
CrossOver 2024软件安装包下载

CrossOver 2024软件安装包下载

CrossOver不像Parallels或VMware的模拟器&#xff0c;而是实实在在Mac OS X系统上运行的一个软件。CrossOvers能够直接在Mac上运行Windows软件与游戏&#xff0c;而不需虚拟机。它为Windows软件提供所需的资源&#xff0c;以达到在Mac OS X系统上运行Windows程序的目的。 安 装…
阅读更多...
OpenCV形态学

OpenCV形态学

什么事形态学处理 基于图像形态进行处理的一些基本方法&#xff1b; 这些处理方法基本是对二进制图像进行处理&#xff1b; 卷积核决定着图像出来后的效果。 一 图像二值化 什么是二值化 将图像的每个像素变成两种值&#xff0c;如0,255. 全局二值化。 局部二值化。 thres…
阅读更多...
【AIGC】MetaGPT原理以及应用

【AIGC】MetaGPT原理以及应用

目录 MetaGPT原理 MetaGPT应用 MetaGPT和传统编程语言相比有什么优势和劣势 视频中的PPT 参考资料 MetaGPT原理 MetaGPT是一种多智能体框架&#xff0c;它结合了元编程技术&#xff0c;通过标准化操作程序&#xff08;SOPs&#xff09;来协调基于大语言模型的多智能体系统…
阅读更多...
商品搬家到抖店

商品搬家到抖店

使用的工具为 张飞搬家&#xff0c;登录上去 张飞搬家 1 复制商品的网址 商品链接复制过去后&#xff0c;点击下面的开始批量复制 2 检查修改商品信息 价格啊、图片啊、各种商品属性啊&#xff0c;检查下&#xff0c;不合适的修改和补充 3 开始搬家 4 查看商品 打开抖店后…
阅读更多...
数据库基础（一）

数据库基础（一）

目录 一、一些基本概念 1. 四个事务隔离级别 Read Uncommitted&#xff08;读取未提交内容&#xff09; Read Committed&#xff08;读取提交内容&#xff09; Repeatable Read&#xff08;可重读&#xff09; Serializable&#xff08;可串行化&#xff09; 2. MVCC&am…
阅读更多...
Windows运维：找到指定端口的服务

Windows运维：找到指定端口的服务

运维过windows的或多或少都遇到过需要找到一个端口对应的服务&#xff0c;或者是因为端口占用&#xff0c;或者是想看下对应的服务是哪个&#xff0c;那么如何操作呢&#xff1f;看看本文吧。 1、按照端口找到进程ID 例如想找8000端口的进程ID netstat -ano | findstr :8000 2…
阅读更多...
大模型算法备案全网最详细说明（附附件）

大模型算法备案全网最详细说明（附附件）

本文要点&#xff1a;大模型备案最详细说明&#xff0c;大模型备案条件有哪些&#xff0c;《算法安全自评估报告》模板&#xff0c;大模型算法备案&#xff0c;大模型上线备案&#xff0c;生成式人工智能(大语言模型)安全评估要点&#xff0c;网信办大模型备案。 共分为以下几…
阅读更多...
【Numpy】一文向您详细介绍 np.floor()

【Numpy】一文向您详细介绍 np.floor()

【Numpy】一文向您详细介绍 np.floor() 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&#xff0c;…
阅读更多...
【操作与配置】Pytorch环境搭建

【操作与配置】Pytorch环境搭建

安装显卡驱动 显卡驱动是一种软件程序&#xff0c;用于控制显卡硬件与操作系统之间的通信和交互。显卡驱动负责向操作系统提供有关显卡硬件的信息&#xff0c;以及使操作系统能够正确地控制和管理显卡的各种功能和性能。显卡驱动还包含了针对不同应用程序和游戏的优化&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023