example_node 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Node</title>
 5         <meta charset="UTF-8">   
 6         <style>
 7             html, body {
 8                 padding: 0px;
 9                 margin: 0px;                
10             }            
11             .main {
12                 margin: 0px;
13                 padding: 0px;
14                 position: absolute;
15                 top: 0px;
16                 bottom: 0px;
17                 left: 0px;
18                 right: 0px;
19             }
20         </style>     
21         <script src="../../../../lib/core/ht.js"></script>   
22         <script>            
23             function init() {
24                 dataModel = new ht.DataModel();
25                 graphView = new ht.graph.GraphView(dataModel);
26                 view = graphView.getView();   
27                 view.className = 'main';
28                 document.body.appendChild(view); 
29                 // 窗口缩放时处理的逻辑操作
30                 window.addEventListener('resize', function (e) {
31                         graphView.invalidate();
32                 }, false);      
33                 // 设置默认图片
34                 ht.Default.setImage('mac', 'res/mac-air.png');
35                 // 创建图元
36                 air11 = new ht.Node();
37                 air11.setName('11-inch MacBook Air');
38                 air11.setImage('mac');
39                 // 设置宽高
40                 air11.setSize(80, 43);
41                 // 设置位置
42                 air11.setPosition(100, 70);
43                 // 数据容器中添加node
44                 dataModel.add(air11);
45                    
46                 air13 = new ht.Node();
47                 air13.setName('13-inch MacBook Air');                
48                 air13.setImage('res/mac-air.png');
49                 air13.setPosition(260, 70);
50                 air13.setRotation(Math.PI/2);
51                 dataModel.add(air13);
52 
53                 // 将air11吸附于air13
54                 air11.setHost(air13);
55 
56                 // 将图形组件设为可编辑的
57                 graphView.setEditable(true);
58                 // 将air11设置为可编辑大小
59                 graphView.setRectEditableFunc(function(data) {
60                     return data === air11;
61                 });
62                 // 将air13设置为可以旋转
63                 graphView.setRotationEditableFunc(function(data) {
64                     return data === air13;
65                 });
66                 // 操作方式 触摸还是鼠标
67                 var eventType = ht.Default.isTouchable ? 'touchend' : 'mouseup';
68                 // 图形组件触发事件执行的函数
69                 graphView.getView().addEventListener(eventType, function(e) {
70                     // 获取触发的data 
71                     var data = graphView.getDataAt(e);
72                     if(data && ht.Default.isDoubleClick(e)) {
73                         alert(data.getName() + 'is doule clicked')
74                     }
75                 });
76 
77                 
78             }
79             
80         </script>
81     </head>
82     <body onload="init();">
83     </body>
84 </html>

 

posted @ 2022-11-12 09:34  HaoyuSun  阅读(24)  评论(0)    收藏  举报