HTforWeb

【推荐阅读】微服务还能火多久？>>> 最近下载了 GoodReader App ，发现GoodReader中打开的页面不仅支持WebGL，同时还允许跨域访问资源，以前不少 HT for Web 手册的例子需要Web服务器发布的方式才能访问，否则需采用《 矢量组件设计之道（四） 》列举的几种解决跨域访问图片或3D的OBJ等资源的技巧。而现在GoodReader中直接打开就可以玩了，加上GoodReader自身对文档管理的方便性，这1块钱的价格真是物超所值！ 以下为GoodReader在iPhone下跨域访问 HT for Web 手册过程的 视频 ， 整体还是挺流畅，和直接采用iOS的Safari浏览器没什么区别： http://v.youku.com/v_show/id_XODM3ODE4NjQ0.html 来源： oschina 链接： https://my.oschina.net/u/1423144/blog/350305

JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。在 web 应用中，免不了需要从 web 服务器中获取资源，如果可以将所有的资源都合并到一个 .zip 文件中，这时候只需要做一次请求，这样既减少了服务器的压力，同时也可以加快 web 应用的呈现速度。 今天就来探讨下 JSZip 如何与 HT 拓扑 应用结合。先来看看这期 Demo 的效果图： 第一步、需要将应用对相关资源打包成 .zip 文件， 这是我要压缩的文件列表，把响应的资源文件存放到对应的文件夹下，然后在 loadorder 文件中标明资源加载的顺序，loadorder 文件内容如下： 'js/ht.js', 'js/ht-obj.js', 'js/ht-modeling.js', 'obj/equipment.mtl', 'obj/equipment.obj', 'image/equipment.jpg' 在资源加载顺序中，要标明响应资源的相对于 .zip 文件的路径，这样方便在读取 .zip 文件时快速找到相应的资源文件。 第二步、在 html 文件中引入 JSZip 和 JSZipUtils 库，接下来就是请求 .zip 文件，并对 .zip 文件做解析处理。 JSZipUtils.getBinaryContent('res/ImportObj.zip', function

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 上篇 我们基于 HT for Web 呈现了 A* Search Algorithm 的3D寻路效果，这篇我们将采用 HT for Web 3D 来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图： http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto在 GDC 大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了衍生出Java、ActionScript以及JS等版本，被广泛应用在游戏领域。说其丰富的确很丰富，说乱也够乱的，找个Box2D的JS版就有N多选择，而且不同版本API还有差异，可参考这里的对比 http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use 虽然版本较多有点乱，但各个版本的基本原理和API都类似，以下为我基于Box2DJS融合 HT for Web 写的例子代码。Box2D有很多参数功能点，这里例子我们仅呈现最基础简单的要素

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 上篇 我们基于 HT for Web 呈现了 A* Search Algorithm 的3D寻路效果，这篇我们将采用 HT for Web 3D 来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图： Box2D最早是Erin Catto在 GDC 大会上的一个展示例子，后来不断完善成C++的开源物理引擎库，这些年了衍生出Java、ActionScript以及JS等版本，被广泛应用在游戏领域。说其丰富的确很丰富，说乱也够乱的，找个Box2D的JS版就有N多选择，而且不同版本API还有差异，可参考这里的对比 http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use 虽然版本较多有点乱，但各个版本的基本原理和API都类似，以下为我基于Box2DJS融合 HT for Web 写的例子代码。Box2D有很多参数功能点，这里例子我们仅呈现最基础简单的要素，主要让大家理解Box2DJS引擎的基本使用，以及呈现上如何与 HT for Web 结合。 function init() { dm = new

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 构造实体几何 CSG 全称 Constructive solid geometry ，是3D计算机图形学中构建模型的常用技术，可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算，将立方体、圆柱体和棱柱等简单的基础模型，嵌套组合成更复杂三维模型。 CSG的算法这些年来已有各种语言平台版本实现，C++版主流的是 http://opencsg.org/ 已有众多基于该开源类库的应用案例，JavaScript语言较早版实现 http://evanw.github.io/csg.js/ 影响较广，很多其他js衍生版都是基于该版本进行改进完善，包括Java版的实现 https://github.com/miho/JCSG ，可参考基于JavaFX的3D打印IDE https://github.com/miho/JFXScad ，提起JavaFX视乎这些年完全消失在程序员视野毫无声息，但还是有一群拥护者持续在使用着如今地位有点尴尬的JavaFX。 回到我们今天要搞的3D书架例子，我们将基于 HT for Web 的3D引擎来实现， HT 已经内置了CSG功能的模型封装，我们通过构建CSGNode图元对象，该类型图元可对Host吸附的图元进行CSG技术的合集、并集和补集的三种操作

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> ECharts 图形组件在 1 . 0 发布的时候我就已经有所关注，今天在做项目的时候遇到了图标的需求，在 HT for Web 上也有图形组件的功能，但是在尝试了下具体实现后，发现 HT for Web 的图形组件是以矢量的格式来呈现的，在展现上可以有很多的自定义和数据绑定等特性，但是其在交互的设计上就显得比较弱势。 因此我就在想，是否可在项目中将 ECharts 图形组件代替 HT for Web 的图形组件呢，在对 ECharts 做了初步的了解后，发现两者都是基于 Div 和 canvas 的应用，于是我开始做大胆的尝试，终于，功夫不负苦心人，下面就来看下 Demo 的具体展现效果吧： 这是从 ECharts 官方 Demo 中拷贝下来的两个例子，其中在布局上用到了 HT for Web 的 SplitView 组件将两个 chart 以上下比例 3 ： 2 分割。 光看这个例子并无法很直观的看出 ECharts 和 HT for Web 应用的结合，接下来我们来看下 HT for Web 拓扑图组件 与 ECharts 图形组件的整合效果： 在这个 Demo 中就整合了 HT for Web 的 Tree 组件， GraphView 拓扑图组件和 ECharts 图形组件，并采用 HT for Web

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前一篇谈及到了 ECharts 整合 HT for Web 的 网络拓扑图 应用，后来在 ECharts 的 Demo 中看到了有关空气质量的相关报表应用，就想将百度地图、 ECharts 和 HT for Web 三者结合起来也做一个类似空气质量报告的报表 + 拓扑图应用，于是有了下面的 Demo ： 在这个 Demo 中，将 GraphView 拓扑图组件添加到百度地图组件中，覆盖在百度地图组件之上，并且在百度地图组件上和 GraphView 拓扑图组件上分别添加事件监听，相互同步经纬度和屏幕位置信息，从而来控制拓扑图上的组件位置固定在地图上，并在节点和节点之间的连线上加上了流动属性。右下角的图标框是采用 HT for Web 的 Panel 面板组件结合 ECharts 图表组件完成的。 接下来我们来看看具体的代码实现： 1. 百度地图是如何与 HT for Web 组件结合的； map = new BMap.Map("map"); var view = graphView.getView(); view.className = 'graphView'; var mapDiv = document.getElementById('map'); mapDiv.firstChild.firstChild

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在《 HT for Web整合OpenLayers实现GIS地图应用 》篇中介绍了 HT for Web 与OpenLayers的整合，不少朋友反应国内用得比较多的还是 百度地图 ，虽然 HT 整合百度地图原理与OpenLayers一致，但不同GIS引擎客户端结合代码细节还是有不少差异，自定义地图风格更是完全不一样，为此我再开篇介绍下 HT 与百度地图整合的方案，这次我们将改进以前的例子，除了代表城市的拓扑节点外，再增加连线连接省会和城市，实现网络拓扑链路的流动效果。 百度地图有多种客户端SDK，我们这里用的自然是 JavaScript版的API ，百度地图的2.0版增加了不少新功能，例如可以自定义地图样式模板，本例中我们特意设置成style:’midnight’的深色背景风格。插入map的位置与OpenLayers也不一样，通过mapDiv.firstChild.firstChild.appendChild(view);插入，zIndex这些属性都还好不需要设置。 坐标转换方面从经纬度转换成平面坐标是map.pointToPixel函数，通过node.setPosition(map.pointToPixel(new BMap.Point(lon, lat)));可设置ht.Node对应的平面逻辑坐标

HT for Web 的 HTML5树组件 有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间，让页面的加载更加流畅，增强用户体验。 http://www.hightopo.com/guide/readme.html 进入正题，今天用来做演示的Demo是，客户端请求服务器读取系统文件目录结构，通过 HT for Web 的 HTML5树组件 显示系统文件目录结构。 首先，我们先来设计下服务器，这次Demo的服务器采用 Node.js ，用到了Node.js的 express 、 socket.io 、fs和http这四个模块， Node.js 的相关知识，我在这里就不阐述了，网上的教材一堆，这里推荐下 socket.io 的相关入门 http://socket.io/get-started/chat/ 。 服务端代码代码： var fs = require('fs'), express = require('express'), app = express(), server = require('http').createServer(app), io = require('socket.io')(server), root = ‘/Users/admin

HT for Web 的 HTML5树组件 有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间，让页面的加载更加流畅，增强用户体验。 进入正题，今天用来做演示的Demo是，客户端请求服务器读取系统文件目录结构，通过 HT for Web 的 HTML5树组件 显示系统文件目录结构。 首先，我们先来设计下服务器，这次Demo的服务器采用 Node.js ，用到了Node.js的 express 、 socket.io 、fs和http这四个模块， Node.js 的相关知识，我在这里就不阐述了，网上的教材一堆，这里推荐下 socket.io 的相关入门 http://socket.io/get-started/chat/ 。 服务端代码代码： var fs = require('fs'), express = require('express'), app = express(), server = require('http').createServer(app), io = require('socket.io')(server), root = ‘/Users/admin/Projects/ht-for-web/guide‘; io.on(