摘要:你可能会好奇在代码中我们并没有提到这个标识,这个标识是在水泵的中设置的,关于扇叶的一个标识,我们获取到扇叶,然后设置其旋转。
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开。我用HT实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的。
demo地址: http://www.hightopo.com/demo/...
先来看看效果图:
var box = new ht.CSGBox(); dataModel.add(box);
用HT可以很轻易地实现这个盒子,在HT中封装了很多基础图元类型,我们经常用到的ht.Node也是其中一个,这样我们可以不用反复地写相同的代码来完成基础的实现。
这个例子中用的封装好的基础图元是ht.CSGBox,一个盒子模型,可以参考HT for Web 建模手册,我们在手册中可以看到,在CSGBox中我们只能操作这个盒子的各个面,如果你想要自己设置一些特殊的功能,只需要操作ht.Style(HT for Web 风格手册)即可。
要想实现在盒子上的一个面上添加贴图,我能想到的只有HT封装的ht.Default.setImage函数了。
我想你们都注意到了盒子上有模型化的水泵,上面有扇叶在旋转,那么这个水泵是怎么生成的呢?我用我们的2d编辑器写了一个水泵模型通过graphView.serialization(datamodel)将模型序列化成json格式的文件,然后在这边引用的时候我再调用graphView.deserialize(json)来将json文件导出成可视化的2d模型并设置animation动画,再立即刷新到这个水泵,否则就算设置了动画,水泵上的扇叶旋转也不会生效。
ht.Default.xhrLoad("displays/demo/pump.json", function(text){ const json = ht.Default.parse(text); pumpDM.deserialize(json); var currentRotation = 0; var lastTime = new Date().getTime(); setInterval(function(){ var time = new Date().getTime(); var deltaTime = time - lastTime; currentRotation += deltaTime * Math.PI / 180 * 0.3; lastTime = time; pumpDM.getDataByTag("fan1").setRotation(currentRotation); pumpDM.getDataByTag("fan2").setRotation(currentRotation); box.iv(); // g3d.iv();这边也可以刷新g3d,但是局部刷新更省 pumpGV.validateImpl(); }, 10); }, 10);
这个时候我不能把水泵的graphView和g3d都加到底层div上,并且我的意图是把水泵的graphView加到g3d中的CSGBox中的一面上,所以为了让水泵显示出来 必须设置水泵所在的graphView的宽高,而这个宽高必须比我json画出来的图占的面积要大,不然显示不完整。如果想看这个宽高对显示的影响,可以自己改改看来玩玩。
pumpGV.getWidth = function() { return 600;} pumpGV.getHeight = function(){ return 600;} pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示
这边还要特别说明一个函数getDataByTag(tagName)这个函数是获取标识号,在HT中tag属性是唯一标识,虽然HT中也有id,但是id是HT中Data类型对象构造时内部自动被赋予的一个id属性,可以通过data.getId()和data.setId(id)获取和设置,Data对象添加到DataModel之后不允许修改id值,可以通过dataModel.getDataById(id)快速查找Data对象。
一般我们建议id属性由HT自动分配,用户业务意义的唯一标示可存在于tag属性上,通过data.setTag(tag)函数允许任意动态改变tag值,通过dataModel.getDataByTag(tag)可查找到对应的Data对象,并支持通过dataModel.removeDataByTag(tag)删除Data对象。
你可能会好奇在代码中我们并没有提到“fan1”这个tag标识,这个标识是在水泵的json中设置的,关于扇叶的一个标识,我们获取到扇叶,然后设置其旋转。
echarts图表的显示也是很基础的,但是我们会发现,在将echarts图表添加进graphView中它的动画效果会不显示,所以我们首先要将这个echarts图表所在的图表的dynamic设置为true,即将其设置为动态:
function charts(option){ var info = { canvas: document.createElement("canvas") }; info.canvas.dynamic = true;//设置info.canvas为动态 info.chart = echarts.init(info.canvas); info.chart.setOption(option); return info.canvas; }
最后,只需要将这两个回传的canvas传入ht.Default.setImage中即可:
ht.Default.setImage("echart", charts(option)); ht.Default.setImage("pump", pumpGV.getCanvas());
ht.Default.drawImage函数生成新的图实际上就是在canvas上画图,所以我们只要把我们已经画好的canvas传到ht.Default.setImage就可以生成图片了。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/60211.html
摘要:你可能会好奇在代码中我们并没有提到这个标识,这个标识是在水泵的中设置的,关于扇叶的一个标识,我们获取到扇叶,然后设置其旋转。 突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开。我用HT实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的。 demo地址: http://...
摘要:开头,则返回值,其中代表的属性名。如果不匹配以上情况,则直接将类型作为对象的函数名调用,返回值作为参数值。 之前在拓扑上的应用都是些静态的图元,今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 先看看最后我们实现的效果:http://www.hightopo.com/demo/... showImg(https://segmentfault.com/img/bVEmt0?w=1023...
摘要:前言工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。 前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯、IT企业的布局;一方面是传统工业软件和工业网络企业自发地延伸,由产品提供商发展为方案供应商。什...
摘要:在上一篇基于矢量实现叶轮旋转中讲述了叶轮旋转在拓扑上的应用,今天我们就来讲讲叶轮旋转在上的应用。运行代码,你会发现螺旋桨在秒后进入旋转状态,并且旋转速度由慢变快,再变慢直至停止,然后再过秒后继续旋转,如此周而复始。 在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元,在...
摘要:随着新一轮工业革命兴起,应对气候变化日益成为全球共识,能源技术正在成为引领能源产业变革实现创新驱动发展的源动力。 随着新一轮工业革命兴起,应对气候变化日益成为全球共识,能源技术正在成为引领能源产业变革、实现创新驱动发展的源动力。从全球到中国,以风能、光伏发电为代表的新能源产业发展迅速,可再生能源发电与现代电网的融合成为了世界能源可持续转型的核心,发电技术继续沿着大规模、高效率和低成本方...
阅读 1635·2021-11-22 15:24
阅读 1141·2021-11-12 10:36
阅读 2983·2021-09-28 09:36
阅读 1660·2021-09-02 15:15
阅读 2448·2019-08-30 15:54
阅读 2301·2019-08-30 11:02
阅读 2266·2019-08-29 13:52
阅读 3404·2019-08-26 11:53