矢量化的HTML5拓扑图形组件设计

2024-08-30 11:48

本文主要是介绍矢量化的HTML5拓扑图形组件设计,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了:

www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html

  • 矢量可无级缩放,界面不失真不模糊
  • 描述矢量的文本内容远比图片小得多
  • 目前各种window.devicePixelRatio不一致的设备,矢量可能是唯一彻底的解决方案
  • 业务数据绑定

提起矢量一般都会想到SVG,但这是个坑人的玩意儿,这么多年就没见一个完善的实现者,浏览器实现千差万别,高级属性根本不能玩,Adobe SVG Viewer好多年前就停止更新,Flex支持SVG导入也仅供基本属性玩玩,当然SVG也不是一无是处highcharts还是运用得很不错,Java领域也有维护多年的 Batik 项目可用。但,我还是不喜欢DOM上太重都是元素,不喜欢庞大包罗万象搞得没有一家能完美实现的标准,另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵活,基于HTML5的HT for Web很自然的选择了一条自定义简单标准的JSON格式路线。

Screen Shot 2014-07-28 at 7.23.20 PM

上图是HT注册图片函数,对于传统图片自然也可以通过ht.Default.setImage('sunrise', '../res/sunrise.png')的方式注册url路径,但当注册对象是HT矢量格式标准的JSON数据时,则HT会采用该JSON描述的矢量信息进行图形绘制,上图的JSON其实仅是左侧图片的描述,右侧红色的四个sunrise则是将以注册的JSON作为基础,进行可复用实现嵌套定义的效果

ht.Default.setImage('group-sunrise', {width: 240,height: 160,clip: true,color: 'red',comps: [{type: 'image',name: 'sunrise',rect: [0, 0, 120, 80],opacity: 0.3},{type: 'image',name: 'sunrise',rect: [120, 0, 120, 80],rotation: Math.PI / 4},{type: 'image',name: 'sunrise',rect: [0, 80, 120, 80],shadow: true},{type: 'image',name: 'sunrise',rect: [120, 80, 120, 80]}]
});

如上代码注册了一个名为'group-sunrise'的新矢量,其由四部分组件,每个部分都是已经注册的'sunrise'矢量,并可对不同的部分进行独立的旋转、加阴影和透明度等效果设置。

至此仅可以说重造了个SVG的轮子没啥特殊,如果仅能达到矢量化的功能,那费那么大劲自定义一套标准也没大意义,其实HT for Web设置矢量的初衷并非为了矢量化,而是HT产品的核心理念:让程序员更轻松的开发图形界面!

http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html

Screen Shot 2014-07-28 at 9.07.12 PM

作为一个走过MFC、Qt、Swing、Flex、Silverlight/WPF和Cocoa的老前端(这里提前端有点不合时代,如今提前端似乎仅指页面)程序员,我可以绘制不错的自定义界面,但我还是很怕客户东改西改,特别在电力和工控等行业有一大堆的行业图标需要你绘制,本来很有趣的Graph 2D绘图技术,但每天不断重复的绘制不同类型的设备的体力活也会让人崩溃。因此HT for Web不仅定义矢量格式、实现了矢量绘制,还提供了矢量编辑工具设计器,用户拖拖拽拽就能绘制出矢量图形,然后导出JSON,注册到HT之后即可使用到所有的HT组件上,注意哦:是所有组件,不仅仅是拓扑、不仅仅是3D、还有所有通用组件:

http://www.hightopo.com/guide/guide/core/theme/examples/example_default.html

Screen Shot 2014-07-28 at 9.14.50 PM

搞了这么多年的前端其实我还是喜欢手写代码,即使是HT的矢量描述大部分情况我还是手写,当然工具也有其发挥作用的地方,例如下面这个采用HT矢量进行水利监控的客户,这个转轮的扇叶不用工具估计很难手写代码描述出贝塞尔曲线点的位置坐标:
Screen Shot 2014-07-28 at 8.53.42 PM

有了工具再也不用为绘制曲线犯愁了,甚至都不需要程序员参与,美工也可以用HT的矢量编辑器绘制图形导出JSON给程序员使用,这就是HT为让Designer与Developer更好互相配合而进行矢量的设计初衷,程序员不用再每天苦逼的用代码绘制各种设备,这样的设计开发工作流程下,即使哪个领导不满意,美工也可以快速再拖拖拽拽出新的矢量图形效果,而程序员需要做的仅仅是再导入JSON即可。

当然HT作为程序员的开发工具,仅仅走到这一步还是远远不够的,这仅仅解决了绘制矢量的工作,对于SCADA等监控领域往往还需要根据后台实时数据上报的硬件信息,需要图形上的矢量同步变化,因此矢量图形的颜色、大小、角度等所有参数都可能需要与实时数据保持一致,这可是烦人的事情,如何是好?

按传统的做法,程序员不仅要绘制矢量,并且在绘制图形代码中还要掺杂业务参数逻辑,因此代码的可读性和可维护性是很难想象的。这里HT又创新性的提出了动态绑定矢量数据的功能,HT的矢量格式设计从骨子里头就考虑了动态绑定数据的需求,HT的矢量JSON格式中,任何图形元素的颜色、大小、角度等所有参数都可以动态绑定业务数据,例如上图水泵的扇叶,美工设计好之后,我们只要把扇叶的rotation角度绑定上Data的某个属性,则运行中用户仅需要将角度设置给该属性,界面的水泵扇叶就自动旋转起来了,同理下图的PieChart的旋转角度,和是否中空的两个参数也是绑定了业务数据,这样用户拖拽图元和双击时改变相应的业务数据图元就会自动变化呈现效果:

Screen Shot 2014-07-28 at 8.56.49 PM

矢量的动态性还有个用途就是动态换肤,传统的换肤用户需要让美工做不同颜色的图片和css等资源,用户切换时需要远程动态下载,而HT的换肤完全就可以本地进行,整个过程无需服务器请求,甚至客户可以提供颜色拉条,让用户动态切换体验任意的颜色搭配。

http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html

Screen Shot 2014-07-28 at 9.47.33 PM

读到这里大家应该体会到为什么要重复定义并实现矢量这个轮子的意义了吧,这里仅提出Hightopo的HT for Web为解决监控领域图形设计问题,一种独特的实现机制供大家思考,萝卜白菜各有所爱,本文并非要掀起DOM组件与Cavnas的2D孰优孰劣争论,SVG的确也有highcharts这样不错应用的案例,HT成功实现所有组件采用Canvas设计,而Sencha和Kendoui等流行的通用组件都采用DOM方式堆积也发展的不错,所以选择什么样的设计方案很多情况下并不是决定性的,关键还是认真,只要认真用心实现都可以在不同的设计路子上做出精彩。

最后还是收收心,其实矢量也不是那么万能,ps还是很强大的,美工可以用ps快速构建出各种细致效果的图片,这点有简单的矢量格式描述很多情况下是达不到的,因此矢量也是仅仅解决了监控领域的部分问题,减少了程序员的部分工作量,HT做了很大的努力解决了这些部分问题也就足够了!

Screen Shot 2014-07-28 at 10.00.44 PM

Screen Shot 2014-07-28 at 10.01.04 PM

Screen Shot 2014-07-28 at 10.02.09 PM

这篇关于矢量化的HTML5拓扑图形组件设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...