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

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

文章目录


前言

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

一、演示

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

场景编辑器

一、代码

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

html 复制代码
<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>
css 复制代码
   .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;
}
javascript 复制代码
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字符串 或者一个cavnas
    imgNode.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.0
    group1.userData = { isEdit: true };
    group1.addClass('.group');
    allScene.addChild(group1);

  }

}

总结

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

好玩系列

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

相关推荐
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā7 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
向宇it7 小时前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