zrender

zrender.dispose(zr)

参数

销毁 ZRender 实例。

名称 类型 默认值 描述
zr zrender   ZRender 实例,由 zrender.init 创建。不传则销毁全部。

返回值

类型:zrenderzrender 类。

相关

zrender.init

zrender.init(dom, opts)

得到一个 ZRender 的实例,实例属性及方法参见实例 API

参数

名称 类型 默认值 描述
dom HTMLElement   ZRender 容器,在调用该方法时,应该已有宽度和高度。
opts Object   配置项
opts.renderer string 'canvas' 渲染方式,支持:'canavs''svg''vml'
opts.devicePixelRatio number 2 画布大小与容器大小之比,仅当 renderer'canvas' 时有效。
opts.width number|string 'auto' 画布宽度,设为 'auto' 则根据 devicePixelRatio 与容器宽度自动计算。
opts.height number|string 'auto' 画布高度,设为 'auto' 则根据 devicePixelRatio 与容器高度自动计算。

返回值

类型:zrenderZRender 实例

相关

zrender.dispose

zrender.version

类型:'string',ZRender 版本号。

zrender.Animatable

支持动画的对象。

构造函数

zrender.Animatable()

zrender.Animatable.animate(path, loop)

创建一个动画对象。动画不会立即开始,如需立即开始,需调用 zrender.Animator.start

参数

名称 类型 默认值 描述
path string   对该对象的哪个元素执行动画,如 xxx.animate('a.b', true) 表示对 xxx.a.b (可能是一个 Object 类型)执行动画。
loop boolean false 是否循环动画。

返回值

动画对象,类型:Animator

例子

el.animate('style', false)
    .when(1000, {x: 10})
    .done(function () {
         // Animation done
    })
    .start()

zrender.Animatable.animateTo(target, time, delay, easing, callback, forceAnimate)

为属性设置动画。

部分参数可缺省,支持以下形式的调用:

参数

名称 类型 默认值 描述
target Object   设置动画的对象,应为 this 的属性。
time number 500 动画时长,单位毫秒。
delay number 0 动画延迟执行的时长,单位毫秒。
easing string 'linear' 缓动函数名称,支持的名称参见缓动函数
callback Function   动画执行完成后的回调函数。
forceAnimate boolean false 对于相同的属性,是否强制执行(也就是不直接结束动画)。

例子

// Animate position
el.animateTo({
    position: [10, 10]
}, function () {
    // done
});

// Animate shape, style and position in 100ms, delayed 100ms,
// with cubicOut easing
el.animateTo({
    shape: {
        width: 500
    },
    style: {
        fill: 'red'
    }
    position: [10, 10]
}, 100, 100, 'cubicOut', function () {
    // done
});

zrender.Animatable.stopAnimation(forwardToLast)

停止动画。

参数

名称 类型 默认值 描述
forwardToLast boolean false 是否将动画跳到最后一帧。

返回值

this

zrender.Animator

动画对象。

构造函数

zrender.Animator()

zrender.Animator.delay(time)

设置动画延迟开始的时间。

参数

名称 类型 默认值 描述
time number   延迟时长,单位毫秒。

返回值

this

zrender.Animator.done(callback)

设置动画结束的回调函数。

参数

名称 类型 默认值 描述
callback Function   动画结束的回调函数。

返回值

this

zrender.Animator.during(callback)

为关键帧添加回调函数,在关键帧运行后执行。

参数

名称 类型 默认值 描述
callback Function   关键帧回调函数。

返回值

this

zrender.Animator.isPaused()

获得动画是否处于暂停状态。

返回值

是否暂停,类型:boolean

相关

zrender.Animator.pausezrender.Animator.resume

zrender.Animator.pause()

暂停动画。

相关

zrender.Animator.resumezrender.Animator.isPaused

zrender.Animator.resume()

恢复动画。

相关

zrender.Animator.isPausedzrender.Animator.pause

zrender.Animator.start(easing)

开始执行动画。

参数

名称 类型 默认值 描述
easing string 'linear' 缓动函数名称,支持的名称参见缓动函数

返回值

this

相关

zrender.Animator.pausezrender.Animator.stop

zrender.Animator.stop(forwardToLast)

停止动画。

参数

名称 类型 默认值 描述
forwardToLast boolean false 是否将动画跳到最后一帧。

相关

zrender.Animator.start

zrender.Animator.when(time, props)

定义关键帧,即动画对象在某个时刻的属性。

参数

名称 类型 默认值 描述
time number   关键帧时刻,单位毫秒。
props Object   关键帧的属性,应为 Animatable 对象的属性。

返回值

this

zrender.BoundingRect

包围盒。

构造函数

zrender.BoundingRect(x, y, width, height)

名称 类型 默认值 描述
x number   左上角横坐标。
y number   左上角纵坐标。
width number   包围盒宽度。
height number   包围盒高度。

zrender.BoundingRect.clone()

得到包围盒的副本。

返回值

新的包围盒,类型:zrender.BoundingRect

zrender.BoundingRect.contain(x, y)

判断坐标 (x, y) 是否在图形上。

参数

名称 类型 默认值 描述
x number   横坐标。
y number   纵坐标。

返回值

返回是否在图形上,类型:boolean

zrender.BoundingRect.copy(other)

从另一个包围盒复制属性。

参数

名称 类型 默认值 描述
other zrender.BoundingRect   另一个包围盒。

zrender.BoundingRect.intersect(other)

判断两个包围盒是否相交。

参数

名称 类型 默认值 描述
other zrender.BoundingRect   另一个包围盒。

返回值

相交部分的包围盒,类型:zrender.BoundingRect

zrender.BoundingRect.union(other)

与另一个包围盒求并集,得到的也是一个包围盒。

参数

名称 类型 默认值 描述
other zrender.BoundingRect   另一个包围盒。

返回值

新的包围盒,类型:zrender.BoundingRect

zrender.color

静态类

颜色。

zrender.color.lift(color, level)

提亮颜色。

参数

