做网站一定要云解析吗,学广告设计需要什么学历,硬盘做免费嗳暧视频网站,网站开发会遇到的问题好玩的调度技术-场景编辑器 文章目录 好玩的调度技术-场景编辑器前言一、演示一、代码总结好玩系列 前言
这两天写前端写上瘾了#xff0c;顺手做了个好玩的东西#xff0c;好玩系列也好久没更新#xff0c;正好作为素材写一篇文章#xff0c;我真的觉得蛮好玩的#xff…好玩的调度技术-场景编辑器 文章目录 好玩的调度技术-场景编辑器前言一、演示一、代码总结好玩系列 前言
这两天写前端写上瘾了顺手做了个好玩的东西好玩系列也好久没更新正好作为素材写一篇文章我真的觉得蛮好玩的如果有创造力可以创造出所有的东西
一、演示
这玩意真的太简单了简单到我只用了半天多点的时间就做好了所以也不知道写点什么直接看演示把。 场景编辑器 一、代码
昨晚有个人找我说你说的很简单我根本想象不到是怎么做的我突然意识到一个问题我认为很简单的东西你们可能觉得很难所以我把代码贴出来你们直接参考把。
div classcardDragAndDrop styledisplay: none;div draggabletrue classItemDragAndDrop 蛇形线/divdiv draggabletrue classItemDragAndDrop 矩形/divdiv draggabletrue classItemDragAndDrop 圆形/divdiv draggabletrue classItemDragAndDrop 文本/divdiv draggabletrue classItemDragAndDrop 背景/divdiv draggabletrue classItemDragAndDrop 容器/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);}}总结
目前就先这样如果后面有时间了就在优化一下。
好玩系列
好玩的调度技术 好玩的调度技术-录制和回放 调度的多维空间技术 好玩的调度技术-生成式三维技术 好玩的调度技术-场景编辑器
