Index
ht.Shape
provided by HT
is an extremely powerful type of data that can be displayed on both the GraphView
and Graph3dView
components, with its expanded subclass ht.Polyline
can realize the function of 3D spatial pipeline, and the expand subclass ht.CSGShape
can realize hollow function effect, this manual will be introduced in detail.
ht.Shape
type is used on the GraphView
component to render a polygon data, whose shape is mainly described by the properties of points
and segments
:
points
is the vertex information in ht.List
type array, vertex is the object whose format is like{x:100, y:200}
; segments
is the segment array information in ht.List
type, the line segment is integer with scale of 1
to 5
, representing different vertex connection methods.
If segments
is empty, the vertices in the points
array are connected sequentially in array order, so the type of the line segment does not need to set the segments
argument.
segments
is mainly used to draw a curve, or there is a jump breakpoint, its 1~5
value meaning is described as follows:
moveTo
which occupies 1
point information, represents the starting point of a new pathlineTo
which occupies 1
point information, represents the connection from the last point to this pointquadraticCurveTo
occupies 2
point information, the first point as a curve control point, the second point as the end of the curvebezierCurveTo
occupies 3
point information, the first and second points as the curve control points, and the third point as the end point of a curveclosePath
which does not occupy point information, represents the end of the path drawing and closes to the starting point of the pathht.Shape's
main property function:
getPoints()
and setPoints(points)
Gets and sets the array of points, and the parameter is Array
type to be internally converted into ht.List
, clear all points for nulladdPoint(point, index)
Inserts new points at the specified index position, if the index
is empty then inserts into the lastsetPoints(index, point)
Replaces new points at the specified index locationremovePointAt(index)
Deletes the point at the specified index locationtoPoints()
Copy a new ht.List
type vertex arraysegments's
Attribute is an Array
or ht.List
type that describes the point join style and the array element is an integer value:moveTo
which occupies 1
point information, represents the starting point of a new pathlineTo
which occupies 1
point information, represents the connection from the last point to this pointquadraticCurveTo
occupies 2
point information, the first point as a curve control point, the second point as the end of the curvebezierCurveTo
occupies 3
point information, the first and second points as the curve control points, and the third point as the end point of a curveclosePath
which does not occupy point information, represents the end of the path drawing and closes to the starting point of the pathisClosePath()
and setClosePath(true)
Gets and sets whether the polygon is closed, default to false
, Wall type by setting the closure to seamlessly connect with the starting pointgetLength(resolution)
Gets the polygon length, resolution
for the number of curved differential slices, and if not input this parameter HT
will adopt the system default value
ht.Shape
type ofpoints
value andwidth
,height
andposition
these three size and position information exist correlation, that means modifyingpoints
will affectwidth
,height
andposition
corresponding value, the same changes towidth
,height
andposition
values also affectpoints
information.
ht.Shape
related style
properties:
shape.border.width
Border width, the default value of 0
means no borders are drawnshape.border.color
Border colorshape.border.cap
Border terminal line cap style, optional parameter is butt|round|square
shape.border.join
Border when two lines intersect it will create a type of corner, optional parameter is bevel|round|miter
shape.border.pattern
Shows dashed style, Array
type, for example [5, 5]
shape.background
Background fill color, for null
represents no filling backgroundshape.gradient
Gradient color type: shape.background
solid color.'linear.southwest','linear.southeast','linear.northwest','linear.northeast',
'linear.north','linear.south','linear.west','linear.east',
'radial.center','radial.southwest','radial.southeast','radial.northwest','radial.northeast',
'radial.north','radial.south','radial.west','radial.east',
'spread.horizontal','spread.vertical','spread.diagonal','spread.antidiagonal',
'spread.north','spread.south','spread.west','spread.east'
shape.gradient.color
Background gradient colorshape.repeat.image
Fills a picture of a repeating background, noting that the image here does not support vectorsshape.dash
Shows dashed lines, the default is false
shape.dash.pattern
Dashed line style, the default is [16, 16]
shape.dash.offset
Dashed line offset, the default is 0
shape.dash.color
Dashed line colorshape.dash.width
Dashed line width, default to null representative using the value of shape.border.width
shape.dash.3d
Whether the dashed line displayed the 3d
effect, the default is false
shape.dash.3d.color
The colors of 3d
dashed line effect, default white for empty, the middle part of the line is the color when the 3d
effect is renderedshape.dash.3d.accuracy
The accuracy of 3d
dashed line effect, the lower the value of 3d
gradient effect the better but affect performance, do not need to modify in general
ht.Polyline
type inherits from ht.Shape
, its express more similar line features with ht.Edge
, so the label
, note
and icons
, etc., attached parts position and direction similar to line type will consider the angle of polyline, from the following examples can only see the differences between the two accessories placed.
From the example above we can find ht.Polyline
turn off the rotation function setRotation
, see more differences in Spatial Pipeline chapter
ht.Node
datas can be adsorbed onto another data through setHost(host)
, so that the host
datas move and rotate and the attach
adsorption datas will be driven.
When host
data is ht.Shape
type, if the attach
data is set to attach.*
related properties, the data can be adsorbed to the ht.Shape
at the specified segment position.
attach.index
: The default value is -1
, which is specified to adsorb in ht.Shape
data segment indexattach.offset
: The default value is 0
, which is specified to adsorb in ht.Shape
data offset position of the segment where the data is locatedattach.offset.relative
: The default value is false
, if true
the offset represents the length of the line segment multiplied by attach.offset
valueattach.offset.opposite
: The default value is false
, which is specified to adsorb in ht.Shape
whether the data is in the positive or reverse direction of the segmentattach.gap
: The default value is 0
, which is specified to adsorb in ht.Shape
offset of the segment in the vertical direction.attach.gap.relative
: The default value is false
and, if true
, offsets the vertical direction of the line to ht.Shape
thickness
value of shape multiplied by attach.gap
attach.thickness
: The default value is null, CSGNode
defaults to 1.001
, and the height
property value of the adsorbed data when the positive value is determined by the thickness
of the host
Adsorbed to
ht.Shape
segment function does not currently supportsegments
be set to curve, nor does it considerht.Shape
sets the factor of rotation valuerotation
, when the data is adsorbed toht.Shape
segment, itsrotation
andposition
positions will be based onht.Shape
automatically changes in sync; if theattach.thickness
value is set, theheight
of the data is automatically adjusted according to thehost
thickness
value, which does not require user settings in common.
ht.Shape
datas when thickness
properties are less than 0
often used to render the floor effect of the polygon model, this type of tall
property determines the thickness of the floor, generally through floor.setElevation(floor.getTall()/2);
to set the floor on the sea level.
The floor type is controlled the top parameters by the shape3d.top.*
, shape3d.bottom.*
control of the bottom surface parameters, shape3d.*
control of the thickness around the parameters.
For situations where only needs the plane and does not requires a stereo effect, you can set the bottom and surround visible parameters of shape3d.bottom.visible
and shape3d.visible
to false
implementations.
GraphView
on the 2D ht.Shape
realizes tile map can be set through shape.repeat.image
property, Graph3dView
3D tiles are controlled by shape3d.top.uv.scale
and shape3d.top.bottom.scale
, but in this way if the floor size changes, it is generally necessary to set the parameters again so it is not convenient, HT
provides the repeat.uv.length
parameter to resolve this problem, and by setting this parameter, the tile will automatically adjusts the number of tiles based on the size of the graphic, and also with shape3d.top.uv.scale
and shape3d.top.bottom.scale
parameters are superimposed, and of course, in most cases, if repeat.uv.length
is set, you do not need to set shape3d.top.uv.scale
and shape3d.top.bottom.scale
parameter.
ht.Shape
datas when the value of thickness
property is more than 0
often used to render a wall effect of the polygon model, this type of tall
attribute determines the height of the wall, thickness
represents wall thickness, usually set the wall on the sea level through wall.setElevation(wall.getTall()/2)
.
In a wall type, the model is equivalent to a linear of hexahedron, so it can be controlled by the all.*
, left.*
or right.*
, etc. parameters of hexahedron, refer to 3D Manual Cube Chapeter
ht.Shape
data is presented as the model effect of the cylinder pipe when the shape3d
attribute is cylinder
, tall
and thickness
determine the width and height value of the cylinder section, and when the tall
and thickness
values are presented as rounded slices, the direction of the pipeline is determined by points
and segments
.
The pipeline is controlled the top parameters by shape3d.top.*
, shape3d.bottom.*
controls the bottom surface parameters, shape3d.*
to control the middle part of the pipeline's direction.
The effect of a hollow pipe can be achieved by setting shape3d.top.visible
and shape3d.bottom.visible
to false
.
The types described above are based on the 2D point information of {x: 10, y: 20}
to describe the graphic trend, ht.Polyline
inherits from ht.Shape
, support {x: 10, y: 20, e: 30}
format of 3D space point description, if e
value is empty then take elevation
elevation value, modify ht.Polyline
elevation
and tall
values will automatically adjust the e
value in the points
of vertex, and the same points
vertex information changes are synchronized with the ht.Polyline
elevation
and tall
values.
x
Represents the 3D x
axis coordinatesy
Represents the 3D z
axis coordinates, refer to 3D Manuale
Represents the 3D y
axis coordinates, can be referred to briefly as elevation
, represents the altitude of the 3D y
axisht.Polyline
also supports the segments
parameters introduced in the Basic Properties section, which extends from 2D planar curves to 3D spatial curve effects.
ht.Polyline
closes the function of setRotationX
, setRotationY
, setRotationZ
and setClosePath
.
ht.Edge
and ht.Polyline
is very similar in showing effect, but ht.Edge
start and end points come from the source
and target
nodes, while ht.Edge
edge.type
attribute is points
, edge.points
and edge.segments
correspond to ht.Polyline
points
and segments
attributes, the vertex information of edge.points
can also be a 3D vertex format for {x: 10, y: *, e: 30}
, where the e
value is null to represent 0
.
ht.Edge
and ht.Polyline
has two ways of showing, the default display as a normal wireframe effect, when shape3d
set to cylinder
is displayed as the effect of the 3D pipeline, HT
through the differential segment to achieve the curve, so to achieve a higher equalization curve effect, both ways can be passed shape3d.resolution
control curve differential segment number.
Normal wireframe effect:
ht.Edge
Controls the width through edge.width
ht.Edge
Controls the color through edge.color
ht.Edge
Controls the color through edge.gradient.color
ht.Polyline
Controls the width through shape.border.width
ht.Polyline
Controls the color through shape.border.color
ht.Polyline
Controls the gradient through shape.border.gradient.color
The effect of the spatial pipeline
ht.Edge
Controls the width through edge.width
ht.Polyline
Controls the width through thickness
ht.Edge
and ht.Polyline
Control the color, tile and etc. style parameters through shape3d.*
ht.Edge
andht.Polyline
Can be controlled by shape3d.side
to control the number of pipe sections, as set to 6
, then shown as cube cross-sectionht.Edge
and ht.Polyline
Control the angle of the starting edge of the pipe section through shape3d.angle
ht.Edge
and ht.Polyline
Control the cross angle of the pipe cross-section through shape3d.sweep.angle
, the default is 2 PIht.Edge
and ht.Polyline
Control the number of times the tile is automatically tiled in the direction of the pipeline by repeat.uv.length
ht.Edge
and ht.Polyline
Control the start and end parts by shape3d.top.cap
and shape3d.bottom.cap
, the value is as follows:undefined
: The default value, which means that the hollow is not closedflat
: Represents a plane to be closedround
: Closed on behalf of a circular bodyEdge
and Polyline
in the ordinary wireframe effect can realize the function of dashed line, there are two kinds of dashed effect:
Alternating between hollow and solid:
ht.Edge
Controls dashed mode by edge.pattern
, the default is NULL, sets to [20, 10]
represents a length of 20
of the solid line, a length of 10
of the hollow, repeated alternatinght.Polyline
Controls dashed mode by shape.border.pattern
, the default is empty, set to [20, 10]
Represents a length of 20
of the solid line, a length of 10
of the hollow, repeated alternating
Alternating colors:
ht.Edge
Controls whether to enable color alternating dashes by the edge.dash
, the default is `falseht.Edge
Controls dashed mode by edge.dash.pattern
, the default is [16, 16]
represents length 16
of edge.dash.color
color, and length 16
of edge.color
colors repeat alternateht.Polyline
Controls whether to turn on color alternating dashes by shape.dash
, the default is false
ht.Polyline
Controls the dash mode by shape.dash.pattern
, the default is [16, 16]
represents the length 16
of the shape.dash.color
color, and the length 16
of shape.border.color
alternating colors
Graph3dView
closes the dashed line by default, if you to start the dashed line drawing function throughgraph3dView.setDashDisabled(false)
.
Host section describes ht.Node
can be adsorbed to ht.Shape
type segment, when introducing ht-modeling.js after the modeling expansion package is inherited, through the ht.Node
CSGNode
, and inherits from ht.Shape
ht.CSGShape
, can realize the effect that the polygon been hollowed.
The above example will
attach.thickness
set to1.001
, the height is set tosetTall(80.001)
, where the mantissa0.001
is the size reserved for avoiding the error of thejs
floating-point operation.
CSGNode
attach.operation
property defaults to subtract
, which represents the hollow of the CSGNode
and CSGShape
type of host
datas, in the example by setting 3d.visible
to false
hides the CSGNode
for hollowing out, but for the type of doors and windows, in addition to the use of windows and doors model hollowed out, but also need to retain the model of doors and windows, and doors and windows are generally thicker than the wall, but if attach.thickness
is less than 1
, you cannot chisel through the wall thickness, for this Modeling Expansion Pack also provides an DoorWindow
type of data that facilitates users to build models of door and window types, and DoorWindow
type datas provide dw.s3
parameter, which defaults to [0.999, 0.999, 0.5]
, represents a model that is actually displayed on the 3D
interface and then zooms in on the size of the dw.s3
again, so that attach.thickness
continues to keep the 1.001
that can be worn.
The above mentioned Floor Type, Wall Type and Pipe Type three types are described by the 2D point information of {x: 10, y: 20}
, and 2D y
coordinates are mapped to 3D z
coordinates the conversion relationship can refer to 3D Manual.
But all three types support ht.Shape
rotationX
, rotationY
and rotationZ
space rotation function, by setting the rotation parameter can achieve the erection effect.
The above example can realize the special effect of the horizontal flow of the pipe and the rotation of cross-section direction by changing the
shape3d.uv.offset
parameter.