名称 类型 默认值 描述
color string   原始颜色。
level number   提亮指数,应介于 01 之间,如果小于 0,颜色也会被提亮。

返回值

提亮后的颜色,类型:string,形如 rgba(...)rgb(...)

zrender.color.lerp(normalizedValue, colors, fullOutput)

快速得到渐变色 colorsnormalizedValue 位置的颜色,返回混合后的颜色。

参数

名称 类型 默认值 描述
normalizedValue number   位置,范围 01
colors string[]   渐变色的数组。
fullOutput boolean false 如果为 true,则返回包含 colorleftIndexrightIndexvalueObject,否则返回颜色。

返回值

如果 fullOutputtrue,则返回包含 colorleftIndexrightIndexvalueObject,否则返回颜色。类型:Object|string

zrender.color.modifyAlpha(color, alpha)

修改颜色的透明度维度。

参数

名称 类型 默认值 描述
color string   颜色字符串。
alpha number   新的透明度。

返回值

RGBA 形式的颜色字符串。

zrender.color.modifyHSL(color, h, s, l)

修改颜色的 HSL 维度。

参数

名称 类型 默认值 描述
color string   颜色字符串,可以不是 hsl(...) 形式的。
h null|number   如果为 null,则不改变。
s null|number   如果为 null,则不改变。
l null|number   如果为 null,则不改变。

返回值

RGBA 形式的颜色字符串。

zrender.color.parse(colorStr, rgbaArr)

将各种形式的颜色字符串,转成 RGBA 形式的数组输出。

参数

名称 类型 默认值 描述
colorStr string   可以是:'rgb(100, 0, 0)''rgba(0, 100, 0, 0.4)''red''#F00''#F60000''hsla(270, 60%, 70%, 0.2)''hsl(270, 60%, 70%)' 之类的形式。
rgba number[]   长度为 4 的数组,分别表示红色、绿色、蓝色、不透明度,前三者的取值范围是 0255,不透明度的取值范围是 01

返回值

如果 colorStr 不是合法的颜色,则返回 undefined,否则返回 rgbaArr。类型:undefined|number[]

如果希望知道颜色字符串是否合法,应该使用返回值;如果希望在任何情况下都得到颜色,则应该使用参数 rgbaArr,如果颜色字符串不合法,会返回 [0, 0, 0, 1],也就是黑色。

zrender.color.toHex(color)

将颜色转为十六进制的长度为 6 的字符串,开头没有 '#'

参数

名称 类型 默认值 描述
color string   颜色字符串。

返回值

十六进制的颜色,类型:string

例子

zrender.color.toHex('rgb(200, 0, 0)') 返回 'c80000'

zrender.color.stringify(arrColor, type)

将数组形式的颜色转为字符串。

参数

名称 类型 默认值 描述
arrColor number[]   可以是长度为 34 的数组,如 [255, 0, 0, 0.2]
type string   arrColor 的形式,可以为:'rgb''rgba''hsv''hsva''hsl''hsla'

返回值

颜色字符串,如:'rgba(255, 0, 0, 0.2)',类型:string

zrender.Displayable

继承自 zrender.Element

抽象类

可显示的元素。

注意:

zrender.Displayable 是一个抽象类,所以不要在代码中 new zrender.Displayable(opts),这里的构造函数只是用于表明其子类(如 Rect 等)构造函数参数的共同部分。

元素初始化之后,需要通过 zrender.Element.attr 修改属性。

构造函数

zrender.Displayable(opts)

