HT for Web的HTML5树组件有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间...进入正题，今天用来做演示的Demo是，客户端请求服务器读取系统文件目录结构，通过HT for Web的HTML5树组件显示系统文件目录结构。...for Web的核心包，这个包不引入的话，下面的HT for Web组件就无法使用； 接下来就是代码了，首先创建一个数据容器...整体的思路是这样子的，当然这离我们要实现的树组件的延迟加载技术还有些差距，那么，HT for Web的HTML5树组件的延迟加载技术是怎么实现的呢？不要着急，马上开始探讨。...for Web的HTML5树组件延迟加载技术就设计完成了，我在服务器的控制台打印出请求路径，看看这个延迟加载是不是真的，如下图： ?
今天我们就来实现一把自定义HTML5表格组件的Renderer和Editor，为了更直观地演示编辑效果，我们正好利用HT for Web强大的HTML5拓扑图组件 首先来瞧瞧效果： ?...按照HT for Web组件的设计惯例，我们需要创建一个Div作为view，在view中包含一个canvas元素，组件内容在canvas上绘制； 2. editor需要与用户有交互，因此，需要在view...用户通过拖拉组件可以改变角度，这个改变是连续的，而且在拖拉的时候有可能鼠标会离开组件区域，要实现离开组件区域也能够正确的改变值，那么这时候就需要调用HT for Web的startDragging()方法...()方法的实现，因为这块有些复杂，我们单独抽出来讲解； ht.Default.def('ht.widget.RotationEditor', ht.widget.BaseItemEditor, {...这些就是组件绘制的所有逻辑，但是有一点必须注意，在绘制完组件后，必须调用下restore()方法，因为在initContext()方法中做了一次save()操作，接下来看看具体实现（代码有些长）； setValue
今天我们就来实现一把自定义HTML5表格组件的Renderer和Editor，为了更直观地演示编辑效果，我们正好利用HT for Web强大的HTML5拓扑图组件 首先来瞧瞧效果： ?...按照HT for Web组件的设计惯例，我们需要创建一个Div作为view，在view中包含一个canvas元素，组件内容在canvas上绘制； 2. editor需要与用户有交互，因此，需要在...用户通过拖拉组件可以改变角度，这个改变是连续的，而且在拖拉的时候有可能鼠标会离开组件区域，要实现离开组件区域也能够正确的改变值，那么这时候就需要调用HT for Web的startDragging()方法...()方法的实现，因为这块有些复杂，我们单独抽出来讲解； ht.Default.def('ht.widget.RotationEditor', ht.widget.BaseItemEditor, { ...这些就是组件绘制的所有逻辑，但是有一点必须注意，在绘制完组件后，必须调用下restore()方法，因为在initContext()方法中做了一次save()操作，接下来看看具体实现（代码有些长）； setValue
Adobe的Flex和微软的Silverlight/WPF本被业界寄予厚望，没想这哥俩如匆匆过客被老东家抛弃了，但他们还是推动了MVP和MVVM设计模式的普及，如今HTML5领域的KnockoutJS、...HT本身也是一套MV*的框架，但我们培训客户时很少过细讨论设计模式，在我看来好的组件封装应该不必让用户纠结于你的设计模式，用户几个月不用你的框架后，依然能快速上手不必有一个重写学习的过程，这是我们最求的理想框架...，SL/WPF老手想不起来定义一个DependencyProperty属性除了AffectsRenderer和AffectsMeasure还有多少要考虑的因素，上段提到的一堆新兴的HTML5界MV*框架...很多情况下内存泄露不是长期的运行也很难发觉，但对于HT的Graph3dView这种基于WebGL的3D组件问题尤为明显，因为大部分浏览器对单个页面能运行的WebGL上下文是有限制的，例如PC上的chrome...以下我对《HT入门手册》的第一个例子做个扩展，对工具条增加了如下代码逻辑的三个按钮，第一个按钮一下子创建了20个新的Tab页，每个Tab页包含一个Graph3dView组件，另外两个按钮实现删除部分页签的功能
HT for Web简称HT提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案，正如Hightopo官网所表达的我们希望提供：Everything you need to create cutting-edge...讨论前先设定话题的边界，HT是基于HTML5的图形组件库，因此文章的案例更多会涉及HTML和JavaScript语言，但并不局限于Web前端，设计思想上同样适用于任何GUI语言平台。...因此我选择在话题展开之前，先用HT来扩展定制几个应用案例，以便大家了解HT组件及其扩展设计思路。 ?...实现的最终效果如上图所示，模型数据就两个数值，一个代表CPU占用率，一个代表内存占用率，左侧通过HT的图形组件GraphView自定义了矢量图形展示，右上角自定义了属性页PropertyView的两单元格的...全矢量化的图形组件设计》文章介绍的HT自定义的矢量方式来实现图形效果，这种方式介于以上两种扩展方式之间，需要自定义绘制效果，但通过HT提供的矢量格式，用户可采用较为直观易读的JSON格式来描述图形，并通过数据绑定的方式实现模型数据与界面呈现的关联
，都感觉查找例子更直观方便，但对于 HT 初学者，面对这一堆数百个涵括通用组件、网络拓扑图组件、3D 组件、矢量图形、各种编辑器等等五法八门的 HTML5 例子盛宴，往往无从下手，为此我打算写个《数百个...HTML5例子学习HT图形组件》的系列文章，引导各种电力、电信、工控 SCADA 等不同行业领域用户，学习使用 HT 这全套一站式 HTML5 图形组件。...HT 的拓扑图组件主要基于 HTML5 的 Canvas 技术，拓扑图是电力和电信的叫法，但该组件远不仅仅用于呈现节点和连线，在 HT 里面我们没把该组件狭义的称为 Topology、Network 或...除了混合第三方图形组件库外，HT 图扑还能嵌入 SVG 的图片进行矢量呈现，参见《绘制SVG内容到Canvas的HTML5应用》 ?...拓扑图篇就写这些吧，HT 的拓扑图组件还有非常多的功能，无法在一篇博客中说透，我只能蜻蜓点水的提到大部分拓扑图应用需要关注的功能点，HT 更多的 HTML5 拓扑图功能留给大家去探索吧。
上一篇我们自定义CPU和内存的展示界面效果，这篇我们将继续采用HT完成一个新任务：实现一个能进行展开和合并切换动作的刀闸控件。...**毫秒级响应我只能呵呵了，为了上这个系统一堆兄弟在沈阳某农村封闭了八个多月，我很好奇那个老系统现在是否健在… 回到我们的任务，一个刀闸最主要的就是可开闭的部分，其他部分都是装饰物效果而已，因此我采用HT...的类，提供了setExpanded的函数，在函数里面操作底层绑定图形的‘switch.angle’属性，以及启动动画封装： ht.Switch = function(){ ht.Switch.superClass.constructor.call...(this); this.s('switch.angle', 0); }; ht.Default.def('ht.Switch', ht.Node, { _image : 'switch...for Web整体架构已经为矢量打下基础，并非为了拓扑才实现矢量，所有通用组件都享有矢量的功能特性，这个后续我们会有更多的应用案例让大家体会到这种结合的强大之处，当然可维护性已经不用我多说了，传统的通用组件
在《HT图形组件设计之道（二）》我们展示了HT在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于...3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。...飞行路线是通过ht.Polyline类型构建的，上图的几个黄色球是飞行路线Polyline对象的部分控制点，通过这几个控制点我们甚至可以在飞机飞行过程动态改变飞行路线。...该例子综合运用了HT for Web的多种技术功能，大家能体会到HT这种数据绑定机制灵活且强大的特点，通过数据绑定机制，我们可以动态修改从2D拓扑图、到通用组件渲染，甚至到3D引擎的数据模型，所有图形元素的颜色...最后上段该HTML5例子在iOS、Android和Mac等多平台下的运行视频和抓图，有兴趣的同学还可对该例子做更多有意思的改造扩展。
在《HT图形组件设计之道（二）》我们展示了HT在2D图形矢量的数据绑定功能，这种机制不仅可用于2D图形，HT的通用组件甚至3D引擎都具备这种数据绑定机制，此篇我们将构建一个3D飞机模型，展示如果将数据绑定机制运用于...3D模型，同时会运用到HT的动画机制，以及OBJ 3D模型加载等技术细节，正巧赶上刚发布的iOS8我们终于能将基于HT for Web开发的HTML5 3D应用跑在iOS系统了。...飞行路线是通过ht.Polyline类型构建的，上图的几个黄色球是飞行路线Polyline对象的部分控制点，通过这几个控制点我们甚至可以在飞机飞行过程动态改变飞行路线。...该例子综合运用了HT for Web的多种技术功能，大家能体会到HT这种数据绑定机制灵活且强大的特点，通过数据绑定机制，我们可以动态修改从2D拓扑图、到通用组件渲染，甚至到3D引擎的数据模型，所有图形元素的颜色...最后上段该HTML5例子在iOS、Android和Mac等多平台下的运行视频和抓图，有兴趣的同学还可对该例子做更多有意思的改造扩展。 ?
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的...这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果： ?...understanding-differences-in-hardware-acceleration-through-paintball.aspx http://msdn.microsoft.com/en-us/hh562071.aspx 以上两种方式都是基于HTML5...的Canvas的2D方式，其实更直接借助GPU的应该是Canvas的WebGL技术，下篇我们将介绍更好玩的基于WebGL的Shading Language的像素操作方式，当然使用Hightopo的HT...for Web不需要关心这些底层技术细节，HT会自动选择最合适的染色机制，因为有些终端浏览器不支持globalCompositeOperation的功能，有些不支持WebGL的硬件加速，因此自动选择最合适的渲染机制也是需要底层框架足够智能化的
http://www.hightopo.com/demo/pipeline/index.html 《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助... 提供的 API 构建而成： 不过这个例子中的模型都比较规矩，也就消防栓由一个球 + 圆通构成，其他图形通过 HT 提供的基本 Node 以及 Shape 对象即可搞定： 但这并不意味着 API 只能做简单的模型...，《HT for Web 建模手册》中介绍的 HT 建模插件可以让有想象力的同学做出各种不可思议的效果。...，createExtrusionModel 用来构建基于某个形状的凸出效果，这两个函数生成的 3D 模型都是靠平面的 2D 图形衍生而来，都是靠 HT 系统中构建 2D 不规则多边形时采用的 Points...for Web 建模手册》中还有众多 API 函数，只要有想象力还可以折腾出无数的花样，后续有空我再借助 HT for Web 的 WebGL 3D 自定义建模功能多搞些实用的例子。
http://www.hightopo.com/demo/pipeline/index.html 《数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇》里提到 HT 很多情况下不需要借助... 提供的 API 构建而成： 不过这个例子中的模型都比较规矩，也就消防栓由一个球 + 圆通构成，其他图形通过 HT 提供的基本 Node 以及 Shape 对象即可搞定： 但这并不意味着 API 只能做简单的模型...，《HT for Web 建模手册》中介绍的 HT 建模插件可以让有想象力的同学做出各种不可思议的效果。...for Web 建模手册》中还有众多 API 函数，只要有想象力还可以折腾出无数的花样，后续有空我再借助 HT for Web 的 WebGL 3D 自定义建模功能多搞些实用的例子。...http://www.hightopo.com/demo/pipeline/index.html ht.Default.setShape3dModel( 'custom', ht.Default.createRingModel
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管...初学者即使只使用 HT for Web 开发 3D 应用的，我们一般也会建议先阅读一遍《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》文章，因为 HT 的所有组件采用的都是统一的 DataModel... 数据模型，采用相同的 MVP 设计模型，类 Flux 的单向流设计理念，所以只要掌握了拓扑图篇的介绍的几个技术点后，你基本就掌握了所有 HT 组件的使用方式。...除了拓扑图篇的内容外，你也可以通过《HT for Web 入门手册》掌握 HT 使用的基本思路，然后你就可以阅读《HT for Web 3D 手册》了，先入为主的就是下图这个电信网管 3D 机房监控的综合性例子...，可参考《HT for Web 的 OBJ 手册》http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html ，HT 手册中也有众多采用
上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果，其实CSS也提供了一些常规图像变化的设置参数，关于CSS的过滤器Filter设置可参考 http:...formPane.v('centerY')]); gl.drawArrays(gl.TRIANGLES, 0, 6); } 以上Vertext和Fragment的代码很多很容易理解，采用HT
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管.../core/3d/ht-3d-guide.html。...初学者即使只使用 HT for Web 开发 3D 应用的，我们一般也会建议先阅读一遍《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》文章，因为 HT 的所有组件采用的都是统一的 DataModel... 数据模型，采用相同的 MVP 设计模型，类 Flux 的单向流设计理念，所以只要掌握了拓扑图篇的介绍的几个技术点后，你基本就掌握了所有 HT 组件的使用方式。...除了拓扑图篇的内容外，你也可以通过《HT for Web 入门手册》掌握 HT 使用的基本思路，然后你就可以阅读《HT for Web 3D 手册》了，先入为主的就是下图这个电信网管 3D 机房监控的综合性例子
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
