HT for Web 形状手册

索引


概述

HT提供的ht.Shape是极其强大的图元类型,其在GraphViewGraph3dView组件上都能展示出各种二维和三维的形状效果, 其扩展子类ht.Polyline可实现三维空间管道的功能,扩展子类ht.CSGShape可实现挖空等功能效果,本手册将逐一进行详细介绍。

二维

基础属性

ht.Shape类型在GraphView组件上用于呈现多边形图元,其形状主要由pointssegments这两个属性描述: pointsht.List类型数组的顶点信息,顶点为{x:100, y:200}格式的对象;segmentsht.List类型的线段数组信息, 线段为1~5的整数,分别代表不同的顶点连接方式。

如果segments为空,则代表points数组中的顶点按数组顺序依次直线连接,因此直线段的类型无需设置segments参数。 segments主要用于需要绘制曲线,或者有跳跃断点的情况,其1~5的取值含义说明如下:

ht.Shape的主要属性函数:

ht.Shape类型的points值与widthheightposition这三个大小和位置信息存在联动关系, 即修改points会影响widthheightposition相应值,同理修改widthheightposition值也会影响points信息。

样式属性

ht.Shape相关的style属性:

管线差异

ht.Polyline类型继承于ht.Shape,其更多表现出与ht.Edge连线类似的特性,因此ht.Polyline上 的labelnoteicons等附属部分位置和方向与连线类型类似会考虑折线的角度,从以下例子可只看出两者附件摆放的差异。

从以上例子可发现ht.Polyline关闭了setRotation的旋转功能,更多差异见空间管线章节

吸附功能

ht.Node图元通过setHost(host)函数可吸附到另外一个图元上,这样host图元进行移动和旋转时都会带动attach的吸附图元。 当host图元为ht.Shape类型时,则如果attach图元设置上attach.*的相关属性,可使得图元吸附到ht.Shape的指定线段位置上。

吸附到ht.Shape线段的功能目前不支持segments设置为曲线的情况,也不考虑ht.Shape设置了rotation旋转值的因素, 当图元吸附到ht.Shape线段之后,其rotationposition位置会根据ht.Shape的自动变化同步;如果设置了attach.thickness值, 则图元的height也会根据hostthickness值自动调节,这些联动属性一般不需要用户设置。

三维

地板类型

ht.Shape图元当thickness属性小于0时常用于呈现地板效果的多边形模型,这种类型下tall属性决定地板的厚度, 一般常通过floor.setElevation(floor.getTall()/2);的方式将地板设置在海平面上。

地板类型由shape3d.top.*控制顶面参数,shape3d.bottom.*控制底面参数,shape3d.*控制厚度四周参数。 对于只需要平面不需要立体效果的情况,可通过将shape3d.bottom.visibleshape3d.visible的底面和四周可见参数设置为false实现。

GraphView的二维上ht.Shape实现平铺贴图可通过shape.repeat.image属性设置,Graph3dView三维的平铺 可通过shape3d.top.uv.scaleshape3d.top.bottom.scale控制,但这种方式如果地板的大小发生变化时, 一般还需要再设置参数因此并不方便,HT提供的repeat.uv.length参数可解决这种问题,通过设置该参数, 贴图会根据图形大小自动调节平铺图片数,而且还能与shape3d.top.uv.scaleshape3d.top.bottom.scale的参数进行叠加, 当然大部分情况下如果设置了repeat.uv.length,就不需要设置shape3d.top.uv.scaleshape3d.top.bottom.scale参数。

墙面类型

ht.Shape图元当thickness属性大于0时常用于呈现墙面效果的多边形模型,这种类型下tall属性决定墙面的高度, thickness代表墙厚度,一般常通过wall.setElevation(wall.getTall()/2);的方式将墙面设置在海平面上。

处于墙面类型时,模型相当于长条的六面体,因此可通过all.*left.*right.*等六面体参数进行控制, 参见3D手册六面体章节

管道类型

ht.Shape图元当shape3d属性为cylinder时,图元呈现为圆筒管道的模型效果,tallthickness决定圆筒切面的宽高值, 当tallthickness值一样时呈现为圆形切面,管道的走向由pointssegments决定。

管道由shape3d.top.*控制顶面参数,shape3d.bottom.*控制底面参数,shape3d.*控制管道走向的中间部分效果。 通过将shape3d.top.visibleshape3d.bottom.visible设置为false,可实现空心管道的效果。

空间管线

以上介绍的类型都是基于{x: 10, y: 20}的二维点信息描述图形走向,ht.Polyline继承于ht.Shape, 支持{x: 10, y: 20, e: 30}格式的三维空间点描述,如果e值为空则取elevation的海拔值, 修改ht.Polylineelevationtall值时,会自动调节points顶点中的e值; 同理points顶点信息变化也会同步修改ht.Polylineelevationtall值。

ht.Polyline同样支持基础属性章节介绍的segments参数,实现从二维的平面曲线延伸到了三维的空间曲线效果。 ht.Polyline关闭了 setClosePath 函数功能。

ht.Edgeht.Polyline在展示效果上是很类似的,只不过ht.Edge的起始和结束点来自于sourcetarget节点, ht.Edgeedge.type属性为points时,edge.pointsedge.segments对应于 ht.Polylinepointssegments属性,此时edge.points的顶点信息也可为{x: 10, y: 20, e: 30}的三维顶点格式, 其中e值为空时代表0

ht.Edgeht.Polyline都有两种展示方式,默认显示为普通线框效果,当shape3d设置为cylinder时则显示为立体管线的效果, HT通过微分段的方式实现曲线,因此为达到更高的均分曲线效果,两种方式都可通过shape3d.resolution控制曲线微分段数。

EdgePolyline处于普通线框效果时可实现虚线的功能,有两种虚线效果:

Graph3dView默认关闭虚线功能,如需启用可通过graph3dView.setDashDisabled(false)启动虚线绘制功能。

挖空墙面

吸附功能章节介绍ht.Node可吸附到ht.Shape类型线段上, 当引入ht-modeling.js的建模扩展包后, 通过继承于ht.NodeCSGNode,和继承于ht.Shapeht.CSGShape,可实现多边形墙面挖空的效果。

以上例子将attach.thickness设置为1.001,将高度设置为了setTall(80.001), 此处的尾数0.001是为避免js浮点数运算的误差多预留的尺寸。

CSGNodeattach.operation属性默认值为subtract,代表可对CSGNodeCSGShape类型的host图元进行裁决挖空, 上例中通过将3d.visible设置为false隐藏了用于挖空的CSGNode,但对于门窗类型的应用,除了通过门窗模型挖空外, 还需要保留门窗的模型,而门窗类型一般厚度比墙面薄些,但如果attach.thickness小于1时则无法凿穿墙厚度, 为此建模扩展包还提供了DoorWindow类型的图元, 方便用户构建门窗类型的模型,DoorWindow类型图元提供了dw.s3参数,该参数默认值为[0.999, 0.999, 0.5], 代表真正显示在3D界面上的模型会参考dw.s3的尺寸再进行缩放,这样attach.thickness继续保持可凿穿的1.001即可。

旋转功能

以上介绍的地板类型墙面类型管道类型三种类型, 都通过{x: 10, y: 20}的二维点信息描述图形走向,二维y坐标映射到三维的z坐标的转换关系请参见 3D手册。 但这三种类型都支持ht.ShaperotationXrotationYrotationZ的空间旋转功能,通过设置旋转参数可实现竖立的效果。

以上例子通过不断改变shape3d.uv.offset参数可实现管道水平流动和截面方向旋转等特殊效果。


欢迎交流 service@hightopo.com