当前位置: 首页 > news >正文

DDei在线设计器-加载数据

加载数据

  本示例演示了怎样加载已有的JSON到设计器中。

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

外部数据JSON

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { ref,getCurrentInstance } from "vue"; // [!code ++:4]
import {DDeiEditor,DDeiFile} from "ddei-editor";
//获取主对象实例,代替this获取$refs
const {proxy} = getCurrentInstance()const options = {config: { "grid": 0, //网格线 // [!code --]"background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]"background": -1, //无背景 // [!code ++]initData: { // [!code --:8]controls: [{model: "102010",text: "初始化图形"},]}},//配置扩展插件extensions: [//布局的配置DDeiCoreStandLayout.configuration({//配置插件'top': [],'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],'bottom': [],'left': [],'right': []}),],
}
//初始化json数据 // [!code ++:4]
const jsontext = ref(`{"name":"新建文件_NEW","desc":"","extData":{},"state":2,"publish":"0","lastUpdateTime":1721809587831,"path":"/新建文件_NEW","sheets":[{"name":"页面-1","desc":"页面-1","stage":{"id":"stage_1","layers":[{"id":"layer_default","name":"图层","models":{"task_1":{"id":"task_1","modelCode":"102010","modelType":"DDeiPolygon","cpv":{"x":148.5,"y":105,"z":1},"hpv":[{"x":148.5,"y":105,"z":1},{"x":174.95833333333334,"y":105,"z":1}],"exPvs":{},"poly":2,"mirrorX":false,"mirrorY":false,"sptStyle":{},"text":"加载图形","bpv":{"x":177.60416666666669,"y":123.52083333333333,"z":1},"model":"102010"}},"midList":["task_1"],"modelType":"DDeiLayer","baseModelType":"DDeiLayer","index":-1,"background":null,"display":1,"lock":false,"print":true,"centerOpPoints":[],"modelCode":"DDeiLayer","modelChanged":true,"modelNumber":1}],"layerIndex":0,"idIdx":1,"modelType":"DDeiStage","ratio":1,"width":2245.0393700787404,"height":1587.4015748031497,"wpv":{"x":-778.5196850393702,"y":-496.20078740157487,"z":0},"links":[],"spv":{"x":561.2598425196851,"y":396.85039370078744,"z":1},"modelCode":"DDeiStage","drawing":true,"unit":"mm"},"active":1,"modelType":"DDeiSheet","unicode":"10be3e690ac86f84a0de69fa49247019"}],"currentSheetIndex":0,"modelType":"DDeiFile","modelNumber":1,"unicode":"7f7864f482a9623988489f9c1621f93f","ddeiVersion":1239}
`)const loadDataToEditor = () => { // [!code ++:9]//获取编辑器实例let editor:DDeiEditor = proxy.$refs["ddei_editor_1"].editor;//获取文件jsonlet fileJSON = JSON.parse(jsontext.value)//加载json到编辑器editor.loadData(fileJSON)
};</script><template><div style="width:400px;height:400px;margin:100px auto;"><textarea v-model="jsontext" style="border:1px solid grey;margin-left:5px;padding:5px;width:100%;height:100%"></textarea><button @click="loadDataToEditor" style="border:1px solid grey;margin-left:5px;margin-top:20px;padding:5px">加载数据</button></div><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" ref="ddei_editor_1"  id="ddei_editor_1"></DDeiEditorView></div>
</template>

效果截图

在这里插入图片描述

仓库信息

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

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

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

相关文章:

DDei在线设计器-加载数据

加载数据 本示例演示了怎样加载已有的JSON到设计器中。 如需了解详细的API教程以及参数说明&#xff0c;请参考DDei文档 外部数据JSON demo.vue <script setup lang"ts"> import DDeiEditorView from "ddei-editor"; import { DDeiCoreStandLayou…...

NetLLM: Adapting Large Language Models for Networking.

目录 NetLLM: Adapting Large Language Models for Networking.GlossaryNotesINTRODUCTIONThe Main Roadmap so farNew Opportunities and ChallengesDesign and Contributions BACKGROUNDLearning-Based Networking AlgorithmsLarge Language Models MOTIVATIONNETLLM DESIGNM…...

基于Yolov8面部七种表情检测与识别C++模型部署

表情识别 七种表情识别是一个多学科交叉的研究领域&#xff0c;它结合了心理学、认知科学、计算机视觉和机器学习等学科的知识和技术。 基本概念 表情的定义&#xff1a;表情是人们在情绪体验时面部肌肉活动的结果&#xff0c;是人类情感交流的基本方式之一。基本表情理论&a…...

未确认融资费用含义及会计处理流程

文章目录 一、含义二、会计处理流程2.1、初始计量2.2、后续计量2.3、报表列式 三、实务中的注意事项 一、含义 未确认融资费用: 由于企业现有资金不足&#xff0c;购买资产时选择分期支付款项&#xff0c;导致实际支付的款项大于资产的购入价值&#xff0c;两者的差额就是由于…...

Linux配置go程序为service后台开机自启动

1.编写需要启动的项目路径以及简单配置 sudo nano /etc/systemd/system/go.service#定义服务的元数据和依赖关系。 [Unit] #这是对服务的简短描述。 DescriptionMy Go Service #network.target 是一个虚拟目标&#xff0c;它表示网络服务已经初始化完成。该指令告诉 systemd 在…...

汇舟问卷:完成16份调查,挣了40美金,换算后美滋滋

这个世界有太多的人30​岁&#xff0c;35岁以后&#xff0c;当初没有去做自己想做的工作&#xff0c;没有花时间去坚持想做的工作&#xff0c;他们在选择这份想做的事业的前提被自己的父母朋友爱人阻断了。 他们告诉你&#xff0c;要努力的做好现在的工作&#xff0c;争取升职…...

Nacos 202407月RCE漏洞(0day)与复现

免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 一、背景与…...

Dynamo修改共享参数绑定的分组——群问题整理005

Hello大家好!我是九哥~ 今天继续给大家分享一些短平快的小教程,是来自群里面的问题。 问题005:Dynamo修改共享参数绑定的分组 今天看到群里询问如何修改参数所在的分组,查了下API,项目参数是不行的,不过共享参数是允许ReInsert()的,那么就好办了。 然后在Document下…...

聚焦汽车软件开发与测试:静态代码扫描、单元测试与集成测试等方面的实践应用

2024年7月18-19日&#xff0c;龙智携汽车软件开发及管理解决方案创新亮相2024 ATC汽车软件与安全技术周。龙智技术支持部负责人&Atlassian认证专家叶燕秀、龙智功能安全高级工程师景玉鑫在活动主会场联合发表了精彩演讲&#xff0c;分享推动汽车软件开发与功能安全的创新实…...

「队列」实现FIFO队列(先进先出队列|queue)的功能 / 手撕数据结构(C++)

概述 队列&#xff0c;是一种基本的数据结构&#xff0c;也是一种数据适配器。它在底层上以链表方法实现。 队列的显著特点是他的添加元素与删除元素操作&#xff1a;先加入的元素总是被先弹出。 一个队列应该应该是这样的&#xff1a; --------------QUEUE-------------——…...

C++ STL中 `set` 和 `multiset` 简单对比

在 C STL 中&#xff0c;set 和 multiset 都是用于存储唯一或重复元素的关联容器&#xff0c;但它们在处理元素的唯一性和特性方面有显著的区别。以下是这两个容器的详细比较&#xff1a; 1. 数据结构 set&#xff1a;基于红黑树&#xff08;自平衡的二叉搜索树&#xff09;实…...

代码随想录算法训练营Day20 | Leetcode 235 二叉搜索树的最近公共祖先 Leetcode 701 二叉搜索树中的插入操作

Leetcode 235 二叉搜索树的最近公共祖先 题目链接&#xff1a;235. 二叉搜索树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; 代码随想录题解&#xff1a;代码随想录 (programmercarl.com) 思路&#xff1a;相比普通二叉树更简单&#xff0c;因为二叉搜索树的节点…...

第九届世界3D渲染大赛:赛程安排、赛事规则

第九届世界3D渲染大赛即将拉开帷幕&#xff0c;汇聚全球顶尖CG艺术家&#xff0c;展现最具有视觉盛宴的CG创作。那么该赛事的行程如何安排呢&#xff0c;赛事规则又是什么呢&#xff1f;本篇整理了赛事安排、赛事规则等内容&#xff0c;希望帮助大家。 赛事主题&#xff1a;Kin…...

RocketMQ5.0 Consumer Group

消费者分组的概念 消费者分组&#xff08;Consumer Group&#xff09;是指一组消费同一类消息的消费者实例。每个消费者分组有一个唯一的名称&#xff0c;用于标识该分组。消费者分组的设计使得消息能够被多个消费者实例并行消费&#xff0c;同时确保每条消息只被一个消费者实例…...

vulnhub之serial

这次我们来做这个靶场 项目地址https://download.vulnhub.com/serial/serial.zip 使用vm新建虚拟机 以下为注意事项 第一步&#xff0c;收集资产 扫描靶场ip netdiscover -i eth0 -r 192.168.177.0/24 抓个包 扫描目录 看到了cookie中有一个user Tzo0OiJVc2VyIjoyOntzOj…...

卷积神经网络(CNN)简单原理与简单代码实现

卷积神经网络&#xff08;CNN&#xff09;简单原理与简单代码实现 卷积神经网络&#xff08;CNN&#xff09;简单原理基本原理卷积层&#xff08;Convolutional Layer&#xff09;&#xff1a;激活层&#xff08;Activation Layer&#xff09;&#xff1a;池化层&#xff08;Po…...

实时数仓分层架构详解

首先&#xff0c;我们从数据仓库说起。 数据仓库的概念可以追溯到20世纪80年代&#xff0c;当时IBM的研究人员提出了商业数据仓库的概念。数据仓库概念的提出&#xff0c;是为了解决和数据流相关的各种问题&#xff0c;特别是多重数据复制带来的高成本问题。 数据仓库之父Bill …...

计算机“八股文”在实际工作中是助力、阻力还是空谈?

“八股文”在实际工作中是助力、阻力还是空谈&#xff1f; 作为现在各类大中小企业面试程序员时的必问内容&#xff0c;“八股文”似乎是很重要的存在。但“八股文”是否能在实际工作中发挥它“敲门砖”应有的作用呢&#xff1f;有IT人士不禁发出疑问&#xff1a;程序员面试考…...

新160个crackme - 022-CM_2

运行分析 需破解Name和Serial&#xff0c;输入的小写字母都会变为大写字母 PE分析 C程序&#xff0c;32位&#xff0c;无壳 静态分析&动态调试 发现关键字符串 ida动态调试&#xff0c;发现Name和Serial长度需要大于5&#xff0c;且Serial前6位明文爆出&#xff0c;6287-A …...

在.c和.h 文件里定义数组的区别

在C语言开发中&#xff0c;掌握如何在.c文件和.h文件中合理定义数组&#xff0c;对于维护代码的模块化和避免不必要的编译错误至关重要。本文将探讨在这两种类型的文件中定义数组时需要注意的几个关键方面&#xff0c;包括定义性质、作用域、重复定义问题以及外部可见性等&…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

可下载旧版app屏蔽更新的app市场

软件介绍 手机用久了&#xff0c;app越来越臃肿&#xff0c;老手机卡顿成常态。这里给大家推荐个改善老手机使用体验的方法&#xff0c;还能帮我们卸载不需要的app。 手机现状 如今的app不断更新&#xff0c;看似在优化&#xff0c;实则内存占用越来越大&#xff0c;对手机性…...

Vite 双引擎架构 —— Esbuild 概念篇

Vite 底层采用 双引擎架构&#xff0c;核心构建引擎是 Esbuild 和 Rollup&#xff0c;二者在开发和生产环境中分工协作&#xff0c;共同实现高性能构建。不可否认&#xff0c;作为 Vite 的双引擎之一&#xff0c;Esbuild 在很多关键的构建阶段(如依赖预编译、TS 语法转译、代码…...

SQL进阶之旅 Day 14:数据透视与行列转换技巧

【SQL进阶之旅 Day 14】数据透视与行列转换技巧 开篇 欢迎来到“SQL进阶之旅”系列的第14天&#xff01;今天我们将探讨数据透视与行列转换技巧&#xff0c;这是数据分析和报表生成中的核心技能。无论你是数据库开发工程师、数据分析师还是后端开发人员&#xff0c;行转列或列…...

LabVIEW工业级多任务实时测控系统

采用LabVIEW构建了一套适用于工业自动化领域的多任务实时测控系统。系统采用分布式架构&#xff0c;集成高精度数据采集、实时控制、网络通信及远程监控等功能&#xff0c;通过硬件与软件的深度协同&#xff0c;实现对工业现场多类型信号的精准测控&#xff0c;展现 LabVIEW 在…...

大数据CSV导入MySQL

CSV Import MySQL 源码主要特性技术栈快速开始1. 环境要求2. 构建项目3. 使用方式交互式模式命令行模式编程方式使用 核心组件1. CsvService2. DatabaseService3. CsvImportService 数据类型映射性能优化1. 连接池优化2. 批量操作优化3. MySQL配置优化 配置说明application.yml…...