首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5拓扑图形组件设计之道(一)

这个愿景从功能上是个相当长的战线,从设计架构上也是极具挑战性的,其实HT团队是非常保守的,我们从不贪多图大,只我们感觉自己能得更好,能给用户综合体验更佳的功能,在这样理念驱动下我们慢慢形成了这样的愿景...,慢慢实现了几个有意义的里程碑,慢慢积累下了不少图形组件设计上的创新和经验,我不知道这个系列会写多少篇,也许永远也不会结束,也没有系统的提纲规划,想到什么就写什么,只希望文章能启发有兴趣的同学对图形组件设计更深的思考就足够了...讨论前先设定话题的边界,HT是基于HTML5图形组件库,因此文章的案例更多会涉及HTML和JavaScript语言,但并不局限于Web前端,设计思想上同样适用于任何GUI语言平台。...实现的最终效果如上图所示,模型数据就两个数值,一个代表CPU占用率,一个代表内存占用率,左侧通过HT的图形组件GraphView自定义了矢量图形展示,右上角自定义了属性页PropertyView的两单元格的...》文章介绍的HT自定义的矢量方式来实现图形效果,这种方式介于以上两种扩展方式之间,需要自定义绘制效果,但通过HT提供的矢量格式,用户可采用较为直观易读的JSON格式来描述图形,并通过数据绑定的方式实现模型数据与界面呈现的关联

1K90

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

但,我还是不喜欢DOM上太重都是元素,不喜欢庞大包罗万象搞得没有一家能完美实现的标准,另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵活,基于HTML5...,程序员不用再每天苦逼的用代码绘制各种设备,这样的设计开发工作流程下,即使哪个领导不满意,美工也可以快速再拖拖拽拽出新的矢量图形效果,而程序员需要做的仅仅是再导入JSON即可。...当然HT作为程序员的开发工具,仅仅走到这一步还是远远不够的,这仅仅解决了绘制矢量的工作,对于SCADA等监控领域往往还需要根据后台实时数据上报的硬件信息,需要图形上的矢量同步变化,因此矢量图形的颜色、大小...按传统的做法,程序员不仅要绘制矢量,并且在绘制图形代码中还要掺杂业务参数逻辑,因此代码的可读性和可维护性是很难想象的。...矢量的动态性还有个用途就是动态换肤,传统的换肤用户需要让美工不同颜色的图片和css等资源,用户切换时需要远程动态下载,而HT的换肤完全就可以本地进行,整个过程无需服务器请求,甚至客户可以提供颜色拉条,

1.4K20

HTML5视音频代码实例 & WEBM格式转换

HTML5视音频代码实例&WEBM格式转换HTML5学堂:WebM由Google提出,是一个开放、免费的媒体文件格式。...在本文将会提到如何把 WEBM 文件刻录成 DVD, 把 WEBM 文件转换成 MPEG, DivX, MP4, FLV, iPod以及其它格式。并且如何去做一个H5视频的实例。 <!...这里你可以找到 WEBM 转换器的应用程序,了解如何把 WEBM 文件刻录成 DVD, 把 WEBM 文件转换成 MPEG, DivX, MP4, FLV, iPod以及其它格式。...WEBM格式转换器: http://www.dvdvideosoft.com/cn/converter/video/webm-video-converter.htm ? ?...; 兼容性问题: 补充说明:play()等方法在移动端并没有得到支持,在移动端,使用HTML5中的视音频,会自动调用软件内置的播放器,用网页的形式打开 欢迎沟通交流~HTML5学堂

3.9K80

直接上源码教你经典HTML5小游戏

HTML5因其跨平台性的特质已逐渐成为网络游戏开发的热门新技术。...程序写累了,喝上一杯咖啡,和电脑对弈几把吧,相信这HTML5中国象棋游戏的实现算法你比较清楚,可以打开源码来研究一下这款HTML5中国象棋游戏。 ?...5、太空战机游戏 这又是一款制作精良的HTML5游戏,该HTML5游戏的主角是一架英勇威武的太空战机,进入游戏后按”Z”键发射子弹,消灭敌机。...HTML5真的很强大,HTML5游戏方面更是犀利。 ? 7、城市消消乐 很不错的HTML5消除游戏,同样颜色的建筑相邻,可以将它们进行合成,建筑随之升级。...8、捕鱼达人 非常逼真的捕鱼达人网页游戏源码下载,基于HTML5和JS特效实现,游戏动画非常的炫,不卡顿,大家有时间的完全可以学习学习,HTML5游戏跟客户端其实是各有各的优势,做到平衡就好。 ?

7.3K20

