索引
HT
的GraphView
二维拓扑和Graph3dView
三维组件呈现图元信息时,一般可分为中心部位及label
、note
和icons
等辅助部位,
这些附属部位的摆放位置就是本手册要介绍的内容,所有辅助部分都有共性的参数,同时针对不同图元也有特殊的参数,
Graph3dView
针对三维空间也有其特殊的参数定义,本手册将逐一进行详细说明。
相对位置position
是HT
位置体系中最重要的参数,label.position
,note.position
以及icons
上的position
参数,
都是以1
~55
的数字的信息来描述相对于一个矩形区域的位置,对于ht.Edge
和ht.Polyline
的连线类型,可理解为高度为0
的矩形。
34 35
1 | 2 38 3 39 4 | 5
----6-------40-----7-----41-------8----
9 | 10 42 11 43 12 | 13
| |
| 44 |
14 15 16 45 46 17 47 48 18 19 20
| 49 |
| |
21 | 22 50 23 51 24 | 25
----26------52-----27-----53------28---
29 | 30 54 31 55 32 | 33
36 37
position
相对位置一般会结合offset.x
和offset.y
参数,在position
的基础上进行水平和垂直位置偏移,
如文字的label.offset.x
和label.offset.y
参数。对于label
和icons
类型还支持rotation
旋转参数,
如文字的label.rotation
.
icons
图标用于在图元上排放一个或一排的图标数组,其具有以下特殊的控制参数:
gap
:指定图标之间的间距direction
:指定icons
的排列方向,默认值为east
,可设置为west
、east
、north
或south
rotationFixed
:设置该参数为true
将使得图标旋转不考虑连线角度,只由rotation
决定keepOrien
:当图标摆放在Edge
和Polyline
连线类型图元上时,图标默认自动调整方向以保持最好的阅读效果(比如文字)例如箭头类型图标一般需要将keepOrien
设置为true
,保持与连线固定的角度:
'icons': {
fromArrow: {
position: 15,
names: ['arrow'],
rotation: Math.PI,
keepOrien: true,
width: 50,
height: 25
},
toArrow: {
position: 19,
names: ['arrow'],
keepOrien: true,
width: 50,
height: 25
},
}
Graph3dView
三维组件中位置信息增加了face
、t3
、r3
、rotationMode
和autorotate
等控制参数,
以label
文字为例说明如下:
label.face
:默认值为front
,文字在3D
下的朝向,可取值left|right|top|bottom|front|back|center
label.t3
:文字在3D
下的偏移,格式为[x,y,z]
label.r3
:文字在3D
下的旋转,格式为[rotationX,rotationY,rotationZ]
label.rotationMode
:默认值为xzy
,文字在3D
下的沿三个轴旋转先后顺序,可取值xyz|xzy|yxz|yzx|zxy|zyx
label.autorotate
:默认值为false
,文字在3D
下是否自动朝向眼睛的方向,可设为true
或y
,y
代表沿着y
轴转动注意:3D
下不考虑以下的2D
相关参数
label.offset.x
:被label.t3
替代label.offset.y
:被label.t3
替代label.rotation
:被label.r3
替代