突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开。我用HT实现了我的想法,代码一百多行,这么少的代码能实现这种效果我觉得还是牛的。
demo地址: http://www.hightopo.com/demo/Wall3D/index.html
先来看看效果图:
这个例子最基础的就是最外层的盒子了,所以我们先来看看如何实现它:
var box = new ht.CSGBox(); dataModel.add(box);
用HT可以很轻易地实现这个盒子,在HT中封装了很多基础图元类型,我们经常用到的ht.Node也是其中一个,这样我们可以不用反复地写相同的代码来完成基础的实现。
这个例子中用的封装好的基础图元是ht.CSGBox,一个盒子模型,可以参考HT for Web 建模手册,我们在手册中可以看到,在CSGBox中我们只能操作这个盒子的各个面,如果你想要自己设置一些特殊的功能,只需要操作ht.Style(HT for Web 风格手册)即可。
我想你们都注意到了盒子上有模型化的水泵,上面有扇叶在旋转,那么这个水泵是怎么生成的呢?我用我们的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就可以生成图片了。
相关推荐
Unity能够在WebGL包使用的json解析.dll
主要介绍了基于HTML5的WebGL实现json和echarts图表展现在同一个界面的相关资料,需要的朋友可以参考下
适用于Unity WebGL的JsonNet,普通的JsonNet是不能运行在webgl上的
HTML5 WebGL实现酷炫的星云旋转背景动画特效源码.zip
这是一款基于WebGL实现3D图片特效。该特效利用WebGL和一张特定的黑白图片,制作出在鼠标移动时的3D图片特效。
基于HTML5 WebGL 3D樱花飘落动画 1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。 2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、...
HTML5 WebGL实现霓虹着色效果的超逼真星球旋转特效源码.zip
这是一款基于HTML5 WebGL的图像扭曲变形动画特效。该特效中,通过Three.js来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有6种炫酷的动画效果。
基于HTML5 WebGL超逼真雨点水滴打落屏幕特效源码.zip
在Web端基于原生WebGL实现的三维地球,没有使用第三方框架,无需插件,所有支持WebGL的浏览器均可使用
JavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zipJavaScript基于WebGL技术实现的三维BS端开发平台(含Cesium 的核心操作库+UI组件库).zipJavaScript基于WebGL技术实现的三维BS端...
HTML5+WebGL实现可拖拽的3D透明杯子效果源码.zip
HTML5+Three.JS WebGL实现的三角形立体乐高模型旋转动画效果源码.zip
使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。
HTML5 WebGL实现的水面波光闪动动画特效源码.zip
HTML5 WebGL实现的七彩粒子流动画特效源码.zip
基于 WebGL 实现的 3D 曲面图表组件