Index
Vector is the vector shape's abbreviation in HT for Web
, common png
and jpg
raster graphic to describe shape by save every data color value, if the image build by this way, there are problems with blurred graphic, jagged lines, etc., while stretching to zoom in and zoom out. But vector graphics describes image by points, lines and polygon, it is therefore consistent in the accuracy of infinitely zooming images.
In HT for Web
, all the places using raster graphic can be replaced by vector shape, such as the data's image TreeView
and TableView
in GraphView
component, even the whole system interface build by HT
framework can achieve overall vectorization, so that the zoom out data in GraphView
component will be distortion, and don't need to provide different size images for Retina
display screen, in the time of multiple mobile devicePixelRatio, to achieve the perfect cross-platform, vector is the most costdown solution.
Data
.JSON
code much more intuitively, and support importing and exporting features for JSON
format data.Vector uses JSON
format to describe, and can be used by the same way like raster graphic, registered by ht.Default.setImage('hightopo', jsonObject)
, for using setting the registered image name to the data, like node.setImage('hightopo')
and node.setIcon('hightopo')
, etc.
Vector's json
describe must include width
, height
and comps
parameter information:
width
Vector shape's widthheight
Vector shape's heightcomps
Vector shape's component Array
, each array object is a independence Component Type, array's order is the component draw order. Supporting the following option parameters information at the same time:
visible
Whether visible or not, the default value is true
opacity
Opacity, the default value is 1
, the value range of the desirable is from 0
to 1
color
Dyed color, if set, the vector's drawing content will be mixed with this colorclip
To clip drawing area, can be set by two ways: boolean
, control whether to clip the beyond content which is size by width
and height
, the default value false
means not to clip.function
, can use canvas
to draw, to achieve custom clipping any shape's effects. The following example defined a vector shape named sunrise
, with a width of 220
and a height of 150
, comps
defined three type: shape
component types.
ht.Default.setImage('sunrise', {
width: 220,
height: 150,
comps: [
{
type: 'shape',
points: [10, 110, 10, 10, 210, 10, 210, 110],
segments: [1, 4],
background: 'yellow',
gradient: 'linear.north'
},
{
type: 'shape',
shadow: true,
points: [30, 10, 30, 110, 30, 60, 90, 60, 90, 10,
90, 110, 130, 10, 190, 10, 160, 10, 160, 110
],
segments: [
1, 2, 1, 2, 1, 2, 1, 2, 1, 2
],
borderWidth: 10,
borderColor: '#1ABC9C',
borderCap: 'round'
},
{
type: 'shape',
points: [10, 130, 35, 120, 60, 130, 85, 140,
110, 130, 135, 120, 160, 130, 185, 140, 210, 130
],
segments: [
1, 3, 3, 3, 3
],
borderWidth: 2,
borderColor: '#3498DB'
}
]
});
var node = new ht.Node();
node.setPosition(160, 110);
node.setImage('sunrise');
dataModel.add(node);
The following code snippet displays the way to use nesting vector shape, while defined group-sunrise
vector, use type: image
to set image's type, point to the vector shape defined by name: sunrise
, this example defined four nesting sunrise
vector, set clip: true
, even though the sunrise
vector in the top right corner is out of the area, the exceed content will be clipped.
ht.Default.setImage('group-sunrise', {
width: 240,
height: 160,
clip: true,
color: 'red',
comps: [
{
type: 'image',
name: 'sunrise',
rect: [0, 0, 120, 80],
opacity: 0.3
},
{
type: 'image',
name: 'sunrise',
rect: [120, 0, 120, 80],
rotation: Math.PI / 4
},
{
type: 'image',
name: 'sunrise',
rect: [0, 80, 120, 80],
shadow: true
},
{
type: 'image',
name: 'sunrise',
rect: [120, 80, 120, 80]
}
]
});
The example defined a polygon cloud cloud
, then defined cloud-rect
and cloud-oval
nesting and reused the cloud
. Using clip
to resolve the problem of exceeding context, making a circle shape by clip
function.
ht.Default.setImage('cloud-oval', {
width: 300,
height: 300,
clip: function (g, width, height, data) {
g.beginPath();
g.arc(width / 2, height / 2, Math.min(width, height) * 0.42, 0, Math.PI * 2, true);
g.clip();
},
comps: [
{
type: 'rect',
rect: [0, 0, 300, 300],
background: '#3498DB'
},
{
type: 'image',
name: 'cloud',
rect: [0, 0, 300, 300]
},
{
type: 'text',
text: new Date(),
rect: [0, 120, 300, 100],
color: '#34495E',
font: 'bold 18px Arial',
align: 'center'
}
]
});
Usually, different types of components have different attributes, but shadow, opacity, rotation, etc., are shared in common.
type
Component type, recently support those type: rect
Rectanglecircle
Circleoval
OvalroundRect
Rounded Rectanglestar
Startriangle
Trianglehexagon
Hexagonpentagon
Pentagondiamond
DiamondrightTriangle
Right-angle Triangleparallelogram
Parallelogramtrapezoid
Trapezoid polygon
Polygon arc
Circular Arc shape
Shapetext
Textimage
ImagepieChart
Pie ChartcolumnChart
HistogramstackedColumnChart
Stack HistogrampercentageColumnChart
Percent HistogramlineChart
DiagramSVGPath
SVGPathopacity
Opacity, value range from 0
to 1
, 0
is completely transparent, with 1
being opaquerotation
Rotation radian, the component is the circle to clockwise rotationshadow
Whether to display shadow, default value is false
shadowOffsetX
The horizontal offset of shadow, default value is 3
shadowOffsetY
The vertical offset of shadow, default value is 3
shadowBlur
The blur level of shadowshadowColor
The color of shadowvisible
Whether visible, default value is true
relative
The default value is false
, if the value is true
then rect
parameter is the ratio of width and height of vectorrect
Specify component to draw the rect boundary of vector, need to combine relative
parameter, there are two types of:[x, y, width, height]
is the four parameter way, represent upper left coordinate x
and y
, width and height width
and height
[position, width, height]
is the three parameter way, Position Manualsite type, width and height is width
and height
offsetX
For rect
defined rectangular area to continuing horizontal offset, this parameter use absolute value, don't need to concern about the relative
parameteroffsetY
For rect
defined a rectangular area to continuing vertical offset, this parameter use absolute value, don't need to concern about the relative
parameterThe following example set the opacity value to 0.5
, rotation Math.PI/4
radian, shadow, and the mix of the three parameters in the cloud vector.
ht.Default.setImage('cloud-all', {
width: 300,
height: 300,
comps: [
{
type: 'shape',
points: points,
segments: segments,
background: '#d6f0fd',
gradientColor: '#A6f0fd',
gradient: 'linear.north',
opacity: 0.5,
rotation: Math.PI/4,
shadow: true,
shadowColor: '#E74C3C',
shadowBlur: 12,
shadowOffsetX: 6,
shadowOffsetY: 6
}
]
});
Except for shape
type, the other parameters need to specify the rect
parameter, because shape
can confirm its component's position by points
and segments
, but shape
type can also set rect
parameter, like zoom in or zoom out shape
to the rect
center position, rect
set value [17,0.3,0.3]
in three parameter way, 17
means center Position Manual, 0.3
means width is the multiple of 0.3
to the vector's width and height.
The basic type of vector's parameters are one by one correspondence with Shape in Style, only delete .
to the Camel-case method.
Basic type:
rect
Rectanglecircle
Circleoval
OvalroundRect
Rounded Rectanglestar
Startriangle
Trianglehexagon
Hexagonpentagon
Pentagondiamond
DiamondrightTriangle
Right-angle Triangleparallelogram
Parallelogramtrapezoid
Trapezoidpolygon
Polygonarc
Circular ArcParameter Attribute:
borderWidth
The border width, default value is 0
, represent no borderborderColor
The border colorborderCap
The style of border end, optional parameter butt|round|square
borderJoin
Create the corner type of border when two lines intersect, optional parameter is bevel|round|miter
borderPattern
Display the type of dashed, Array
type, such as [5, 5]
depth
Only make an effect to rect
, the positive means raised, the negative means depression, the default value is 0
background
The background color, if null
then there is no background colorgradient
Progressive color type:shape.background
to be the background'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'
gradientColor
The background progressive color repeatImage
Fill the image which has repeat background, be caution the images in there are not support vectordash
Whether display dashed, the default value is false
dashPattern
The type of dashed, the default value is [16, 16]
dashOffset
The offset of dashed, the default value is 0
dashColor
The color of dasheddashWidth
The width of dashed, the default value is null, then us the value ofshape.border.width
dash3d
Whether to display the 3d
effect of dashed, the default value is false
dash3dColor
The color of 3d
effect in dashed, if empty, then use white, the line of 3d
effect show this colordash3dAccuracy
The accuracy of dashed in 3d
effect, the less of the value, the better 3d
progressive effect, but affect the performance, don't need to change in commoncornerRadius
This parameter specify the roundRect
type's circle radius, the default value is null then system automatic adjustment, can be set oppositive valuepolygonSide
Polygon variables, this parameter specify the variables of polygon
arcFrom
The arc start arc, the default value is Math.PI
arcTo
The arc end arc, the default value is 2*Math.PI
arcClose
Whether to close the arc, the default value is true
arcOval
Whether the arc is oval, the default value is false
shape
type, parameters in Basic Type can also be used in polygon, polygon through points's
Array
to specified each point's position, points
use the way [x1, y1, x2, y2, x3, y3, ...]
to save point coordinate. Polygon of a curve can be described by segments's
Array
, segments
use [1, 2, 1, 3 ...]
to describe every segment:
moveTo
, take 1
point, means the start of a new pathlineTo
, take 1
point, means from the last final point link to this pointquadraticCurveTo
, take 2
point, the first point is the curve control point, the second point is the end of the curve pointbezierCurveTo
, take 3
point, the first and the second point are the curve control point, and the third point is the end of the curveclosePath
, take none point, means this path draw is over, and link to the begin of the pathThe closed polygon can be set closePath
attribute except for setting segments
attribute:
* closePath
Gets and sets whether to close the polygon, the default value is false
, if set, there is no need to set the segments
attribute
ht.Default.setImage('shape', {
width: 100,
height: 50,
comps: [
{
type: 'shape',
borderWidth: 2,
borderColor: '#34495E',
background: '#40ACFF',
gradient: 'spread.vertical',
gradientColor: 'white',
points: [5, 25, 70, 25, 70, 5, 95, 25, 70, 45],
segments: [
1, // moveTo [5, 25]
2, // lineTo [70, 25]
1, // moveTo [70, 5]
2, // lineTo [95, 25]
2, // lineTo [70, 45]
5] // closePath to [70, 5]
}
]
});
border
Border similar, is to draw the specified rectangle's inside border, using this type to draw area will not beyond the rectangle's border
color
The border color
width
The border width
text
Text type, using to show number or name, etc., description information.
align
The horizontal of text drawing in the rectangle area, can be set as: left
, center
or right
vAlign
The vertical of text drawing in the rectangle area, can be set as: top
, middle
or bottom
color
The text colorfont
The text fontimage
Image type has two kinds of usages, one is traditional raster bitmap can be introduced, to achieve the mixed of vector and traditional image, the other one is to achieve infinite nesting and reuse feature through the bind vector in image
, the register of image you can refer to Beginner Manual
name
Image's name, relative the register image or vector name by ht.Default.setImage
color
The rendering color, HT
will automatically use this color to rendering the imagestretch
How can image draw the type of specified rectangle area: fill
Image fill the whole rectangle area, if the rate of width height is not the same as the rectangle, it will cause the image to stretch distorteduniform
Image always keep the same original width height ratio, and keep to fill the whole rectangle areacenterUniform
When rectangle area is bigger than the size of the image, then use original size draw in the center site, if there is not enough space then use uniform
to draw
Pie chart type is pieChart
:
values
: Type of Array
, including the number of number
colors
: Type of Array
, including the color of string
. If empty, the system will use the default color of the array ht.Color.chart
label
: Whether show the text information or not: boolean
type: If it's true
, display the value
, otherwise not to displayfunction
type: function (value, index, sum, data)
, the function will return the needed contentvalue
: The currently valueindex
: The currently indexsum
: The summary of the values
data
: The currently related Data
objectlabelColor
: The color of the textlabelFont
: The font of the texthollow
: boolean
type, decided whether to be hollowed, the default value is false
startAngle
: The type of number
means the begin arc, the default value is 0
The type of bar chart is columnChart
:
label
: Whether to show the text information: boolean
type: If it's true
then display the value
, otherwise not to displayfunction
type: function (value, index, sum, data)
, the function will return the needed contentvalue
: The currently valueindex
: The currently indexsum
: The summary of values
data
: The currently related Data
objectlabelColor
: The color of the textlabelFont
: The font of the textseries
: Series, specified value and color of each series, etc., information through Array
values
: Array
type, including the value of number
colors
: Array
type, including the color of string
color
: The value of color, the priority is lower than colors
minValue
: The minimum value, the default value is 0
maxValue
: The maximum, if empty then system will automatically calculateThe following example is the situation when series
only has one data, in common, set colors
to achieve different color in column
The following example is the situation when series
has multiple datas, in common, set color
rather than set colors
to achieve different series have different color
The type of stacked bar chart is stackedColumnChart
:
label
: Whether to show text information: boolean
type: if it's true
then display value
, otherwise not to displayfunction
type: function (value, index, sum, data)
, the function will return the needed contentvalue
: The currently valueindex
: The currently indexsum
: The summary of values
data
: The currently related Data
objectlabelColor
: The color of the textlabelFont
: The font of the textseries
: Series, specified every series' value and color, etc., information through Array
values
: Array
type, including the value of number
colors
: Array
type, including the color of string
color
: The value of color, the priority is lower than colors
maxValue
: The maximum value, if empty then system will automatically calculateThe type of percentage bar chart is percentageColumnChart
:
label
: Whether to show text information: boolean
type: if it's true
then display value
, otherwise not to displayfunction
type: function (value, index, sum, data)
, the function will return the needed contentvalue
: The currently valueindex
: The currently indexsum
: The summary of values
data
: The currently related Data
objectlabelColor
: The color of the textlabelFont
: The font of the textseries
: Series, specified each series' value and color, etc., information through Array
values
: Array
type, including the value of number
colors
: Array
type, including the color of string
color
: The value of color, the priority is lower than colors
The type of curve is lineChart
:
label
: Whether to show text information: boolean
type: if it's true
then display value
, otherwise not to displayfunction
type: function (value, index, sum, data)
, the function will return the needed contentvalue
: The currently valueindex
: The currently indexsum
: The summary of values
data
: The currently related Data
objectlabelColor
: The color of the textlabelFont
: The font of the textseries
: Series, specified every series' value and color, etc., information through Array
values
: Array
type, including the value of number
colors
: Array
type, including the color of string
color
: The value of color, the priority is lower than colors
minValue
: The minimum value, the default value is 0
maxValue
: The maximum value, if empty then system will automatically calculatelinePoint
: Draw an inflection point: boolean
type: if true
, display circle, otherwise not to displayfunction
type: function (g, x, y, color, index, serie, data)
, draw an inflection point in the functiong
: Paintbrushx
: The currently inflection point's abscissay
: The currently inflection point's ordinatecolor
: The currently series' line colorindex
: The currently indexserie
: The currently seriedata
: The currently related Data
objectlineWidth
: Line width, the default value is 2
line3d
: Whether to display 3d
line effectExcepet for the predefined component type in HT
, you can customize to expend type, there are two ways to customize:
type
to draw funciton: function (g, rect, comp, data, view){}
ht.Default.setCompType(name, funtion(g, rect, comp, data, view){})
, set vector's type
to corresponding registered nameRegistered ht.Default.setCompType
in ahead is benefit for data model to saving serialization, and be benefit for reusing at the same time
The following example customizes a clock, the clock's vector is build by three part:
circle
type, draw a round with yellow backgroundtype
to clock-face
, and drawn 60
scalestype
as a draw function, used data.a(date)
to get the information of time, minutes and secondsht.Default.setCompType('clock-face', function (g, rect, comp, data, view) {
var cx = rect.x + rect.width / 2;
var cy = rect.y + rect.height / 2;
var theta = 0;
var r = Math.min(rect.width, rect.height)/2 * 0.92;
g.strokeStyle = "#137";
for (var i = 0; i < 60; i++) {
g.beginPath();
g.arc(
cx + Math.cos(theta) * r,
cy + Math.sin(theta) * r,
i % 5 === 0 ? 4 : 1,
0, Math.PI * 2, true);
g.closePath();
g.lineWidth = i % 5 === 0 ? 2 : 1;
g.stroke();
theta = theta + (6 * Math.PI / 180);
}
});
ht.Default.setCompType
supports Canvas
for developers, and avoids rewriting UI
, it will achieve colorful gorgeous effect while combined it with animation:
SVGPath
type, the parameters in Basic Type can also use in SVG path, specified path information that conforms SVG
specification through path
, the format of path
can refer to here
User SVGPath
type need to do lots of resolution work while drawing, so we should be avoid to overuse this type, especially in the occasion of sensitive performance
Refer to Databinding Manual