HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择:
- divBackground:通过css设置graphView对应的div背景
- Painter:通过graphView.addBottomPainter(function(g, rect){…})来绘制背景
- Layer:通过设置graphView.setLayer(['…', '…', '…', …])来将graphView拆分为多个图层,并为各个图层命名,再让不同种类的node通过node.setLayer('…')将node设置到graphView对应图层中
接下来我为大家一一介绍graphView背景设置方法:
- divBackground:
这两张图片展示的是设置graphView对应div的background属性来设置拓扑图背景,左边的图片展示的是页面初始效果,右边展示的是拓扑图通过缩小和拖拽图元位置后的效果,从效果上可以看出,拓扑图的背景的位置和大小并没有发生改变,不过图元如何缩放和移动,都保持原来的样子。
以下是具体的代码实现,代码很简单,通过gv.getView()来获取graphView拓扑图组件对应的div,再向div中设置background属性。
function initGV1(gv){ var dm = gv.dm(), node = new ht.Node(), view = gv.getView(), viewStyle = view.style; node.setImage('res/mac-air.png'); node.setName('13-inch MacBook Air'); node.setPosition(260, 70); dm.add(node); viewStyle.backgroundImage = 'url(res/background.jpg)'; viewStyle.backgroundPosition = 'center'; viewStyle.backgroundRepeat = 'no-repeat'; }
- Painter:
这两张图片展示的是通过graphView.addBottomPainter(function(g, rect){...})方法绘制拓扑图组件背景,通过graphView.addTopPainter(function(f, rect){...})方法来绘制拓扑图组件的水印效果,左边的图片展示的是页面初始效果,右边展示的是拓扑图通过缩小和拖拽图元位置后的效果,从效果上可以看出,拓扑图的背景和水印的位置和大小均发生了改变,都跟随拓扑图的缩放和移动而改变。
细心的读者会发现两张图片的水印时间是不一样的,这个水印获取的是系统当前时间,因此每一秒会刷新一次,所以两张图片的时间会不一样,这说明了graphView拓扑图组件是支持背景和水印刷新的。
具体的代码实现也不是很复杂,addBottomPainter和addTopPainter方法的参数都是一个函数实现,函数参数也都为两个,g和rect,其中g为canvas对应的画笔,rect为脏区域大小,通过画笔g可以想拓扑图上话任意想描绘的图形,包括图片、渐变色、多边形等等。在代码中addBottomPainter画的就是灰白相间的背景图片,addTopPainter绘制的是系统当前时间,最后通过定时器setInterval设置1秒刷新一次graphView拓扑图组件。
function initGV2(gv){ var dm = gv.dm(), node = new ht.Node(); node = new ht.Node(); node.setName('13-inch MacBook Air'); node.setImage('res/mac-air.png'); node.setPosition(260, 70); node.setRotation(Math.PI/2); dm.add(node); gv.addBottomPainter(function(g, rect){ for(var i=0; i<20; i++){ for(var j=0; j<10; j++){ if((i + j)%2 === 0){ g.fillStyle = 'lightgray'; }else{ g.fillStyle = 'white'; } g.beginPath(); g.rect(i*50, j*50, 50, 50); g.fill(); } } g.strokeStyle = 'red'; g.lineWidth = 1; g.beginPath(); g.rect(rect.x, rect.y, rect.width, rect.height); }); gv.addTopPainter(function(g, rect){ g.save(); g.beginPath(); var text = new Date().toLocaleString(); g.font = '40px Arial'; g.strokeStyle = 'red'; g.textAlign = 'left'; g.textBaseline = 'top'; g.lineWidth = 5; g.fillStyle = 'yellow'; g.strokeText(text, 100, 100); g.fillText(text, 100, 100); g.fill(); g.restore(); }); setInterval(function(){ gv.redraw(); }, 1000); }
- Layer:
这两张图片展示的是通过graphView.setLayer(['…', '…', '…', …])方法将拓扑图组件分割成'bgLayer', 'edgeLayer', 'nodeLayer'三层,左边的图片展示的是页面初始效果,右边展示的是拓扑图通过缩小和拖拽图元位置后的效果,从效果上可以看出,拓扑图的背景和图元的位置和大小均发生了改变,都跟随拓扑图的缩放和移动而改变。
具体的代码实现也不是很复杂,通过graphView.setLayer(['…', '…', '…', …])方法将拓扑图组件分割成'bgLayer', 'edgeLayer', 'nodeLayer'三层,并且图层依据数组顺序自下而上,创建一个存放背景图片的bgNode,并设置其属性为不可选中,设置其graphView图层为'bgLayer',再通过重载ht.Default.handleImageLoaded方法,在图片加载完成后设置bgNode的position,最后设置一堆的node节点在nodeLayer图层上,一堆的edge连线在edgeLayer图层上。
function initGV3(gv){ gv.setLayers(['bgLayer', 'edgeLayer', 'nodeLayer']); var center = createNode(), dm = gv.dm(), sm = dm.sm(), bgNode = new ht.Node(); center.setPosition(100, 100); dm.add(center); bgNode.s({ '2d.selectable': false }); bgNode.setImage('bgImage'); bgNode.setLayer('bgLayer'); ht.Default.handleImageLoaded = function(name, image){ var width = image.width, height = image.height, gvH = gv.getHeight(), gvW = gv.getWidth(); if(name == 'bgImage'){ bgNode.setPosition(gvW / 2, gvH / 2); } }; dm.add(bgNode); var count = 30, firstNode, lastNode; for (var i = 0; i < count; i++) { var node = createNode(); if(!lastNode){ firstNode = node; }else{ node.setHost(lastNode); } lastNode = node; node.setPosition( 500 + 150 * Math.cos(Math.PI * 2 / count * i), 100 + 70 * Math.sin(Math.PI * 2 / count * i) ); dm.add(node); var edge = new ht.Edge(center, node); edge.s({ 'edge.type': 'custom', 'edge.color': 'lightgray', 'edge.width': 1 }); edge.setLayer('edgeLayer'); edge.addStyleIcon("toArrow", { position: 19, keepOrien: true, width: 30, height: 15, names: ['toArrow'] }); dm.add(edge); } firstNode.setHost(lastNode); }
相关推荐
HT for Web是基于HTML5标准的企业应用图形界面一站式解决方案, 其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库,提供了完全基于HTML5的矢量编辑器、拓扑编辑器及 3D场景编辑器等多套可视化设计工具...
https://blog.csdn.net/shenjuntao520/article/details/100155817#comments_15044861 文章相关素材
NULL 博文链接:https://xhload3d.iteye.com/blog/2226706
HT FOR WEB 一套强大的基于 WebGL 技术的 3D 图形引擎,编辑器下,左边菜单可自定义控制多个不同的菜单操作。
一直在找苦苦寻找一个Box2D的物理引擎javascript整合例子,发现 http://www.hightopo.com/blog/275.html 这篇文章的例子效果非常棒,通过HT for Web的3D引擎直观的呈现Box2D物理碰撞的实时运行效果,这么强大的3D...
NULL 博文链接:https://xhload3d.iteye.com/blog/2232348
NULL 博文链接:https://xhload3d.iteye.com/blog/2217955
NULL 博文链接:https://xhload3d.iteye.com/blog/2217934
前端框架:ht-for-web,专用于拓扑图制作和页面布局。
电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等都可以用 HTML5 的图形化界面来完成,所有这些简称为拓扑图。使用 HT 会让你的开发变得更加快速,快来玩玩吧!
HT for Web 您可以轻松构建现代化的,跨桌面和移动终端的企业应用,无需担忧跨平台兼容性,及触屏手势交互等棘手问题
HT for Web,通常简称为 HT,这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发,其核心文件只有一个,就是 ”ht.js”。在 index.html 中使用 script 标签进入后便可使用。 完全版本效果:...
上回我们用 ht.widget....HT for Web 提供了工具条组件类 ht.widget.Toolbar,工具条上的元素可为原生的 html 元素, 也支持 ht 提供的如 ht-form.js 的表单插件中的组件,并内置提供了按钮、单选按钮、复选框等组件。
HT7038原理图
前言 ...我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框,对传入的数据进行选择的功能,感觉整体实践起来还是比较简单方便的,所以在这边跟大家分享一下。 效果图 ...代码实现 拓扑图 从上面的效果图中我们可以...
att7022 pdf schematic
HT66F50电路图介绍了,HT66F50的最小系统的设计原理图
ht.js开发实例最新版本,通过这个版本开发html5工业设计智慧平台,经过在网上寻找发现 http://www.hightopo.com/blog/275.html 这篇文章的例子效果非常棒,通过HT for Web的3D引擎直观的呈现Box2D物理碰撞的实时运行...
创维电视机 29T84HT 原理图供维修使用
SRC_HT~1.WEB.web