名称 类型 默认值 描述
opts.culling boolean false 是否进行裁剪。
opts.cursor string 'pointer' 鼠标移到元素上时的鼠标样式。
opts.draggable boolean false 图形是否可拖曳。
opts.invisible boolean false 图形是否不可见,为 true 时不绘制图形,但是仍能触发鼠标事件。
opts.progressive number -1 是否渐进式渲染。当图形元素过多时才使用,用大于 0 的数字表示渲染顺序。
opts.rectHover boolean false 是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。
opts.silent boolean false 是否响应鼠标事件。
opts.style.fill string '#000' 填充样式。
opts.style.stroke string null 描边样式。
opts.style.opacity number 1 不透明度。
opts.style.lineDash number[] null 描边虚线样式,参考 SVG stroke-dasharray
opts.style.lineDashOffset number null 描边虚线偏移,参考 SVG stroke-dashoffset
opts.style.shadowBlur number 0 阴影模糊大小。
opts.style.shadowColor string 'transparent' 阴影颜色。
opts.style.shadowOffsetX number 0 阴影横向偏移。
opts.style.shadowOffsetY number 0 阴影纵向偏移。
opts.style.lineWidth number 0 线宽。
opts.style.strokeNoScale boolean false 描边粗细不随缩放而改变,false 则会根据缩放同比例缩放描边粗细。
opts.style.text string null 在图形中显示的文字。
opts.style.font string null 文字样式,由 fontSizefontFamilyfontStylefontWeight 组成,建议分别设置这几项而非直接设置 font
opts.style.fontStyle string null CSS font-style
opts.style.fontWeight string null CSS font-weight
opts.style.fontSize string null CSS font-size
opts.style.fontFamily string null CSS font-family
opts.style.textFill string null 文字填充样式。
opts.style.textStroke string null 文字描边样式。
opts.style.textWidth number null 文字宽度。
opts.style.textHeight number null 文字高度,仅用于设置背景色时需要设置。
opts.style.textLineWidth number 0 文字描边宽度。
opts.style.textLineHeight number 0 文字行高。
opts.style.textPosition string|number[] 'inside' 文字位置,可以为 'inside''left''right''top''bottom',或一个二维数组 [x, y] 表示相对形状的位置。
opts.style.textRect Object null 文字包围盒,包括 xywidthheight 属性,如果没有设置,将使用形状的包围盒。
opts.style.textOffset number[] null 文字位置偏移,包括 xy
opts.style.textAlign string null 文字水平对齐方式,可取值:'left''center''right',默认根据 textPosition 计算。
opts.style.textVerticalAlign string null 文字垂直对齐方式,可取值:'top''middle''bottom',默认根据 textPosition 计算。
opts.style.textDistance number 5 文字与其对齐的边缘的距离,如 textPositiontop 时,textDistance 表示与形状上方的距离。
opts.style.textShadowColor string 'transparent' 文字阴影颜色。
opts.style.textShadowBlur number 0 文字阴影模糊大小。
opts.style.textShadowOffsetX number 0 文字阴影水平偏移。
opts.style.textShadowOffsetY number 0 文字阴影垂直偏移。
opts.style.textBoxShadowColor string 'transparent' 文字包围盒阴影颜色。
opts.style.textBoxShadowBlur number 0 文字包围盒阴影模糊大小。
opts.style.textBoxShadowOffsetX number 0 文字包围盒阴影水平偏移。
opts.style.textBoxShadowOffsetY number 0 文字包围盒阴影垂直偏移。
opts.style.transformText boolean false 文字是否跟随变换效果,仅对 PathImage 元素有效
opts.style.textRotation number 0 文字旋转角度,仅对 PathImage 元素有效,并且 transformText 应设置为 false
opts.style.textOrigin string|number[] null 文字变换中心,可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置,默认值是 textPosition
opts.style.textBackgroundColor string null 文字包围盒颜色。
opts.style.textBorderColor string null 文字包围盒描边颜色。
opts.style.textBorderWidth number 0 文字包围盒描边宽度。
opts.style.textBorderRadius number 0 文字圆角大小。
opts.style.textPadding number|number[] null 文字内边距,可以是 2[2, 4][2, 3, 4, 5] 的形式,同 CSS Padding,单位是像素。
opts.style.rich Object null 富文本样式,参考 ECharts rich 配置项
opts.style.truncate Object null 当文字过长显示不下时,显示省略号表示。
opts.style.truncate.outerWidth number null 包含了 textPadding 的宽度,超出这个范围就裁剪。
opts.style.truncate.outerHeight number null 包含了 textPadding 的高度,超出这个范围就裁剪。
opts.style.truncate.ellipsis string '...' 默认用省略号表示超出部分,也可以对其进行自定义。
opts.style.truncate.placeholder string null 如果空间过小,导致省略号也显示不下,但是又不想空着,可能得有个什么标记表示这里是有字符的,就用个 “点”,就是在这个 placeholder 里设置。
opts.style.blend string null 混合模式,同 Canvas globalCompositeOperation
opts.zlevel number 0 决定绘画在哪层 Canvas 中。Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的 zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
opts.z number 0 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。
opts.z2 number 0 z 类似,优先级比 z 更低。

zrender.Displayable.contain(x, y)

判断坐标 (x, y) 是否在图形上。

参数

名称 类型 默认值 描述
x number   横坐标。
y number   纵坐标。

返回值

返回是否在图形上,类型:boolean

相关

zrender.Displayable.rectContain

zrender.Displayable.dirty()

设为需要更新。

zrender.Displayable.getBoundingRect()

得到元素的包围盒。

返回值

元素的包围盒,类型:zrender.BoundingRect

zrender.Displayable.rectContain(x, y)

判断坐标 (x, y) 是否在图形包围盒内。

参数

名称 类型 默认值 描述
x number   横坐标。
y number   纵坐标。

返回值

返回是否在图形上,类型:boolean

相关

zrender.Displayable.contain

zrender.Arc

继承自 zrender.Displayable

圆弧。

构造函数

