Index

• Overview
• 2D
  • Basic Attribute
  • Style Attribute
  • Pipeline difference
  • Host
• 3D
  • Floor Type
  • Wall Type
  • Pipeline Type
  • Spatial Pipeline
  • CSG Shape
  • Rotation

Overview

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.

2D

Basic Attribute

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:

• 1: moveTo which occupies 1 point information, represents the starting point of a new path
• 2: lineTo which occupies 1 point information, represents the connection from the last point to this point
• 3: quadraticCurveTo occupies 2 point information, the first point as a curve control point, the second point as the end of the curve
• 4: bezierCurveTo occupies 3 point information, the first and second points as the curve control points, and the third point as the end point of a curve
• 5: closePath which does not occupy point information, represents the end of the path drawing and closes to the starting point of the path

ht.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 null
• addPoint(point, index) Inserts new points at the specified index position, if the index is empty then inserts into the last
• setPoints(index, point) Replaces new points at the specified index location
• removePointAt(index) Deletes the point at the specified index location
• toPoints() Copy a new ht.List type vertex array
• segments's Attribute is an Array or ht.List type that describes the point join style and the array element is an integer value:
  • 1: moveTo which occupies 1 point information, represents the starting point of a new path
  • 2: lineTo which occupies 1 point information, represents the connection from the last point to this point
  • 3: quadraticCurveTo occupies 2 point information, the first point as a curve control point, the second point as the end of the curve
  • 4: bezierCurveTo occupies 3 point information, the first and second points as the curve control points, and the third point as the end point of a curve
  • 5: closePath which does not occupy point information, represents the end of the path drawing and closes to the starting point of the path
• isClosePath() 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 point
• getLength(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 of points value and width, height and position these three size and position information exist correlation, that means modifying points will affect width, height and position corresponding value, the same changes to width, height and position values also affect points information.

Style Attribute

ht.Shape related style properties:

• shape.border.width Border width, the default value of 0 means no borders are drawn
• shape.border.color Border color
• shape.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 background
• shape.gradient Gradient color type:
  • The null representation does not draw an gradient color effect, and only fills the background with shape.background solid color.
  • Support type '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 color
• shape.repeat.image Fills a picture of a repeating background, noting that the image here does not support vectors
• shape.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 color
• shape.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 rendered
• shape.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

Host

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 index
• attach.offset: The default value is 0, which is specified to adsorb in ht.Shape data offset position of the segment where the data is located
• attach.offset.relative: The default value is false, if true the offset represents the length of the line segment multiplied by attach.offset value
• attach.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 segment
• attach.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 support segments be set to curve, nor does it consider ht.Shape sets the factor of rotation value rotation, when the data is adsorbed to ht.Shape segment, its rotation and position positions will be based on ht.Shape automatically changes in sync; if the attach.thickness value is set, the height of the data is automatically adjusted according to the host thickness value, which does not require user settings in common.

3D

Floor Type

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.

Floor Type

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

Pipeline Type

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.

Spatial Pipeline

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 coordinates
• y Represents the 3D z axis coordinates, refer to 3D Manual
• e Represents the 3D y axis coordinates, can be referred to briefly as elevation, represents the altitude of the 3D y axis

ht.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-section
  • ht.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 PI
  • ht.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 closed
    • flat: Represents a plane to be closed
    • round: Closed on behalf of a circular body

Edge 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 alternating

  • ht.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 `false
  • ht.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 alternate
  • ht.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 through graph3dView.setDashDisabled(false).

Hollow Wall

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 to 1.001, the height is set to setTall(80.001), where the mantissa 0.001 is the size reserved for avoiding the error of the js 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.

Rotation

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.