Layer
创建一个图层对象
var scene = new Scene({ containerId: "container" });
var layer = scene.layer(options);
options
options.key | value | description | default |
---|---|---|---|
zIndex | Number | 规定图层在 scene 中的前后顺序 | 0 |
handleEvent | Boolean | 规定是否对图层进行事件监听 | false |
实例属性
layer.key | value | description |
---|---|---|
canvas | DOM | 图层中的画布,即 canvas 元素 |
width | Number | canvas 元素标签宽度(等价于 layer.canvas.width) |
height | Number | canvas 元素标签高度(等价于 layer.canvas.height) |
实例方法
append(element)
描述:
向画布中添加一个或多个元素
参数:
{Element} element
示例:
layer.append(element, element2);
element(elementId)
描述:
获取指定 Id 的元素
参数:
{String} elementId
示例:
layer.element('a');
remove(element)
描述:
从画布中去除一个或多个元素
参数:
{Element} element
TIP
支持不传参数,layer.remove()
将删除所有的元素
示例:
layer.remove(element);
draw()
描述:
执行一次画布绘制
示例:
layer.draw();
clear()
描述:
清空画布
示例:
layer.clear();
animate()
描述:
执行动画
示例:
import { Scene, Circle, Track } from "cvs"; let scene = new Scene({ containerId: "container" }); let layer = scene.layer(); let dot = new Circle({ x: 10, y: 10, r: 10, cache: true, fill: "pink" }); let customTrack = new Track({ delay: 100, duration: 3000, loop: function(p) { this.$ele.attr({ x: 400 * p + 10 }); } }); dot.addTrack(customTrack); layer.append(dot); layer.animate();
TIP
cvs 的动画是基于时间轴的,对用动画的控制详见timeline