Mechanical Events 机械事件

jCanvas allows you to run a callback when you perform a layer-related action, such as adding a new layer or removing an existing layer. These events are referred to in jCanvas terminology as mechanical events, though they work like any other jCanvas event.
jCanvas允许你在演示一个与层相关的动作时运行一个回调函数，例如增加一个新层或删除一个已有层时。这些都被引用进jCanvas的技术范围内，作为机械事件，尽管它们与其它jCanvas事件运行得很像。

The add event（添加）add事件

The add event fires when a layer is added (but before it is drawn).
当一个层被添加的时候（但在绘制之前），触发add事件。

$('canvas').drawRect({
  layer: true,
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 100,
  add: function(layer) {
    // code to run when layer is added 当层被添加时运行的代码
  }
});

The remove event（删除）remove事件

The remove event fires when a layer is removed using the removeLayer() method.
当一个层使用removeLayer()方法删除的时候，触发remove事件。

$('canvas').drawRect({
  layer: true,
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 100,
  remove: function(layer) {
    // code to run when layer is removed 层被删除时运行的代码
  }
});

Note that when using methods such as the removeLayerGroup() method, a remove event will fire for each layer in the group.
注意，当使用诸如removeLayerGroup()之类的方法时，组内每个层都会触发一次remove事件。

The change event（修改）change事件

The change event fires when a layer's properties are changed using the setLayer() method.
当层的属性使用setLayer()方法被修改时，触发change事件。

$('canvas').drawRect({
  layer: true,
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 100,
  change: function(layer, props) {
    // code to run when layer properties are changed 层属性被修改时触发
  }
});

Note that when using methods such as the setLayerGroup() method, a change event will fire for each layer in the group.
注意，当使用诸如setLayerGroup()的方法时，组内每个层都会触发一次change事件。

The move event（移动）move事件

The move event fires when a layer is moved to a new position using the moveLayer() method (or indirectly via moveLayers() or moveLayerGroup()).
当使用moveLayer()方法（或不直接通过moveLayers()或moveLayerGroup()方法）将一个层移动到一个新位置时，触发move事件。

$('canvas').drawRect({
  layer: true,
  name: 'box',
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 100,
  move: function(layer) {
    // code to run when layer's order on canvas is changed 当层在画布上的顺序改变时要运行的代码
  }
});
$('canvas').moveLayer('box', 2);

Animation events 动画事件

jCanvas provides the following events pertaining to animation: animatestart, animate, and animateend.
jcanvas为动画提供了下边几种事件：animatestart，animate，animateend。

$('canvas').drawRect({
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 100,
  animatestart: function(layer) {
    // code to run when animation starts 动画开始时运行的代码
  },
  animate: function(layer, fx) {
    // code to run on each frame of the animation 动画每帧都运行的代码
    // fx contains animation-related properties 参数fx包含了动画的相关属性
  },
  animateend: function(layer) {
    // code to run when animation ends 动画停止时运行的代码
  }
});

jCanvas also supports a stop event, which fires when the stopLayer() method is called.
jCanvas也提供了一个stop（停止）事件，当调用stopLayer方法时触发。

$('canvas').drawRect({
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 100,
  stop: function(layer) {
    // code to run when animation is stopped 当动画停止时运行的代码
  }
});

Similarly, jCanvas supports a delay event, which fires when the delayLayer() method is called.
相似地，jCanvas支持一个delay（延迟）事件，当调用delayLayer()方法时触发。

$('canvas').drawRect({
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 100,
  delay: function(layer) { // 原文里边使用的是delayed是错误的，没有ed
    // code to run when animation is delayed 动画被延迟时运行的代码
  }
});