索引
矢量在HT for Web
中是矢量图形的简称,常见的png
和jpg
这类的栅格位图,
通过存储每个像素的颜色信息来描述图形,这种方式的图片在拉伸放大或缩小时会出现图形模糊,线条变粗出现锯齿等问题。
而矢量图片通过点、线和多边形来描述图形,因此在无限放大和缩小图片的情况下依然能保持一致的精确度。
在HT for Web
中所有能用栅格位图的地方都可用矢量图形替代,例如GraphView
组件上的图元图片,TreeView
和TableView
上的图标等,
甚至整个HT
框架做出来的系统界面可以实现全矢量化,这样GraphView
组件上的图元缩放都不会失真,并且不再需要为Retina
显示屏提供不同尺寸的图片,
在devicePixelRatio多样化的移动时代,
要实现完美的跨平台,矢量可能是的最低成本的解决方案。
Data
进行数据属性动态绑定JSON
代码不直观不易修改问题,可导入导出JSON
格式数据矢量采用JSON
格式描述,使用方式和普通的栅格位图一致,通过ht.Default.setImage('hightopo', jsonObject)
进行注册,
使用是将相应图片注册名设置到数据模型即可,如node.setImage('hightopo')
和node.setIcon('hightopo')
等。
矢量json
描述必需包含width
、height
和comps
参数信息:
width
矢量图形的宽度height
矢量图形的高度comps
矢量图形的组件Array
数组,每个数组对象为一个独立的组件类型,数组的顺序为组件绘制先后顺序同时可设置以下可选参数信息:
visible
是否可见,默认为true
opacity
透明度,默认为1
,可取值范围0~1
color
染色颜色,设置上该颜色后矢量内部绘制内容将会融合该染色值blendMode
染色模式,染色时颜色的计算方式multiply
相乘,默认值override
覆盖override_rgb
覆盖rgb,即覆盖除透明度外的颜色override_a
覆盖a,即覆盖透明度clip
用于裁剪绘制区域,可设置两种类型:boolean
类型,控制绘制时超出width
和height
区域的内容是否被裁剪,默认为false
不裁剪function
类型,可利用Canvas
画笔绘制,实现自定义裁剪任意形状的效果fitSize
适配大小,默认false
,矢量最终绘制的大小属性决定于引用节点,组件计算大小时,是拉伸还是重置大小的方式,false
拉伸,此模式下会导致组件图形被拉伸,true
重置大小,为true
时,如果组件中有布局属性会生效interactive
可交互,是否响on开头的的交互事件,默认false
scrollable
可滚动,设置为可滚动后,鼠标滚轮在该节点上操作不再触发视图的滚动交互动作,默认false
boundExtend
边界扩充,用于扩大矢量绘制范围,默认0
不扩充disableSelectedBorder
隐藏选中边框pixelPerfect
像素精确,图元在2D
下,透明区域是否忽略选中图元,默认为true
,表示忽略选中visible
可见,图元在2D
下,是否可见,默认为true
,表示可见state
图标默认状态,默认为空,可参考状态renderHTML
渲染元素,详见cacheRule
矢量缓存规则,详见以下例子定义了一个名为sunrise
的矢量图形,宽度220
,高度150
,comps
定义了三个type: shape
类型组件。
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);
以下的代码片段展示的是嵌套矢量图形的用法,在定义group-sunrise
矢量时,通过type: 'image'
的图片类型,
指向了name: 'sunrise'
的以定义矢量图形,该例子分别定义了四个嵌套的sunrise
矢量,设置了clip: true
,
这样右上角的sunrise
矢量虽然旋转后超出了宽高设置的区域,但超出的绘制内容会被裁剪掉。
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]
}
]
});
示例定义了一个cloud
的多边形云图效果,接下来定义的cloud-rect
和cloud-oval
分别嵌套复用了cloud
的云图。
采用了clip
为true
进行矩形裁剪解决了文字内容超出宽高区域的问题,通过自定义clip
函数达到裁剪出圆形效果。
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'
}
]
});
组件的属性一般根据组件类型的不同而设置,而阴影、透明度和旋转等属性是所有类型都具备可设置的参数。
type
组件类型,目前支持类型如下:rect
矩形circle
圆形oval
椭圆形roundRect
四周圆角矩形star
星形形triangle
三角形hexagon
六边形pentagon
五边形diamond
钻石形rightTriangle
直角三角形parallelogram
平行四边形trapezoid
梯形 polygon
多边形 arc
圆弧形 shape
多边形text
文本image
图片pieChart
饼图columnChart
柱状图stackedColumnChart
堆栈柱状图percentageColumnChart
百分比柱状图lineChart
曲线图SVGPath
SVGPathopacity
透明度,取值范围0
~1
,0
则完全透明,1
则保持原本颜色rotation
旋转弧度,以组件的中心进行顺时针旋转shadow
是否显示阴影,默认值为false
shadowOffsetX
阴影的水平偏移量,默认值为3
shadowOffsetY
阴影的垂直偏移量,默认值为3
shadowBlur
阴影的模糊级别shadowColor
阴影的颜色visible
是否可见,默认值为true
relative
默认为false
采用绝对值,若为true
则rect
参数为相对于矢量的宽高比rect
指定组件绘制在矢量中的矩形边界,需结合relative
参数,有两种格式类型:[x, y, width, height]
四个参数方式,分别代表左上角坐标x
和y
,以及宽高width
和height
[position, width, height]
三个参数方式,position位置类型,以及宽高width
和height
offsetX
对rect
定义的矩形区域再进行水平方向的偏移,该参数采用绝对值,不考虑relative
参数offsetY
对rect
定义的矩形区域再进行垂直方向的偏移,该参数采用绝对值,不考虑relative
参数anchorX
对rect
定义的矩形区域的水平方向锚点,默认为0.5
anchorY
对rect
定义的矩形区域的垂直方向锚点,默认为0.5
state
组件显示的状态值,如果不设置显示隐藏不会受到状态机制影响,可参考状态以下例子分别对云图矢量设置了透明度0.5
,旋转了Math.PI/4
弧度,设置了阴影,以及将三种参数组合的效果。
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
}
]
});
除了shape
类型外其他类型组件都需要指定rect
参数,因为shape
自身通过points
和segments
信息已经能确定自身组件位置,
但shape
类型依然可以设置rect
参数,相当于将shape
压缩或拉伸到填充入指定的rect
区域,以下例子中定义的cloud
矢量,
为两个shape
构成,第一个shape
未指定rect
,第二个shape
指定的rect
将云缩小定位到中心区域,其rect
设置时采用了
[17, 0.3, 0.3]
的三参数方式,其中17
代表中心position位置,
0.3
代表宽度为矢量宽和高的0.3
倍大小。
组件旋转和缩放的中心点是由锚点anchorX
和anchorY
决定的,与节点锚点不同的是,这里组件绘制区域是由rect
决定,锚点不会影响最终的绘制位置。
矢量的基本类型与style的shape参数是完全一一对应,
只是将style
中的名称改成骆驼式命名法去掉了.
分隔符。
基本类型:
rect
矩形circle
圆形oval
椭圆形roundRect
四周圆角矩形star
星形形triangle
三角形hexagon
六边形pentagon
五边形diamond
钻石形rightTriangle
直角三角形parallelogram
平行四边形trapezoid
梯形 polygon
多边形 arc
圆弧形 参数属性:
borderWidth
边框宽度,默认值为0
代表不绘制边框borderColor
边框颜色borderCap
边框末端线帽的样式,可选参数为butt|round|square
borderJoin
边框当两条线交汇时创建边角的类型,可选参数为bevel|round|miter
borderPattern
显示虚线样式,Array
类型,例如[5, 5]
depth
只对rect
类型起作用,正值代表凸起,负值代表凹陷,默认值为0
background
背景填充颜色,为null
代表不填充背景gradient
渐近色类型:shape.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
背景渐近颜色 repeatImage
填充重复背景的图片,注意这里的图片不支持矢量dash
是否显示虚线,默认值为false
dashPattern
虚线样式,默认值为[16, 16]
dashOffset
虚线偏移,默认值为0
dashColor
虚线颜色dashWidth
虚线宽度,默认为空代表采用shape.border.width
值 dash3d
虚线是否显示3d
效果,默认值为false
dash3dColor
虚线3d
效果颜色,为空采用默认白色,呈现3d
效果时连线的中间部分为该颜色dash3dAccuracy
虚线3d
效果精确度,该值越小3d
渐进效果越好但影响性能,一般情况无需修改 cornerRadius
该参数指定roundRect
类型的圆角半径,默认为空系统自动调节,可设置正数值polygonSide
多边形变数,该参数指定polygon
类型的变数arcFrom
圆弧形起始弧度,默认值为Math.PI
arcTo
圆弧形结束弧度,默认值为2*Math.PI
arcClose
圆弧形是否闭合,默认为true
arcOval
圆弧形是否为椭圆,默认为false
shape
类型,基本类型的参数也都适用于多边形,多边形通过points
的Array
数组指定每个点信息,
points
以[x1, y1, x2, y2, x3, y3, ...]
的方式存储点坐标。曲线的多边形可通过segments
的Array
数组来描述,
segment
以[1, 2, 1, 3 ...]
的方式描述每个线段:
moveTo
,占用1
个点信息,代表一个新路径的起点lineTo
,占用1
个点信息,代表从上次最后点连接到该点quadraticCurveTo
,占用2
个点信息,第一个点作为曲线控制点,第二个点作为曲线结束点bezierCurveTo
,占用3
个点信息,第一和第二个点作为曲线控制点,第三个点作为曲线结束点closePath
,不占用点信息,代表本次路径绘制结束,并闭合到路径的起始点 对比闭合多边形除了设置segmennts
参数外,还可以设置closePath
属性:
* closePath
获取和设置多边形是否闭合,默认为false
,对闭合直线采用这种方式,无需设置segments
参数
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
边框类似,用于绘制指定矩形的内边框,该类型的绘制区域不会超出矩形边界
color
边框颜色
width
边框宽度
text
文本类型,用于呈现数值或名称等描述信息。
align
文本绘制在矩形区域的水平方向对齐方式,可设置为:left
、center
或right
vAlign
文本绘制在矩形区域的垂直方向对齐方式,可设置为:top
、middle
或bottom
color
文本颜色font
文本字体image
图片类型有两种用处,一是可引入传统的栅格位图,达到矢量和传统图片的融合,
二时通过image
类型嵌入已定义的矢量,形成无限嵌套效果和可复用的功能,
图片注册详见入门手册
name
图片名称,对应通过ht.Default.setImage
注册的图片或矢量图形名称。 color
渲染颜色,HT
系统会自动采用该颜色对图片内容进行渲染stretch
图片如何绘制在指定矩形区域类型: fill
图片填充满整个矩形区域,如果图片宽高比例和矩形不一致会导致图片拉伸失真uniform
图片始终保持原始宽高比例不变化,并尽量填充满矩形区域centerUniform
当矩形区域大于图片尺寸时图片以原始大小绘制在中心位置,空间不够时采用uniform
的绘制方式
饼图类型为pieChart
:
values
:Array
类型数组,存储number
类型数值colors
:Array
类型数组,存储string
类型颜色。如果未设置,则系统会使用ht.Color.chart
数组的默认颜色label
:是否显示文字信息:boolean
类型:为true
显示value
信息,false
不显示function
类型:function(value, index, sum, data)
,函数返回需要显示的文字value
:当前数值index
:当前索引sum
:values
的总数值data
:当前关联的Data
对象labelColor
:文字颜色labelFont
:文字字体hollow
:boolean
类型,决定是否中空即圆环效果,默认为false
startAngle
:number
类型代表起始弧度,默认为0
柱状图类型为columnChart
:
label
:是否显示文字信息:boolean
类型:为true
显示value
信息,false
不显示function
类型:function(value, index, serie, data)
,函数返回需要显示的文字value
:当前数值index
:当前索引serie
:当前系列data
:当前关联的Data
对象labelColor
:文字颜色labelFont
:文字字体series
:系列,以Array
数组的方式指定每个系列的数值和颜色等信息values
:Array
类型数组,存储number
类型数值colors
:Array
类型数组,存储string
类型颜色color
:颜色值,其优先级低于colors
minValue
:最小值,如果未设置默认为0
maxValue
:最大值,如果未设置则系统自动计算调整以下例子为serie
只有一组数据的情况,这种情况下一般会设置colors
达到不同column不同颜色。
以下例子为serie
有多组数据的情况,这种情况下一般会设置color
而不设置colors
,以达到不同系列不同颜色效果。
堆栈柱状图类型为stackedColumnChart
:
label
:是否显示文字信息:boolean
类型:为true
显示value
信息,false
不显示function
类型:function(value, index, serie, data)
,函数返回需要显示的文字value
:当前数值index
:当前索引serie
:当前系列data
:当前关联的Data
对象labelColor
:文字颜色labelFont
:文字字体series
:系列,以Array
数组的方式指定每个系列的数值和颜色等信息values
:Array
类型数组,存储number
类型数值colors
:Array
类型数组,存储string
类型颜色color
:颜色值,其优先级低于colors
maxValue
:最大值,如果未设置则系统自动计算调整百分比柱状图类型为percentageColumnChart
:
label
:是否显示文字信息:boolean
类型:为true
显示value
信息,false
不显示function
类型:function(value, index, serie, data)
,函数返回需要显示的文字value
:当前数值index
:当前索引serie
:当前系列data
:当前关联的Data
对象labelColor
:文字颜色labelFont
:文字字体series
:系列,以Array
数组的方式指定每个系列的数值和颜色等信息values
:Array
类型数组,存储number
类型数值colors
:Array
类型数组,存储string
类型颜色color
:颜色值,其优先级低于colors
曲线图类型为lineChart
:
label
:是否显示文字信息:boolean
类型:为true
显示value
信息,false
不显示function
类型:function(value, index, serie, data)
,函数返回需要显示的文字value
:当前数值index
:当前索引serie
:当前系列data
:当前关联的Data
对象labelColor
:文字颜色labelFont
:文字字体series
:系列,以Array
数组的方式指定每个系列的数值和颜色等信息values
:Array
类型数组,存储number
类型数值colors
:Array
类型数组,存储string
类型颜色color
:颜色值,其优先级低于colors
minValue
:最小值,如果未设置默认为0
maxValue
:最大值,如果未设置则系统自动计算调整linePoint
:绘制拐点效果:boolean
类型:为true
显示圆形观点信息,false
不显示function
类型:function(g, x, y, color, index, serie, data)
,函数内绘制拐点效果g
:画笔x
:当前拐点横坐标y
:当前拐点纵坐标color
:当前系列线颜色index
:当前值索引serie
:当前系列data
:当前关联Data
对象lineWidth
:线宽度,默认为2
line3d
:是否呈现3d
线效果除了HT
预定义的组件类型外,用户还可以自定义扩展类型,自定义有两种方式:
type
值设置成绘制函数:function(g, rect, comp, data, view){}
ht.Default.setCompType(name, funtion(g, rect, comp, data, view){})
注册组件类型,矢量type
值设置成相应的注册名先注册ht.Default.setCompType
的方式有利于数据模型存储序列化,同时也有利于复用。
以下示例自定义了一个时钟,该时钟的矢量由三部分组成:
circle
类型,绘制了圆形的黄色渐进背景作为底盘type
为clock-face
的类型,绘制了时钟的60
个边缘刻度type
设置为绘制函数,根据data.a('date')
上的时间信息绘制了时、分和秒针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);
}
});
SVGPath
类型,基本类型的参数也都适用于SVG路径,通过path
指定符合SVG
规范的路径信息,
path
的格式请参考这里
SVGPath
类型在绘制时要进行大量的解析工作,所以应该避免大量使用这种类型,尤其是在对性能敏感的场景中。
在HT
矢量中,如果使用了状态机制,每个组件都可以定义状态state
来决定自己在哪个状态下显示,节点状态由data.s('state')
决定,data.s('state')
为空时,会从整体属性上去获取默认状态值。可以重载gv.getState
自定义逻辑。如果组件不设置state
属性,则显示隐藏不会受到这一机制的影响,组件状态是一对多的,不同组件可以使用同一个状态值。gv.getState
默认逻辑如下
getState: function(data) {
var state = data.s('state');
if (state) return state;
// 从图标上查询获取默认值
var img = getImage(data.getImage());
if (!img) return null;
}
一个运用的例子
通过定义HT
矢量JSON
的renderHTML
函数属性,可实现在GraphView
拓扑图上,嵌入任意第三方HTML DOM
元素。HT
的图纸是Canvas
实现,renderHTML
的DOM
一定在Canvas
之上,使用renderHTML
的DOM
与常规Canvas
上绘制的图元不可能有层级控制可能性。renderHTML 的基本结构如下:
/**
* renderHTML 在图元属性变化后会被调用到,注意这个函数里面不要再改变 data 属性,更不要在这里起动画逻辑,改变数据要在运行时的外面代码进行
* @param {ht.Node} data [图元对象]
* @param {ht.graph.GraphView} gv [当前拓扑图组件]
* @param {object} cache [缓存对象,用于存在 html 元素和相关信息,避免重复构建]
* @return {HTMLElement} [要显示的 HTML 元素,或 HT 组件对象]
*/
renderHTML: function(data, gv, cache) {
if (!cache.htmlView) {
// 创建 HTML
}
// 数据驱动
return html;
}
返回的HTML
元素上有以下相关约定:
layoutHTML
布局函数,每次Node
图元被调用绘制刷新时调用,一般根据Node
的位置信息摆放HTML
元素onHTMLRemoved
删除回调,当HTML
元素要从拓扑图上删除时调用,一般用于释放销毁资源等处理工作onHTMLAdded
添加回调,当HTML
元素被添加到拓扑图上时调用,一般用于必须在父容器添加到界面才能进行的初始化工作autoAdjustIndex
默认为true
,当dom
元素数量、层级发生变化时会重新append
以保证层级跟 dataModel
一致,可以改为false
避免iframe
的自动刷新问题updateAppendMatrix
默认为false
,如果HTML
中有额外设置CSS3
变形,会导致交互位置出错的问题,设置为true
后HT
内会读取这些信息并合并到交互计算的矩阵中另外为了方便HTML
元素根据图元信息布局的函数,ht.graph.GraphView
上增加了layoutHTML
方法
/**
* @param {ht.Node} data 参考图元对象
* @param {HTMLElement} html 要布局的 HTML 元素,可传入 HT 组件对象
* @param {boolean} bound 默认为 false,HTML 元素完全重叠甚至被旋转图元,为 true 则根据图元矩形区域摆放
*
*/
graphView.layoutHTML(data, html, bound)
注意bound
为默认值false
时,图元是通过CSS
的transform
设置,实现和图元对象的完全重合,这种情况下拓扑图缩放时,HTML
元素会出现不清晰的问题。如果采用true
的布局方式,则图元不设置transform
参数,而通过设置top/left/width/height
进行布局,这种方式HTML
元素会保持清晰,但不具备旋转功能的效果
Canvas
绘制中,每帧绘制次数是影响2D
性能的一大因素之一,如果一个矢量有100个基本图形组件,不考虑矢量嵌套的情况下,绘制时相当于这个矢量需要进行100次绘制,然而目前主流的设备中,每帧大于3000次绘制就会感觉性能有所下降。HT
矢量中提供了一套缓存机制,可以根据一定逻辑将绘制结果保存在内存中,每次绘制时去找内存中缓存的图形信息,这样就只要进行一次绘制,可以大大提升了绘制性能,特别适用于有复杂矢量,同一个矢量被大量复用的2D
拓扑图中。
矢量cacheRule
属性,默认为false
,即不开启缓存。可以取值:
true
,开启缓存,第一次绘制时会缓存图形像素信息,以后每次绘制都绘制缓存的内容,适用于没有任何数据绑定、状态功能的矢量,即只有单一绘制结果的。function(data, view) {// TODO return key;}
,定义一个缓存规则,data
是当前数据节点,view
是当前视图,即graphView
, key
是用户根据规则返回,相当于一个绘制结果对应一个key
。注意:矢量缓存适用于一个矢量只有一种绘制结果,或者只有几种可枚举的绘制结果,建议在10种以内使用缓存功能。使用缓存后矢量在某些缩放比例下会有轻微的失真,所以缓存一般作为后期性能优化手段。另外,ht.Default
上也增加了setImageCacheRule
方法,可以让用户在代码中全局注册缓存的逻辑,这个方法更适用于项目已经完成要做后期优化,这样可以不用再去修改矢量内容,复杂的图纸运用,而不会因为定义在矢量上全局受影响,使用示例
/**
* key 可以是注册的矢量名或者矢量 JSON 地址,取值与 cacheRule 属性取值一致
*/
ht.Default.setImageCacheRule({
'symbols/test.json': true,
'symbols/test2.json': function(data, view) {
return data.a('status');
},
});
// 也可以是两个参数的形式
ht.Default.setImageCacheRule('symbols/test3.json', true);
可平移或缩放以下两个拓扑图对比缓存效果,左侧是未做缓存,右侧是加了缓存的。
详见数据绑定手册