TensorFlow也可以图形渲染了:当神经网络遇上计算机图形

谷歌给TensorFlow加入了计算机图形处理功能TensorFlow Graphics,让神经网络可以更好地理解计算机世界里的图形操作。...计算机图形(Computer Graphics)和计算机视觉(Computer Vision)是一对孪生兄弟,二者互为逆过程。...为何要推出TensorFlow Graphics 近几年,在神经网络架构中插入可微图形层的情况越来越多。...在神经网络中插入这些可微图形层,可以来构建新的、更高效的网络架构。将几何和约束建模到神经网络中,可以通过自我监督的方式进行稳健、高效的训练。...另外,训练3D视觉任务的机器学习系统通常需要大量数据,需要设计机器学习模型,在没有太多监督的情况下进行训练,给网络加入计算机图形渲染的能力,能帮AI更好地理解3D世界。

61430

怎么入门html5绘制图形?你需要了解这几点!

html5中是怎么实现绘制图形html5中可以实现绘画图形的功能,需要注意的是html5只提供2D,不提供3D绘画功能。canvas元素是H5总新增的元素,它用来专门绘制图形。...在canvas元素中绘画不是拿鼠标来绘制图形,实际上在H5完成绘画功能,不仅仅需要canvas元素,而且需要JavaScript脚本来配合才能完成绘制图形。...所以说把html5中的canvas元素理解成画布是是合适不过的。...html5中的canvas元素 canvas元素必须要指定id、width(宽)、height(高)属性,虽然canvas元素是H5中用来绘制的图形,但是它的放置放和其他的元素没有区别。...html5中的常用的绘制图形 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 绘制矩形 创建canvas元素

78720

TensorFlow也可以图形渲染了:当神经网络遇上计算机图形

晓查 发自 凹非寺 量子位 报道 | 公众号 QbitAI 谷歌给TensorFlow加入了计算机图形处理功能TensorFlow Graphics,让神经网络可以更好地理解计算机世界里的图形操作。...计算机图形(Computer Graphics)和计算机视觉(Computer Vision)是一对孪生兄弟,二者互为逆过程。...在TensorFlow Graphics,图像渲染包括对图形进行旋转、缩放、光影、3D网格等操作。 旋转 ?...为何要推出TensorFlow Graphics 近几年,在神经网络架构中插入可微图形层的情况越来越多。...在神经网络中插入这些可微图形层,可以来构建新的、更高效的网络架构。将几何和约束建模到神经网络中,可以通过自我监督的方式进行稳健、高效的训练。

90120

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

,都感觉查找例子更直观方便,但对于 HT 初学者,面对这一堆数百个涵括通用组件、网络拓扑图组件、3D 组件、矢量图形、各种编辑器等等五法八门的 HTML5 例子盛宴,往往无从下手,为此我打算写个《数百个...HTML5例子学习HT图形组件》的系列文章,引导各种电力、电信、工控 SCADA 等不同行业领域用户,学习使用 HT 这全套一站式 HTML5 图形组件。...》和《HT图形组件设计之道(二)》 ?...除了混合第三方图形组件库外,HT 图扑还能嵌入 SVG 的图片进行矢量呈现,参见《绘制SVG内容到Canvas的HTML5应用》 ?...拓扑图做完呈现需求效果之后,常会有拓扑图纸数据需要保存的需求,这个很简单,DataModel 内置将所有数据转换成 JSON 的功能,非常方便用户将拓扑图内容进行导入导出工作,一般用户会将 JSON 数据字符串化并进行压缩

3K50

企业选择Html5移动开发要慎之又慎

Html5问世的那天起,Html5的神奇功能就被无限放大,曾有分析师认为:Html5将开启移动互联网的无界之争,可是FaceBook抛弃Html5时,人们才幡然醒悟,Html5并非移动互联网端的万能钥匙...,特别是企业级移动市场,选择Html5绝非明智的选择,那么Html5能否取代手机应用程序,也许在下面的内容中你会找到答案。...本机应用程序的麻烦 长期以来,有限资源的设计人员经常会选择开发可在苹果iOS设备和Android设备运作的应用程序,因为这样,会使他们能够让其所发展的应用程序执行在多数的手机平台上。...HTML5有机会改变什么 许多在移动设备社交的人认为,如果设计人员使用HTML5开发基于浏览器的应用程序,就能够避开这些麻烦。HTML5是自1999年以来首次升级的超链接标记语言。...虽然官方W3C在2014年之前不会将HTML5的标准完成定案,但许多最现代化的移动设备浏览器已经支持HTML5,而有不少Web设计人员也都已经开发为数不小的HTML5网站。

1K40
领券