基于 HTML5 Canvas 2D 拓扑图和 3D 机柜模型的增删操作

2024-08-30 11:08

本文主要是介绍基于 HTML5 Canvas 2D 拓扑图和 3D 机柜模型的增删操作,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

今天好好地消化了一下我们的数据容器 DataModel,这里给初学者做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单,实际上结合了数据模型中非常重要的三个事件处理的部分:属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。

为了让这个例子具现化,我将这个简单的例子做了一点改动,下面我会一一解释。

例子地址:http://hightopo.com/guide/guide/core/datamodel/examples/example_datamodel.html
图片描述

这是我改造之后的模样,将 dataModel 数据容器共享,通过对数据容器的增删事件的监听得到的现在的结果,并且在显示上做了一点“手脚”。下面我们从头解析这例子,你们会知道为什么我特地将这个简单的例子提出来。

首先,我们得创建场景将作为基础,整个场景我算是分为三个部分,顶部工具栏,2D 部分以及 3D 部分。顶部工具栏部分使用的纯 HTML 写的:

<button onclick="addData()">Add</button>
<button onclick="removeData()">Remove</button>
<button onclick="clearDataModel()">Clear</button>
<span id="property" class="output"></span>
<span id="model" class="output"></span>
<span id="selection" class="output"></span>

因为有点击事件,所以我们直接在 button 按钮上进行,后面的 span 标签显示纯文本内容。

我们知道,HT 的所有组件都是基于一个根部 div 的,要将这个 div 部署到 html 页面上很简单,但是 HT 内部对这个 div 设置了绝对定位,所以我们在添加这个 div 进 HTML 页面中时,也要设置绝对定位中的位置,我在页面中添加了一个 div,将 HT 的部分都添加进这个 div 中:

<div id="myDiv" style="border: 1px solid red; width: 800px; height: 600px;position: absolute; "></div>
dataModel = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dataModel);
g3d.setGridVisible(true); // 设置网格可见
g3d.setEye(185, 50, 470); // 设置 3d 的眼睛位置
g3d.setCenter(200, 47, 10); // 设置 3d 的中心位置, 这两个属性都是为了让用户看 3d 上的场景更舒服,更直接
g2d = new ht.graph.GraphView(dataModel);
g2d.setEditable(true); // 设置 2d 图元可编辑
g2d.fitContent(true); // 将所有的图元显示到页面上
splitView = new ht.widget.SplitView(g2d, g3d, 'v', 0.3); // 分割组件,装了2d 和 3d 两个场景
splitView.addToDOM(); // 将分割组件添加进 body 中,并设置绝对定位的位置
myDiv = document.getElementById('myDiv');
myDiv.appendChild(splitView.getView()); // 将分割组件添加进 myDiv 中

接着添加节点进入 dataModel 数据模型之中,我们这里做的是机房的机柜,本来想做的是服务器,手头上暂时只有这个资源,也不赖。我封装了一个增加函数,一个删除函数,还有一个清楚函数,分别对应的是工具栏上的“Add”、“Remove”以及“Clear”三个功能:

function addData() {var data = new ht.Node();data.setPosition(index*60, 50);data.setName('node'+index);data.setSize(40, 40);data.setImage('cabinet');data.s({'image.stretch': 'centerUniform','shape3d': 'cabinet'});index++;dataModel.add(data);return data;
}
function removeData() {if(!dataModel.sm().ld()) return;dataModel.remove(dataModel.sm().ld());
}
function clearDataModel(){dataModel.clear();index = 0;
}

其中,代码中出现的“data.setImage(‘cabinet’)”,是我通过 ht.Default.setImage(‘cabinet’, ‘imageURL’) 方式定义的,调用的时候直接 data.setImage(‘imageName’) 即可,具体参考 HT for Web 入门手册 image 章节。

2D 的图片显示肯定和 3D 的模型显示是不一样的,2D 中我们直接用贴图就能解决,而 HT 3D 中支持 obj 格式的模型显示,就是这个部分:

图片描述

HT 封装了解析 obj 格式的函数 ht.Default.loadObj 函数用来导入模型,该函数有三个参数,第一第二分别为 obj 文件的路径和 mtl 文件的路径,第三个参数为 json 格式控制参数,具体参数请参考 HT for Web OBJ 手册 loadObj 函数章节(ps:用 obj 模型会导致跨域问题,要放到服务器上运行):

ht.Default.loadObj('obj/机柜组件1.obj', 'obj/机柜组件1.mtl', {cube: true, // 是否将模型缩放到单位1的尺寸范围内,默认为 falsecenter: true, // 模型是否居中prefix: 'obj/', // 路径前缀,如果前面参数写了路径前缀,这个不写也可以shape3d: 'cabinet', // 指定 shape3d 名称finishFunc: function(modelMap, array, rawS3){ // 调用 ht.Default.parseObj 解析后的返回值,若加载或解析失败则返回值为空window.rawS3 = rawS3; // 让当前模型的尺寸为原始尺寸if(modelMap){cabinet1 = addData(); // 添加两个节点到 dataModel 中cabinet2 = addData();}} 
});