zrender.Arc(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.r number 0 半径。
opts.shape.startAngle number 0 起始弧度。
opts.shape.endAngle number Math.PI * 2 终止弧度。
opts.shape.clockwise boolean true 顺时针方向。

zrender.BezierCurve

继承自 zrender.Displayable

贝塞尔曲线。

构造函数

zrender.BezierCurve(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.x1 number 0 起始点横坐标。
opts.shape.y1 number 0 起始点纵坐标。
opts.shape.x2 number 0 终止点横坐标。
opts.shape.y2 number 0 终止点纵坐标。
opts.shape.cpx1 number 0 控制点横坐标。
opts.shape.cpy1 number 0 控制点纵坐标。
opts.shape.percent number 1 已显示的百分比,用于绘制动画。

zrender.Circle

继承自 zrender.Displayable

圆。

构造函数

zrender.Circle(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.r number 0 半径。

zrender.CompoundPath

继承自 zrender.Path

复合路径。相当于多个路径的并集。

构造函数

zrender.CompoundPath(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape.paths Path[] null 路径数组。

zrender.Droplet

继承自 zrender.Displayable

水滴。

构造函数

zrender.Droplet(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.width number 0 宽度。
opts.shape.height number 0 高度。

zrender.Ellipse

继承自 zrender.Displayable

椭圆。

构造函数

zrender.Ellipse(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.rx number 0 横向半径。
opts.shape.ry number 0 纵向半径。

zrender.Heart

继承自 zrender.Displayable

心形。

构造函数

zrender.Heart(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.width number 0 宽度。
opts.shape.height number 0 高度。

zrender.Image

继承自 zrender.Displayable

图像。

构造函数

zrender.Image(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.style Object   样式。
opts.style.image string|HTMLImageElement|HTMLCanvasElement   图片的内容,可以是图片的 URL,也可以是 dataURI
opts.style.x number   图片左上角相对于父节点的横坐标。
opts.style.y number   图片左上角相对于父节点的纵坐标。
opts.style.width number   图片宽度。
opts.style.height number   图片高度。

zrender.Isogon

继承自 zrender.Displayable

正多边形。

构造函数

zrender.Isogon(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.x number 0 圆心横坐标。
opts.shape.y number 0 圆心纵坐标。
opts.shape.r number 0 半径。
opts.shape.n number 0 边数。

zrender.Line

继承自 zrender.Displayable

线段。

构造函数

zrender.Line(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.x1 number 0 起始点横坐标。
opts.shape.y1 number 0 起始点纵坐标。
opts.shape.x2 number 0 终止点横坐标。
opts.shape.y2 number 0 终止点纵坐标。
opts.shape.percent number 1 已显示的百分比,用于绘制动画。

zrender.Path

继承自 zrender.Displayable

路径。

构造函数

zrender.Path(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable

zrender.Path.extend(props)

扩展一个 Path 元素,用以生成比如星形,圆等。

参数

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.type string   类型,自定义的名称。
opts.init Function   初始化时调用的函数。
opts.buildPath Function   如何构建 Path 的函数,在绘制时候会调用。

例子

这个例子展示的是如何通过扩展 Path 得到新图形。

zrender.Polygon

继承自 zrender.Displayable

多边形。

构造函数

zrender.Polygon(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.points number[][] 0 每个元素是一个横纵坐标的数组。
opts.shape.smooth number|string 0 圆滑程度,取值范围为 01 之间的数字,0 表示不圆滑;也可以是特殊字符串 'spline' 表示用 Catmull-Rom spline 插值算法,否则默认用贝塞尔曲线插值算法。
opts.shape.smoothConstraint number[][] 0 将计算出来的控制点约束在一个包围盒内。比如 [[0, 0], [100, 100]],这个包围盒会与整个折线的包围盒做一个并集用来约束控制点。

相关

如果要创建仅含描边的多边形,请使用 Polyline

zrender.Polyline

继承自 zrender.Displayable

多边形折线段。默认是不闭合的,如果需要闭合,请将最后一个点设为和第一个点同样的位置。

构造函数

zrender.Polyline(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.points number[][] 0 每个元素是一个横纵坐标的数组。
opts.shape.smooth number|string 0 圆滑程度,取值范围为 01 之间的数字,0 表示不圆滑;也可以是特殊字符串 'spline' 表示用 Catmull-Rom spline 插值算法,否则默认用贝塞尔曲线插值算法。
opts.shape.smoothConstraint number[][] 0 将计算出来的控制点约束在一个包围盒内。比如 [[0, 0], [100, 100]],这个包围盒会与整个折线的包围盒做一个并集用来约束控制点。

相关

如果要创建填充的多边形,请使用 Polygon

zrender.Rect

继承自 zrender.Displayable

矩形。

构造函数

zrender.Rect(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.r number|number[] 0 用于创建圆角矩形。左上、右上、右下、左下角的半径依次为 r1、 r2、 r3、 r4。r 缩写为 1 相当于 [1, 1, 1, 1];r 缩写为 [1] 相当于 [1, 1, 1, 1];r 缩写为 [1, 2] 相当于 [1, 2, 1, 2];r 缩写为 [1, 2, 3] 相当于 [1, 2, 3, 2]。
opts.shape.x number 0 左上角的横坐标。
opts.shape.y number 0 左上角的纵坐标。
opts.shape.width number 0 宽度。
opts.shape.height number 0 高度。

zrender.Rose

继承自 zrender.Displayable

玫瑰线,参见 wiki

构造函数

zrender.Rose(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.r number[] [] 半径。
opts.shape.k number 0 玫瑰线参数,参见 wiki
opts.shape.n number 1 花瓣数。

zrender.Sector

继承自 zrender.Displayable

扇形。

构造函数

zrender.Sector(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.r number 0 半径。
opts.shape.r0 number 0 内半径。
opts.shape.startAngle number 0 起始弧度。
opts.shape.endAngle number Math.PI * 2 终止弧度。
opts.shape.clockwise boolean true 顺时针方向。

zrender.Star

继承自 zrender.Displayable

星形。

构造函数

zrender.Star(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.n number 3 瓣数,如 n 等于 5 时,是我们熟悉的五角星。
opts.shape.r number 0 半径。
opts.shape.r0 number 0 内半径。

zrender.Text

继承自 zrender.Displayable

文字。

构造函数

zrender.Text(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable

zrender.Trochoid

继承自 zrender.Displayable

内外旋轮曲线,参见 wiki

构造函数

zrender.Trochoid(opts)

名称 类型 默认值 描述
opts Object   配置项,继承得到的配置项参见 zrender.Displayable
opts.shape Object   形状属性。
opts.shape.cx number 0 圆心横坐标。
opts.shape.cy number 0 圆心纵坐标。
opts.shape.r number 0 半径。
opts.shape.r0 number 0 内半径。
opts.shape.d number 0 内外旋轮曲线参数,参见 wiki
opts.shape.n location 'out' outin,表示曲线在内部还是外部。

zrender.Element

继承自 zrender.Animatablezrender.Transformablezrender.Eventful

抽象类

元素,可以被添加到场景中。

注意:

zrender.Element 是一个抽象类,所以不要在代码中 new zrender.Element(opts),这里的构造函数只是用于表明其子类构造函数参数的共同部分。

zrender.Element.afterUpdate

类型:Function,元素更新后的回调函数。

相关

zrender.Element.beforeUpdate

zrender.Element.attr(key, value)

设置元素属性。需要注意的是,应该始终调用该方法来修改属性,而不是直接 element.xxx = ... 这样的形式,因为后者不会重绘物体。

参数

名称 类型 默认值 描述
key string|Object   设置的属性。可以是 string 类型的属性名称,或者 Object 类型的属性及其值。
value *   属性值。

例子

element.attr('position', [100, 200]);
element.attr({
    style: {
        fill: 'red'
    },
    shape: {
        x: 100
    }
});

zrender.Element.beforeUpdate

类型:Function,元素更新前的回调函数。

相关

zrender.Element.afterUpdate

zrender.Element.hide()

隐藏元素,可以使用 zrender.Element.show 恢复显示。

相关

zrender.Element.show

zrender.Element.removeClipPath()

取消设置裁剪元素。

相关

zrender.Element.setClipPath

zrender.Element.setClipPath(clipPath)

设置裁剪元素,超出 clipPath 区域的部分将被裁剪掉。

一个元素只能被一个元素裁剪,如果要实现多个元素的裁剪,需要使用 zrender.CompoundPath

参数

名称 类型 默认值 描述
clipPath Element   设置当前元素的裁剪元素。

相关

zrender.Element.removeClipPath

zrender.Element.show()

显示元素。元素在默认情况下是显示状态,使用 zrender.Element.hide 隐藏后,可以使用此方法显示。

相关

zrender.Element.hide

zrender.Element.traverse(cb, context)

深度优先遍历所有子孙节点。

参数

名称 类型 默认值 描述
cb Function   回调函数。接受参数:context, child,其中 child 是每个元素的子元素。
context Object   执行回调函数的上下文。

zrender.Eventful

支持事件的元素。

构造函数

zrender.Eventful()

zrender.Eventful.isSilent(event)

是否绑定了事件。

参数

名称 类型 默认值 描述
event string   事件名。

返回值

是否绑定了事件,类型:boolean

zrender.Eventful.off(event, handler)

解绑事件。

参数

名称 类型 默认值 描述
event string   事件名。
handler Function   响应函数。

返回值

this

相关

zrender.Eventful.on

zrender.Eventful.on(event, handler, context)

绑定事件。

参数

名称 类型 默认值 描述
event string   事件名。
handler Function   响应函数。
context Object   执行上下文。

返回值

this

相关

zrender.Eventful.off

zrender.Eventful.one(event, handler, context)

单次触发绑定,触发后销毁。

参数

名称 类型 默认值 描述
event string   事件名。
handler Function   响应函数。
context Object   执行上下文。

返回值

this

zrender.Eventful.trigger(event)

触发事件。

参数

名称 类型 默认值 描述
event string   事件名。

返回值

this

zrender.Gradient

抽象类

渐变。

注意:

zrender.Gradient 是一个抽象类,所以不要在代码中 new zrender.Gradient(colorStops),这里的构造函数只是用于表明其子类构造函数参数的共同部分。

构造函数

zrender.Gradient(colorStops)

名称 类型 默认值 描述
colorStops Object[]   组成渐变色的颜色。每个颜色包括 offsetcolor 属性,前者表示渐变位置(类型:number),后者表示具体的颜色(类型:string

zrender.Gradient.addColorStop(offset, color)

增加渐变色。

参数

名称 类型 默认值 描述
offset number   渐变位置。
color string   颜色。

如果想要清除渐变色,可以使用 this.colorStops = []

zrender.Group

继承自 zrender.Element

组。Group 是一个容器,可以插入子节点,Group 的变换也会被应用到子节点上。

构造函数

zrender.Group()

例子

var g = new zrender.Group();
g.position[0] = 100;
g.position[1] = 100;
g.add(new zrender.Circle({
    style: {
        x: 100,
        y: 100,
        r: 20,
    }
}));
zr.add(g);

zrender.Group.add(child)

添加子节点到最后。

参数

名称 类型 默认值 描述
child Element   待添加的元素。

返回值

this

相关

zrender.Group.addBeforezrender.Group.remove

zrender.Group.addBefore(child, nextSibling)

添加子节点到 nextSibling 之前。

参数

名称 类型 默认值 描述
child Element   待添加的元素。
nextSibling Element   已经在 Group 中的元素。

返回值

this

相关

zrender.Group.addzrender.Group.remove

zrender.Group.childAt(idx)

返回特定序号的子元素,类型:Element

相关

zrender.Group.childOfNamezrender.Group.children

zrender.Group.childCount()

返回子元素个数,类型:number

zrender.Group.childOfName(name)

返回特定名字的子元素,类型:Element

相关

zrender.Group.childAtzrender.Group.children

zrender.Group.children()

返回所有子元素,类型:Element[]

相关

zrender.Group.childAtzrender.Group.childOfName

zrender.Group.dirty()

将组设为需要更新。

zrender.Group.eachChild(cb, context)

遍历所有子节点。

参数

名称 类型 默认值 描述
cb Function   回调函数。
context Object   执行回调函数的上下文。

zrender.Group.getBoundingRect(includeChildren)

得到 includeChildren 或组内所有元素的包围盒。

参数

名称 类型 默认值 描述
includeChildren zrender.Element[]   组内元素的子集。如果 includeChildren 未设置,则获取所有元素的包围盒,否则获得 includeChildren 的包围盒。

返回值

includeChildren 或组内所有元素的包围盒,类型:zrender.BoundingRect

zrender.Group.remove(child)

移除子节点。

参数

名称 类型 默认值 描述
child zrender.Element   待移除的元素。

相关

zrender.Group.addzrender.Group.removeAll

zrender.Group.removeAll()

移除所有子节点。

相关

zrender.Group.addzrender.Group.remove

zrender.Group.silent

类型:boolean,默认值:false,所有子孙元素是否响应鼠标事件。

zrender.LinearGradient

继承自 zrender.Gradient

线性渐变。

构造函数

zrender.LinearGradient(x, y, x2, y2, colorStops, globalCoord)

名称 类型 默认值 描述
x number 0 渐变起始位置横坐标。
y number 0 渐变起始位置纵坐标。
x2 number 1 渐变终止位置横坐标。
y2 number 1 渐变终止位置纵坐标。
colorStops Object[]   组成渐变色的颜色。每个颜色包括 offsetcolor 属性,前者表示渐变位置(类型:number),后者表示具体的颜色(类型:string
globalCoord boolean false 如果为 false,则 colorStops 取值范围是 01;如果为 true,则 xyx2y2colorStops 的坐标和元素是一致的(也就是说,原先用 1 表示物体最右侧,这时需要用元素实际宽度表示最右侧)。

zrender.matrix

静态类

3x2 的矩阵,用以表示二维物体的位移、旋转、缩放。

用长度为 6 的数组表示矩阵。如果浏览器不支持 Float32Array 则类型为 number[],否则为 Float32Array

zrender.matrix.copy(out, m)

将矩阵 m 复制给矩阵 out。不会创建新矩阵,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   待修改的矩阵,由 zrender.matrix.create 创建。
m Float32Array|number[]   参考矩阵。

返回值

修改后的 out,类型:Float32Array|number[]

zrender.matrix.create()

创建一个单位矩阵。

返回值

新创建的单位矩阵,类型:Float32Array|number[],元素个数为 6

zrender.matrix.identity(out)

out 设为单位矩阵,也就是 [1, 0, 0, 1, 0, 0]。不会创建新矩阵,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   待修改的矩阵,由 zrender.matrix.create 创建。

返回值

修改后的 out,类型:Float32Array|number[]

zrender.matrix.invert(out, m)

求到矩阵 m 的逆矩阵,得到的结果赋值给 out

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出矩阵,由 zrender.matrix.create 创建。
m Float32Array|number[]   待求逆的矩阵,不会在改方法中被改变。

返回值

修改后的 out,类型:Float32Array|number[]

zrender.matrix.mul(out, m1, m2)

将矩阵 m1m2 相乘,得到的结果赋值给 out

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出矩阵,由 zrender.matrix.create 创建。
m1 Float32Array|number[]   待相乘的矩阵。
m2 Float32Array|number[]   待相乘的矩阵。

返回值

修改后的 out,类型:Float32Array|number[]

zrender.matrix.rotate(out, m, rad)

将矩阵 m 旋转 rad 弧度,得到的结果赋值给 out

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出矩阵,由 zrender.matrix.create 创建。
m Float32Array|number[]   待修改的矩阵,不会在改方法中被改变。
rad number   旋转弧度。

返回值

修改后的 out,类型:Float32Array|number[]

zrender.matrix.scale(out, m, v)

将矩阵 m 沿向量 v 缩放,得到的结果赋值给 out

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出矩阵,由 zrender.matrix.create 创建。
m Float32Array|number[]   待修改的矩阵,不会在改方法中被改变。
v Float32Array|number[]   长度为 2 的缩放向量,表示横向和纵向的缩放量。

返回值

修改后的 out,类型:Float32Array|number[]

zrender.matrix.translate(out, m, v)

将矩阵 m 沿向量 v 平移,得到的结果赋值给 out

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出矩阵,由 zrender.matrix.create 创建。
m Float32Array|number[]   待修改的矩阵,不会在改方法中被改变。
v Float32Array|number[]   长度为 2 的平移向量,表示横向和纵向的偏移量。

返回值

修改后的 out,类型:Float32Array|number[]

zrender.path

静态类

路径相关的辅助函数。

zrender.path.createFromString(str, opts)

从字符串创建路径,字符串形如 SVG Path

参数

名称 类型 默认值 描述
str string   构建路径的字符串。
opts Object   配置项,参见 zrender.Displayable 的配置项。

zrender.path.extendFromString(str, opts)

从字符串扩展路径,字符串形如 SVG Path

参数

名称 类型 默认值 描述
str string   扩展路径的字符串。
opts Object   配置项,参见 zrender.Displayable 的配置项。

相关

zrender.Path.extend

zrender.path.mergePath(pathEls, opts)

合并多条路径。

参数

名称 类型 默认值 描述
pathEls Path[]   路径数组。
opts Object   配置项,参见 zrender.Displayable 的配置项。

zrender.Pattern

图案。

构造函数

zrender.Pattern(image, repeat)

名称 类型 默认值 描述
image HTMLImageElement   图片对象。
repeat string 'repeat' 重复模式,可取值有:'repeat''repeat-x''repeat-y''no-repeat'

zrender.RadialGradient

继承自 zrender.Gradient

径向渐变。

构造函数

zrender.RadialGradient(x, y, r, colorStops, globalCoord)

名称 类型 默认值 描述
x number 0.5 渐变中心位置横坐标。
y number 0.5 渐变中心位置纵坐标。
r number 0.5 渐变半径。
colorStops Object[]   组成渐变色的颜色。每个颜色包括 offsetcolor 属性,前者表示渐变位置(类型:number),后者表示具体的颜色(类型:string
globalCoord boolean false 如果为 false,则 colorStops 取值范围是 01;如果为 true,则 xyrcolorStops 的坐标和元素是一致的(也就是说,原先用 1 表示物体最右侧,这时需要用元素实际宽度表示最右侧)。

zrender.Transformable

可进行变换的对象,变换包括:位移、旋转、缩放。

构造函数

zrender.Transformable(opts)

参数

名称 类型 默认值 描述
opts Object   配置项。
opts.position number[] [0, 0] 位移。
opts.rotation number 0 旋转的弧度。
opts.scale number[] [1, 1] 缩放。
opts.origin number[] null 旋转和缩放的原点。

zrender.Transformable.decomposeTransform()

分解 transform 矩阵到 positionrotationscale。通常用于修改 transform 后同步positionrotationscale 属性。

zrender.Transformable.getGlobalScale()

获得全局的缩放。也就是说会祖先元素的缩放也会计算在内。

返回值

缩放,类型: number[]

zrender.Transformable.origin

旋转和缩放的原点,类型: number[]

zrender.Transformable.position

位移,类型: number[]

zrender.Transformable.rotation

旋转的弧度,类型: number

zrender.Transformable.scale

缩放,类型: number[]

zrender.Transformable.transform

矩阵形式表示位移、旋转、缩放,类型: zrender.matrix

zrender.Transformable.transformCoordToGlobal(x, y)

变换局部坐标位置到全局坐标空间。

参数

名称 类型 默认值 描述
x number   横坐标。
y number   纵坐标。

zrender.Transformable.transformCoordToLocal(x, y)

变换坐标位置到元素的局部坐标空间。

参数

名称 类型 默认值 描述
x number   横坐标。
y number   纵坐标。

zrender.util

静态类

常用辅助函数。

zrender.util.bind(func, context)

修改执行上下文。

参数

名称 类型 默认值 描述
func Function   待执行的函数。
context *   执行上下文。

zrender.util.clone(source)

深度拷贝一个对象。

参数

名称 类型 默认值 描述
source Object|Array|TypedArray|number|string|null|undefined   参考对象。如果是 Object 类型,则克隆的结果是不包含原型属性的纯对象。

返回值

克隆结果,类型:Object|Array|TypedArray|number|string|null|undefined

zrender.util.createCanvas()

获得一个 Canvas,不设置宽高。相当于 document.createElement('canvas')

返回值

Canvas,类型:HTMLCanvasElement

相关

zrender.util.getContext

zrender.util.curry(func)

函数柯里化。

参数

名称 类型 默认值 描述
func Function   回调函数。

zrender.util.defaults(target, source, overlay)

将一个对象中的元素赋给另一个元素。

参数

名称 类型 默认值 描述
target *   需要修改的对象。
source *   参考对象。
overlay boolean   如果 overlaytrue,则将 source 中非空的属性赋给 targe;如果 overlayfalse,则将 sourcetarget 不包含的属性赋给 targe

返回值

拷贝结果,即 target

相关

zrender.util.mixin

zrender.util.each(array, cb, context)

遍历数组。相当于 Array.prototype.forEach

参数

名称 类型 默认值 描述
array []   数组。
cb Function   遍历回调函数。
context *   执行上下文。

zrender.util.extend(target, source)

source 中非继承来的属性赋给 target

参数

名称 类型 默认值 描述
target *   需要修改的对象。
source *   参考对象。

返回值

拷贝结果,即 target

zrender.util.filter(array, cb, context)

过滤元素。相当于 Array.prototype.filter

参数

名称 类型 默认值 描述
array []   数组。
cb Function   回调函数。
context *   执行上下文。

zrender.util.find(array, cb, context)

相当于 Array.prototype.find

参数

名称 类型 默认值 描述
array []   数组。
cb Function   用以检查元素是否存在的函数,返回元素是否存在的 boolean 结果。
context *   执行上下文。

返回值

返回数组 array 中第一个找到的元素,类型:*

zrender.util.getContext()

获得一个 Canvas 的绘制上下文。相当于 document.createElement('canvas').getContext('2d')

参数

名称 类型 默认值 描述
array []   数组。
cb Function   用以检查元素是否存在的函数,返回元素是否存在的 boolean 结果。
context *   执行上下文。

返回值

Canvas 的绘制上下文,类型:CanvasRenderingContext2D

相关

zrender.util.createCanvas

zrender.util.indexOf(array, value)

查询数组中元素,返回下标。

参数

名称 类型 默认值 描述
array []   数组。
value *   寻找的对象。

返回值

下标,类型:number

zrender.util.inherits(clazz, baseClazz)

继承一个类,baseClazz 会继承 clazz 的方法、属性,clazz 会有 superClass 属性,指向 baseClazz

参数

名称 类型 默认值 描述
clazz Function   基类。
baseClazz Function   子类。

zrender.util.isArray(data)

是否是数组。

参数

名称 类型 默认值 描述
data *   判断对象。

返回值

是否是数组,类型:boolean

相关

zrender.util.isArrayLike

zrender.util.isFunction(data)

是否是函数。

参数

名称 类型 默认值 描述
data *   判断对象。

返回值

是否是函数,类型:boolean

zrender.util.isObject(data)

是否是对象。

参数

名称 类型 默认值 描述
data *   判断对象。

返回值

是否是对象,类型:boolean

zrender.util.isString(data)

是否是字符串。

参数

名称 类型 默认值 描述
data *   判断对象。

返回值

是否是字符串,类型:boolean

zrender.util.map(array, cb, context)

映射数组。相当于 Array.prototype.map

参数

名称 类型 默认值 描述
array []   数组。
cb Function   映射函数。
context *   执行上下文。

zrender.util.merge(target, source, overwrite)

拷贝一个对象。

参数

名称 类型 默认值 描述
target *   需要修改的对象。
source *   参考对象。
overwrite boolean false 是否深度拷贝。

返回值

拷贝结果,即 target

zrender.util.reduce(array, cb, context)

相当于 Array.prototype.reduce

参数

名称 类型 默认值 描述
array []   数组。
cb Function   回调函数。
context *   执行上下文。

zrender.util.slice(array, start, end)

相当于 Array.prototype.slice

参数

名称 类型 默认值 描述
array []   数组。
start number   起始下标。
end number   终止下标。

返回值

数组 arraystart(包含)位置到 end(不包含)位置的浅拷贝数组,类型:[]

zrender.vector

静态类

长度为 2 的向量。

如果浏览器不支持 Float32Array 则类型为 number[],否则为 Float32Array

zrender.vector.add(out, v1, v2)

将向量 v1v2 相加,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

输出向量,类型:Float32Array|number[]

相关

zrender.vector.scaleAndAdd

zrender.vector.applyTransform(out, v, m)

矩阵 m 左乘向量 v,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v Float32Array|number[]   向量。
m Float32Array|number[]   矩阵,参见 zrender.matrix

返回值

输出向量,类型:Float32Array|number[]

zrender.vector.copy(out, v)

将向量 v 复制给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   待修改的向量。
v Float32Array|number[]   参考向量。

返回值

输出向量,类型:Float32Array|number[]

zrender.vector.clone(v)

将向量 v 复制,产生一个新副本。

返回值

新创建的向量,类型:Float32Array|number[]

zrender.vector.distance(v1, v2)

得到向量 v1v2 间距离。

参数

名称 类型 默认值 描述
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

距离,类型:number

zrender.vector.distanceSquare(v1, v2)

得到向量 v1v2 间距离的平方。

参数

名称 类型 默认值 描述
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

距离的平方,类型:number

zrender.vector.div(out, v1, v2)

将向量 v1v2 的每个元素分别相除,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

输出向量,类型:Float32Array|number[]

zrender.vector.dot(v1, v2)

将向量 v1v2 点乘,返回点积。

参数

名称 类型 默认值 描述
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

点积,类型:number

zrender.vector.len(v)

求向量 v 的模长,也就是其两个元素的几何平均数。

参数

名称 类型 默认值 描述
v Float32Array|number[]   待求模长的向量,不会在该方法中被改变。

返回值

模长,类型:number

zrender.vector.lenSquare(v)

求向量 v 的模长的平方。

参数

名称 类型 默认值 描述
v Float32Array|number[]   待求模长平方的向量,不会在该方法中被改变。

返回值

模长平方,类型:number

zrender.vector.lerp(out, v1, v2, t)

将向量 v1v2t 位置进行插值,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。
t number   位置,011 表示 v2 处。

返回值

插值后的向量 out,类型:Float32Array|number[]

zrender.vector.max(out, v1, v2)

求两个向量每个元素的最大值,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

输出向量,类型:Float32Array|number[]

相关

zrender.vector.min

zrender.vector.min(out, v1, v2)

求两个向量每个元素的最小值,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

输出向量,类型:Float32Array|number[]

zrender.vector.mul(out, v1, v2)

将向量 v1v2 相乘,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

输出向量,类型:Float32Array|number[]

zrender.vector.negate(out, v)

将向量 v 的负向量输出到 out,也就是每个元素都变成相反数。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v Float32Array|number[]   输入向量。

返回值

负向量 out,类型:Float32Array|number[]

zrender.vector.normalize(out, v)

将向量 v 归一化输出到 out,也就是将其模长变为 1

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v Float32Array|number[]   输入向量。

返回值

归一化后的 out,类型:Float32Array|number[]

zrender.vector.scale(out, v, s)

将向量 v 缩放 s 倍,得到的结果赋值给 out

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v Float32Array|number[]   待修改的向量,不会在改方法中被改变。
s number   缩放量。

返回值

输出向量,类型:Float32Array|number[]

相关

zrender.vector.scaleAndAdd

zrender.vector.scaleAndAdd(out, v1, v2, scale)

将向量 v2 缩放 scale 倍后,与 v1 相加,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。
scale number   缩放比例,1 表示不缩放。

返回值

输出向量,类型:Float32Array|number[]

相关

zrender.vector.addzrender.vector.scale

zrender.vector.set(out, a, b)

将值 (a, b) 赋给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   待修改的向量。
a number   向量的第一个维度。
b number   向量的第二个维度。

返回值

输出向量,类型:Float32Array|number[]

zrender.vector.sub(out, v1, v2)

将向量 v1v2 相减,赋值给向量 out。不会创建新向量,而是将 out 的元素进行改变。

参数

名称 类型 默认值 描述
out Float32Array|number[]   输出向量。
v1 Float32Array|number[]   第一个向量。
v2 Float32Array|number[]   第二个向量。

返回值

输出向量,类型:Float32Array|number[]

zrender 实例

add(el)

向画布内添加元素。

参数

名称 类型 默认值 描述
el Element   向画布内添加的元素。被添加的元素可以通过 remove(el) 移除。

相关

remove

addHover(el, style)

将元素添加到高亮层。添加到高亮层后,可以通过 removeHover 移除。

参数

名称 类型 默认值 描述
el Element   待添加的元素。
style Object   元素样式。

相关

removeHover

animation

类型:Animatoin,动画。

clear()

清除所有对象和画布。

clearAnimation()

停止所有动画。

clearHover()

清除高亮层中所有的元素。

相关

removeHoveraddHover

configLayer(zLevel, config)

改变某个层的配置。

参数

名称 类型 默认值 描述
zlevel string   层级,zlevel 更大的层将覆盖更小的层。
config Object   配置项。
config.clearColor string '#000' 用于清除画布的颜色,默认为黑色。
config.motionBlur boolean false 是否对该层采用动态模糊。
config.lastFrameAlpha number 0.7 用于动态模糊的混合因子,表示上一帧画面保留的比例。应介于 01 之间,0 表示完全使用当前帧,1 表示完全使用上一帧的画面。

dispose()

移除自身。当不再需要使用该实例时,调用该方法以释放内存。

dom

类型:HTMLDomElement,绘图容器。

flush()

立即触发 refresh 和 refreshHover 所标记的重绘操作。

getHeight()

获取画布高度。

相关

getWidth

getWidth()

获取画布宽度。

相关

getHeight

id

类型:stringzrender 实例的唯一标识符。

off(eventName, eventHandler)

取消绑定事件处理。

参数

名称 类型 默认值 描述
eventName string   事件名称,支持: 'click''mousedown''mouseup''mousewheel''dblclick''contextmenu'
eventHandler Function   事件处理的回调函数。

相关

on

on(eventName, eventHandler, context)

绑定事件处理。

参数

名称 类型 默认值 描述
eventName string   事件名称,支持: 'click''mousedown''mouseup''mousewheel''dblclick''contextmenu'
eventHandler Function   事件处理的回调函数。
context Object   函数上下文。

相关

off

refresh()

刷新画布,将在下一个渲染帧的时候被刷新。

refreshHover()

刷新高亮层,将在下一个渲染帧的时候被刷新。

refreshHoverImmediately()

强制立即刷新高亮层。

refreshImmediately()

强制立即刷新画布。

remove(el)

从画布内移除元素。

参数

名称 类型 默认值 描述
el Element   通过 add(el) 添加到画布的元素。

相关

add

removeHover(el)

将元素从高亮层移除。

参数

名称 类型 默认值 描述
el Element   待删除的元素。

相关

addHover

resize(opts)

更新画布大小。当容器改变大小时,应调用此方法。

参数

名称 类型 默认值 描述
opts Object   宽高配置项
opts.width number|string 'auto' 宽度,设为 'auto' 与设为 nullundefined 的效果相同,相当于自动获取容器宽度以改变画布宽度。
opts.height number|string 'auto' 高度,设为 'auto' 与设为 nullundefined 的效果相同,相当于自动获取容器高度以改变画布高度。

trigger(eventName, event)

手动触发事件。

参数

名称 类型 默认值 描述
eventName string   事件名称,支持: 'click''mousedown''mouseup''mousewheel''dblclick''contextmenu'
event Object   事件对象。

相关

onoff