好玩的调度技术-场景编辑器

好玩的调度技术-场景编辑器

文章目录

  • 好玩的调度技术-场景编辑器
  • 前言
  • 一、演示
  • 一、代码
  • 总结
    • 好玩系列


前言

这两天写前端写上瘾了,顺手做了个好玩的东西,好玩系列也好久没更新,正好作为素材写一篇文章,我真的觉得蛮好玩的,如果有创造力可以创造出所有的东西
在这里插入图片描述

一、演示

这玩意真的太简单了,简单到我只用了半天多点的时间就做好了,所以也不知道写点什么,直接看演示把。

场景编辑器

一、代码

昨晚有个人找我说,你说的很简单,我根本想象不到是怎么做的,我突然意识到一个问题,我认为很简单的东西你们可能觉得很难,所以我把代码贴出来你们直接参考把。

<div class="cardDragAndDrop " style="display: none;"><div draggable="true" class="ItemDragAndDrop ">蛇形线</div><div  draggable="true" class="ItemDragAndDrop ">矩形</div><div  draggable="true" class="ItemDragAndDrop ">圆形</div><div  draggable="true" class="ItemDragAndDrop ">文本</div><div  draggable="true" class="ItemDragAndDrop ">背景</div><div  draggable="true" class="ItemDragAndDrop ">容器</div></div>
   .cardDragAndDrop {max-width: fit-content;border-radius: 15px;display: flex;flex-direction: column;align-content: center;justify-content: center;gap: 1rem;backdrop-filter: blur(15px);box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.192),inset 0 0 5px rgba(255, 255, 255, 0.274), 0 5px 5px rgba(0, 0, 0, 0.164);transition: 0.5s;position: absolute;top: 40px;left: 10px;z-index: 999;
}
.ItemDragAndDrop{margin: 10px;padding: 10px 5px;color: #ffffff;text-align: center;
}
function loadModel() {let event = allStage.localView.getMouseXY();if (DragAndDropInnerText == '蛇形线') {const link = new Link(null, { x: event.x, y: event.y }, { x: event.x + 5000, y: event.y });allScene.addChild(link);toTube(link, TUBE_Diameter, '#E0FFFF');}if (DragAndDropInnerText == '矩形') {const toNode = new Node('To', event.x, event.y, 1800, 1800);toNode.userData = { isEdit: true };toNode.css({fillStyle: '#167cff'});allScene.addChild(toNode);}if (DragAndDropInnerText == '圆形') {const node = new CircleNode(null, event.x, event.y);node.setRadius(1400);node.css({'strokeStyle': '#E1E1E1','fillStyle': '#167cff'});node.userData = { isEdit: true };allScene.addChild(node);}if (DragAndDropInnerText == '文本') {let textNode = new TextNode('添加你自己的文字', event.x, event.y);textNode.css({font: 'italic 500px sans-serif',padding: 10,color: '#16fffc',});textNode.zIndex = 10;textNode.userData = { isEdit: true };allScene.addChild(textNode);}if (DragAndDropInnerText == '背景') {let imgNode = new Node(null, event.x, event.y, 26000, 6400);// png、jpg、jpeg 、bmp、svg、gif、base64字符串 或者一个cavnasimgNode.setImage('../Map/images/chanxian.png');imgNode.userData = { isEdit: true };imgNode.zIndex = -100;allScene.addChild(imgNode);}if (DragAndDropInnerText == '容器') {allStage.styleSystem.defClass('.group', {borderColor: '#F0F0F0',borderRadius: 50,borderWidth: 10,padding: 80,backgroundColor: 'rgba(128,128,128,0.2)',lineWidth: 10,strokeStyle: 'gray',fontSize: '12px',});allStage.styleSystem.defClass('.focus', {borderWidth: 3,borderColor: 'yellow'});const group1 = new Node('Group1', event.x, event.y, 2000, 3000);group1.dropAllowed = true; //since 2.4.0group1.userData = { isEdit: true };group1.addClass('.group');allScene.addChild(group1);}}

总结

目前就先这样如果后面有时间了就在优化一下。

好玩系列

好玩的调度技术
好玩的调度技术-录制和回放
调度的多维空间技术
好玩的调度技术-生成式三维技术
好玩的调度技术-场景编辑器

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

编程中的智慧之设计模式一

设计模式&#xff1a;编程中的智慧之道 设计模式是软件开发中的一种解决方案&#xff0c;提供了在特定上下文中解决常见问题的模板。这些模式帮助我们构建更加灵活、可维护和可扩展的系统。本文将探讨设计模式的不同类型及其在Java中的应用。 设计模式的层次 设计模式可以类…

【C#】Array和List

C#中的List<T>和数组&#xff08;T[]&#xff09;在某些方面是相似的&#xff0c;因为它们都是用来存储一系列元素的集合。然而&#xff0c;它们在功能和使用上有一些重要的区别&#xff1a; 数组&#xff08;Array&#xff09; 固定大小&#xff1a;数组的大小在声明时…

LinuxShell编程1———shell基础命令

文章目录 前言 一、shell基础知识 1、shell概念 2、Shell的功能 接收&#xff1a;用户命令 调用&#xff1a;相应的应用程序 解释并交给&#xff1a;内核去处理 返还&#xff1a;内核处理结果 3、Shell种类&#xff08;了解&#xff09; 3.1、MS-DOS 3.2、Windows的…

数据的守护者:深入解析 Elasticsearch 的副本机制

标题&#xff1a;数据的守护者&#xff1a;深入解析 Elasticsearch 的副本机制 在分布式搜索引擎 Elasticsearch 中&#xff0c;副本是确保数据高可用性和查询性能的关键特性。通过副本机制&#xff0c;Elasticsearch 能够在集群中复制数据&#xff0c;从而提高数据的可靠性和…

高并发服务器-使用多进程(Multi-Process)实现【C语言】

在上期的socket套接字的使用详解中&#xff08;socket套接字的使用详解&#xff09;最后实现的TCP服务器只能处理一个客户端的请求发送&#xff0c;当有其他客户端请求连接时会被阻塞。为了能同时处理多个客户端的连接请求&#xff0c;本期使用多进程的方式来解决。 解决方案步…

SDF学习笔记整理

1 SDF的用处 SDF文件是标准延时文件&#xff0c;该文件由于其扩展名为.sdf即filename.sdf故被常叫做SDF文件。该文件是综合吐出的文件&#xff0c;也可以来自于静态时序分析&#xff08;STA&#xff09;&#xff0c;前者称为pre_sdf文件&#xff0c;后者称为post_sdf。 两者主…

R语言进行K折交叉验证问题

在使用R语言进行模型参数评估优化时候&#xff0c;会使用K折交叉验证&#xff0c;其中会遇到各种各样问题&#xff1a; 错误: C5.0 models require a factor outcome > (1-mean(E0));(1-mean(E1)) [1] 1 [1] 1 报错说明C5.0模型需要因子变量输出&#xff0c;源代码如下&am…

无人机技术优势及发展详解

一、技术优势 无人机&#xff08;Unmanned Aerial Vehicle&#xff0c;UAV&#xff09;作为一种新兴的空中智能平台&#xff0c;凭借其独特的技术优势&#xff0c;已经在众多领域中展现出强大的应用潜力和实用价值。以下是无人机的主要技术优势&#xff1a; 1. 自主导航与远程…

Java 程序员面试笔记 - 数据库

12.1 SQL DML&#xff1a;插入数据、修改数据和删除数据。 DDL&#xff1a;数据定义语句&#xff0c;可以对数据库用户、基本表、视图等进行定义和撤销。 DCL&#xff1a;用于对数据库进行统一的控制管理。 12.2 内连接与外连接 内链接&#xff1a;两个表匹配的数据才出现…

【Harmony】SCU暑期实训鸿蒙开发学习日记Day2

目录 Git 参考文章 常用操作 ArkTS的网络编程 Http编程 发送请求 GET POST 处理响应 JSON数据解析 处理响应头 错误处理 Web组件 用生命周期钩子实现登录验证功能 思路 代码示例 解读 纯记录学习日记&#xff0c;杂乱&#xff0c;误点的师傅可以掉了&#x1…

How to integrate GPT-4 model hosted on Azure with the gptstudio package

题意&#xff1a;怎样将托管在Azure上的GPT-4模型与gptstudio包集成&#xff1f; 问题背景&#xff1a; I am looking to integrate the OpenAI GPT-4 model into my application. Here are the details I have: Endpoint: https://xxxxxxxxxxxxxxx.openai.azure.com/Locatio…

【前端】SpringBootWeb 篇-入门了解 Spring Cache、Spring Task与WebSocket 框架

在SpringBootWeb开发中&#xff0c;Spring Cache、Spring Task与WebSocket框架是三个非常重要的组件&#xff0c;它们分别用于缓存管理、任务调度和实时通信。以下是对这三个框架的入门了解&#xff1a; 一、Spring Cache 1. 简介 Spring Cache是Spring框架提供的缓存抽象&a…

LG 选择 Flutter 来增强其智能电视操作系统 webOS

可以这个话题会让大多数人困惑&#xff0c;2024 年了为什么还会冒出 webOS 这种老古董&#xff1f;然后 LG 为什么选择 webOS &#xff1f;现在为什么又选择 Flutter &#xff1f; 其实早在 Google I/O 发布 Flutter 3.22 版本的时候&#xff0c;就提到了 LG 选择 Flutter 来增…

tinymce富文本支持word内容同时粘贴文字图片上传 vue2

效果图 先放文件 文件自取tinymce: tinymce富文本简单配置及word内容粘贴图片上传 封装tinymce 文件自取&#xff1a;tinymce: tinymce富文本简单配置及word内容粘贴图片上传 页面引用组件 <TinymceSimplify refTinymceSimplify v-model"knowledgeBlockItem.content…

Socket、WebSocket 和 MQTT 的区别

Socket 协议 定义&#xff1a;操作系统提供的网络通信接口&#xff0c;抽象了TCP/IP协议&#xff0c;支持TCP和UDP。特点&#xff1a; 通用性&#xff1a;不限于Web应用&#xff0c;适用于各种网络通信。协议级别&#xff1a;直接使用TCP/UDP&#xff0c;需要手动管理连接和数…

vue3 项目的创建、组合式API、rective和ref、watch函数

vue3项目的创建&#xff1a; npm init vuelatest 在执行上述代码以后&#xff0c;按需勾选项目所需的东西就可以 然后再命令行依次执行&#xff1a; // 进入项目 cd vuedemo //安装下来对应的包 npm install //启动项目 npm run dev文件解读&#xff1a; package.json &am…

【leetcode】 字符串相乘(大数相乘、相加)

记录一下大数相乘相加方法&#xff1a; 给定两个以字符串形式表示的非负整数 num1 和 num2&#xff0c;返回 num1 和 num2 的乘积&#xff0c;它们的乘积也表示为字符串形式。 注意&#xff1a;不能使用任何内置的 BigInteger 库或直接将输入转换为整数。 示例 1: 输入: nu…

vue3前端开发-执行npm run dev提示报错怎么解决

vue3前端开发-执行npm run dev提示报错怎么解决&#xff01;今天在本地安装初始化了一个vue3的案例demo。但是当我执行npm run dev想启动它时报错了说&#xff0c;找不到dev。让我检查package.json文件是否包含dev。如下图所示&#xff1a; 实际上&#xff0c;不必惊慌&#xf…

iOS ------ tagged Pointer 内存对齐

一&#xff0c;tagged Pointer 为了节省内存和提高执行效率&#xff0c;苹果在64bit程序中引入了Tagged Pointer计数&#xff0c;用于优化NSNumber, NSDate, NSString等小对象的存储。一个指针或地址区域&#xff0c;除了放对象地址之外&#xff0c;也可以放其他额外的信息&am…

240717.LeetCode——2974.最小数字游戏

题目描述 你有一个下标从 0 开始、长度为 偶数 的整数数组 nums &#xff0c;同时还有一个空数组 arr 。Alice 和 Bob 决定玩一个游戏&#xff0c;游戏中每一轮 Alice 和 Bob 都会各自执行一次操作。游戏规则如下&#xff1a; 每一轮&#xff0c;Alice 先从 nums 中移除一个 …