HT for Web Vector Manual

Index

Overview

Vector

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.

Purpose

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.

Characteristic

Format

Whole Attribute

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:

Supporting the following option parameters information at the same time:

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'
        }
    ]
});

Component Attribute

Usually, different types of components have different attributes, but shadow, opacity, rotation, etc., are shared in common.

The 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.

Component Type

Basic Type

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:

Parameter Attribute:

Shape

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:

The 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 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 Text type, using to show number or name, etc., description information.

Image

image 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

Pie Chart

Pie chart type is pieChart:

Bar Chart

The type of bar chart is columnChart:

The 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

Stacked Bar Chart

The type of stacked bar chart is stackedColumnChart:

Percentage Bar Chart

The type of percentage bar chart is percentageColumnChart:

Curve

The type of curve is lineChart:

Custom Define

Excepet for the predefined component type in HT, you can customize to expend type, there are two ways to customize:

Registered 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: 

ht.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

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

Databinding

Refer to Databinding Manual

Welcome to contact us service@hightopo.com