现在,节点和模型都已经导入到场景中了,终于来到了我们今天的重点,事件交互部分。ht.DataModel 数据容器管理着 Data 数据的增删以及变化事件的派发,这里我们就这两种事件进行对 Data 数据的管理。

  1. addDataModelChangeListener(function(e) {}, scope)
    增加数据模型增删变化事件监听器,可用简写 mm(func, scope), func 为监听器函数,scope
    为监听器函数域(可选),在监听器函数中的 event 有两个属性: kind 和 data,其中 kind 为事件的类型:

    e.kind === 'add’代表添加Data对象,e.data 为被添加的对象
    e.kind ==='remove’代表删除Data对象,e.data 为被删除的对象
    e.kind === 'clear’代表容器被清除

这里我们将对模型的增删事件的监听结果传给 HTML 中的 id 为 model 的 span 作为内容:

var model = document.getElementById('model');
dataModel.addDataModelChangeListener(function(e) {if(e.kind === 'add') // 如果事件类型为 add 增加节点model.innerHTML = e.data + ' added'; // 就将model 的内容替换为添加的节点 addedif(e.kind === 'remove')model.innerHTML = e.data + ' removed';if(e.kind === 'clear')model.innerHTML = 'dataModel cleared'
});
  1. addDataPropertyChangeListener(function(e) {}, scope) 增加模型中 Data
    数据属性变化事件监听器,可用简写 md(func, scope),其中 event 事件有四种属性:

    e.data 代表属性变化的对象
    e.property 代表变化属性的名字
    e.newValue 代表属性的新值
    e.oldValue 代表属性的老值
    Data 对象在设置属性值函数内调用 firePropertyChange(property, oldValue, newValue) 触发属性变化事件:
    get/set 类型属性,如 setAge(98) 触发事件的 e.property为age
    style 类型属性名前加 s: 前缀以区分,如 setStyle(‘age’, 98) 触发事件的 e.property为s:age
    attr 类型属性名前加 a: 前缀以区分,如 setAttr(‘age’, 98) 触发事件的 e.property为a:age

这里我们将对模型中 Data 的属性变化事件的监听结果传给 HTML 中的 id 为 property 的 span 作为内容:

var model = document.getElementById('model');
dataModel.addDataPropertyChangeListener(function(e) {property.innerHTML = e.data + '\'s ' + e.property + ' has changed, the old value is ' + e.oldValue + ' and the new value is ' + e.newValue; 
});
  1. 最后,我们对选中的节点进行增加监听器,监听选中变化事件。ht.SelectionModel管理 DataModel 模型中 Data
    对象的选择状态, 每个 DataModel 对象都内置一个 SelectionModel 选择模型,控制这个
    SelectionModel 即可控制所有绑定该 DataModel 的组件的对象选择状态, 这意味着共享同一 DataModel
    的组件默认就具有选中联动功能。

如果希望某些组件不与其他组件选中联动,可通过调用 view.setSelectionModelShared(false), 这样该 view 将创建一个专属的 SelectionModel 实例。

综上所述有两种途径可得到 SelectionModel:

dataModel.getSelectionModel() 获取数据容器中组件共享的选中模型。
view.getSelectionModel() 获取当前组件使用的选中模型,selectionModelShared 为false时,返回 view 专用的选择模型。
addSelectionChangeListener(function(e) {}, scope) 增加监听器,监听选中变化事件,简写为 ms(func, scope):

e.datas 包含所有选中状态变化的对象,之前选中现在取消选中,或之前没选中现在被选中的对象
e.kind === ‘set’ 代表此事件由 setSelection(datas) 引发
e.kind === ‘remove’ 代表此事件由 removeSelection(datas) 引发
e.kind === ‘append’ 代表此事件由 appendSelection(datas) 引发
e.kind === ‘clear’ 代表此事件由 clearSelection(datas) 引发
这里我们将对模型中 Data 的选中变化事件的监听结果传给 HTML 中的 id 为 selection 的 span 作为内容:

var selection = document.getElementById('selection');
dataModel.sm().addSelectionChangeListener(function(e){if(dataModel.sm().size() === 0) selection.innerHTML = 'Nothing selected'; // 如果选中模型的“长度”为 0,即没有选中内容else if(dataModel.sm().size() === 1) selection.innerHTML = e.datas + ' selected';else selection.innerHTML = dataModel.sm().size() + ' datas selected';
});

以上,所有的代码全部分析完毕!大家可以天马行空,创建出属于你自己的 3 维模型!

这篇关于基于 HTML5 Canvas 2D 拓扑图和 3D 机柜模型的增删操作的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1120643

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 ·解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切分为不同地图,在某一侧只使用该侧地图进行定位 方案思路 切分原理:切分地图基于关键帧位置,而非点云。 理论基础:光照是直线的,一帧点云必定只能照射到墙的一侧,无法同时照到两侧实践考虑:关

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

图神经网络模型介绍(1)

我们将图神经网络分为基于谱域的模型和基于空域的模型,并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络:谱图卷积网络、切比雪夫网络和图卷积网络。 (1)谱图卷积网络 卷积定理:函数卷积的傅里叶变换是函数傅里叶变换的乘积,即F{f*g}