当前位置: 首页 > 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;包括定义性质、作用域、重复定义问题以及外部可见性等&…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...