Adding layers 添加层

Adding layers 添加层

The addLayer() method adds a layer to the canvas in the form of an object or a function. The layer is not drawn after calling this method.
addLayer方法以对象或函数的形式，将一个层添加到画布中，这个层在调用本方法之后是不绘制的。
If the input is an object, you must specify the type property (i.e. the type of drawing associated with the properties you specify).
如果输入的内容是一个对象，你就必须指定type属性（例如与你指定属性相关的绘制的类型）。

// Create a rectangle layer 创建一个矩形层
$('canvas').addLayer({
  type: 'rectangle',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
})
.drawLayers();

You can also add a layer using the layer property with any method.
你也可以在任意方法中使用layer属性来添加一个层

// Create and draw a rectangle layer创建并绘制一个矩形层
$('canvas').drawRect({
  layer: true,
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});

Because we are creating a layer and calling the drawRect() method simultaneously, this will also draw the layer.
因为我们同时创建一个层，并且调用了drawRect()方法，所以这么做也会绘制出这个层。

Naming layers 给层命名

To name a layer, use the name property. This name can be used later to retrieve, remove, or animate the layer.
要给一个层命名，就要使用name属性。这个名称可以在后续操作中使用，用来访问、删除或动态化层。

// Create a named layer 创建一个命名的层
$('canvas').drawRect({
  layer: true,
  name: 'myBox',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});

Note that the layer name must be unique (that is, no two layers on the canvas can have the same name). The layer name can not be a number, either.
注意，层的名字必须是唯一的（也就是画布上没有两个层拥有相同的名字）。层的名字也不可以是一个数字。

Grouping layers 给层分组

To assign one or more groups to a layer, use the groups property. Doing so will not change the order in which the layer is drawn. The property is merely for categorization purposes.
要给层分配一个或多个组，就要使用groups属性。这么做不会改变层绘制时的顺序。这个属性纯粹是出于分类的目的。

$('canvas').drawRect({
  layer: true,
  groups: ['myBoxes'],
  name: 'box',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});

To dynamically add an existing layer to a group, use the addLayerToGroup() method.
想要动态地将已有层添加到一个组中，请使用addLayerToGroup()方法。

$('canvas').drawRect({
  layer: true,
  name: 'box',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});
$('canvas').addLayerToGroup('box', 'myBoxes');

To dynamically remove an existing layer from a group, use the removeLayerFromGroup() method. Note that this does not remove the layer from jCanvas.
想要动态的从一个组中删除已有层，请使用removeLayerFromGroup()方法。注意，此操作不会将层从jCanvas中删除。

$('canvas').drawRect({
  layer: true,
  groups: ['myBoxes'],
  name: 'box',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});
$('canvas').removeLayerFromGroup('box', 'myBoxes');

Hiding layers 隐藏层

To temporarily hide a layer, set its visible property to false. This also will prevent any of the layer's events from triggering.
想要临时隐藏层，就把它的visible属性设置成false。这也会阻止任意的本层事件的触发。
To show the layer again, set its visible property to true.
要再次显示这个层，就把visible属性设置成true。

// This layer should be invisible 这个层应该是不可见的
$('canvas').drawRect({
  layer: true,
  visible: false,
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});

Function layers 功能层

Instead of an object, the addLayer() method accepts a function using the fn property (this function will run when the layer is drawn). The function also accepts one parameter: the canvas context. 取代对象（作为参数），addLayer()方法使用fn属性接收一个函数（这个函数会在层绘制时运行），这个函数也接收一个参数：画布语境。 jCanvas refers to these types of layers as function layers.
jCanvas将这类层视为功能层。

// Create a named function layer 创建一个命名的功能层
$('canvas').addLayer({
  type: 'function',
  name: 'myBox',
  fn: function(ctx) {
    ctx.fillStyle = '#36c';
    ctx.fillRect(50, 50, 100, 50);
  }
})
.drawLayers();

This also works when using the draw() method and the layer property.
这种做法在使用draw方法和layer属性时也奏效。

// Create and draw a named function layer 创建并绘制一个命名的功能层
$('canvas').draw({
  layer: true,
  name: 'myBox',
  fn: function(ctx) {
    ctx.fillStyle = '#36c';
    ctx.fillRect(50, 50, 100, 50);
  }
});

Setting a layer's index 设置一个层的索引

You can also set a layer's index (in the current layers array) using the index property.
你也可以使用index属性来设置一个层的索引（在当前的层数组中）。

$('canvas')
.addLayer({
  type: 'rectangle',
  name: 'redBox',
  fillStyle: '#c33',
  x: 180, y: 150,
  width: 100, height: 100
})
.addLayer({
  type: 'rectangle',
  name: 'greenBox',
  fillStyle: '#585',
  x: 150, y: 200,
  width: 100, height: 100
})
// Normally on top, but moved to the bottom 正常情况下是在最顶上的，但被移动到了底下
.addLayer({
  type: 'rectangle',
  name: 'blueBox',
  index: 0,
  fillStyle: '#36b',
  x: 230, y: 180,
  width: 100, height: 100
})
.drawLayers();

Keep in mind that a layer's index cannot be greater than the current number of layers. Therefore, you couldn't assign the first layer an index, because there are no other existing layers at that moment.
记住，层的索引不可以比当前层的数量大。因此你不能给第一个层分配索引，因为此刻还不存在其它的层。

You can also use a negative index; a value of -1 will insert the layer before the last.
你也可以使用一个负的索引，值-1会将新层插入到最后一个层的前边（就是变成倒数第2层，倒数第1层在最顶上）。

Storing Data 保存数据

You can also store arbitrary data on any jCanvas layer using the data property.
你也可以使用data属性来在jCanvas层上保存任意信息。

// Create and draw a rectangle layer 创建并绘制一个矩形层
$('canvas').drawRect({
  layer: true,
  data: {
    something: true
  },
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});