HT for web 學習1

最新推荐文章于 2023-06-01 14:20:42 发布

假装是个web狗

最新推荐文章于 2023-06-01 14:20:42 发布

阅读量1k

点赞数 1

分类专栏： ht

本文链接：https://blog.csdn.net/weixin_44897255/article/details/98029440

版权

ht 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Api文档：https://www.hightopo.com/guide/doc/index.html

1.HT for web 是什麼？

ht是基于HTML5标准的企业应用图形界面一站式解决方案，其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库(并不開源)，网上直接下载js包是没有用的，要授权！！！

实例：

1.拓扑图

<!DOCTYPE html>
<html>
    <head>
        <title>Animation</title>
        <meta charset="UTF-8">       
        <script src="js/ht.js"></script>
        <script src="js/easing.js"></script> 
        <script>                                        
            
            function init(){                                
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                graphView.addToDOM();  //将组件加入到指定的DOM元素底下，不指定则加入到 document.body 下
                view = graphView.getView();  //获取拓扑组件的根层div
         
               var toy = new ht.Node();   //new Node()拓扑图元类型
                toy.setImage('img/FIIicon.png');  //设置拓扑上展现的图片信息，在GraphView拓扑图中图片一般以position为中心绘制
                toy.setPosition(180, 140);   //设置图元中心点坐标
                dataModel.add(toy);                         
         /* 
                var select = document.createElement('select');  // 创建DOM对象  下面是样式设定
                select.style.position = 'absolute';
                select.style.top = '10px';
                select.style.right = '10px';
                view.appendChild(select);  // 在组件的根层div添加创建的DOM对象				
                for(var name in Easing){
                    var option = document.createElement('option');
                    option.innerHTML = name;
                    if(name === 'easeOut'){
                        option.setAttribute('selected', 'true');
                    }
                    select.appendChild(option);
                }                  
         
                graphView.setInteractors(null);    //setInteractors(interactors)设置交互器
                var type = "ontouchend" in document ? 'touchstart' : 'mousedown';                                
                
                isAnimating = false;   //是否使用动画
                view.addEventListener(type, function(e){       //addEventListener() 方法用于向指定元素添加事件句柄            
                    if(isAnimating || e.target === select || !ht.Default.isLeftButton(e)){
                        return;
                    }
                    e.preventDefault();
                    isAnimating = true;
                    var data = graphView.getDataAt(e);
                    var easing = Easing[select.value];
                    var finishFunc = function(){
                        isAnimating = false;
                    };
                    if(data === toy){
                        var size = toy.getSize();
                        ht.Default.startAnim({
                            frames: 30, 
                            interval: 16,
                            easing: easing,
                            finishFunc: finishFunc,                            
                            action: function(v){
                                toy.setRotation(Math.PI * v);
                                var r = Math.abs(v - 0.5) * 2;
                                toy.setSize(size.width * r, size.height * r);
                            }
                        });                        
                    }else{
                        var p2 = graphView.getLogicalPoint(e);
                        var p1 = toy.getPosition();
                        anim = ht.Default.startAnim({  
                            duration: 500,
                            easing: easing,
                            finishFunc: finishFunc,
                            action: function(v){
                                toy.setPosition(
                                    p1.x + (p2.x - p1.x) * v,
                                    p1.y + (p2.y - p1.y) * v
                                );
                            }
                        });                        
                    }
                }, false); */
                
                view.style.background = '#ccc';
                /* graphView.addTopPainter(function(g){
                    ht.Default.drawText(g, 'click anywhere you want ..', '24px Arial', 'lightgray', 50, 100, 0, 0, 'left');
                });      
                graphView.addBottomPainter(function(g){
                    ht.Default.drawText(g, 'click anywhere you want ..', '24px Arial', 'lightblue', 200, 180, 0, 0, 'left');
                });       */          
                
            }
                        

        </script>
    </head>
    <body onload="init();">
    </body>
</html>

2.初学画3d

<!DOCTYPE html>
<html>
	<head>
		<title>Animation</title>
		<meta charset="UTF-8">
		<script src="js/ht.js"></script>
		<script src="js/easing.js"></script>
		<script>
			function init() {
				//数据容器（datamodel手册）
				dataModel = new ht.DataModel();
				//定义3d渲染引擎组件（3d手册）
				g3d = new ht.graph3d.Graph3dView(dataModel);
				g3d.addToDOM();  //将组件加入到指定的DOM元素底下，不指定则加入到 document.body 下
				view = g3d.getView();
				view.className = 'main';
				document.body.appendChild(view);
				var toy = new ht.Node();   //new Node()拓扑图元类型
				 toy.setPosition(1000, 100);   //设置图元中心点坐标
				 dataModel.add(toy);   
				 
				//监听图元变化，但是又不能在图元立马改变的时候就更新，而是每隔一段时
				//间异步刷新
				window.addEventListener('resize', function(e) {
					g3d.invalidate();
				}, false);
				
				//设置海平面
				g3d.setGridVisible(true);
				//设置可编辑为true
				g3d.setEditable(true);
				//设置观察视觉
				g3d.setEye([-82, 169, 327]);
				//决定目标中心点
				g3d.setCenter([-8, 48, 8]);
				

			}
		</script>
	</head>
	<body onload="init();">
	</body>
</html>

假装是个web狗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HT for web 學習1

Api文档：https://www.hightopo.com/guide/doc/index.html1.HT for web 是什麼？ht是基于HTML5标准的企业应用图形界面一站式解决方案，其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库(并不開源)，网上直接下载js包是没有用的，要授权！！！实例：1.拓扑图<!DOCTYPE html>&l...
复制链接

扫一扫