Event Properties 事件属性

jCanvas supports a number of event-related properties which make the Event API more powerful and flexible.
jcanvas支持一些事件相关的属性，它们使事件接口更加强大更灵活。

The eventX and eventY properties 属性eventX和eventY

In any event callback, you have access to the layer's eventX and eventY properties. These are the coordinates of the pointer (either mouse or finger) when the event fired.
在每个事件回调中，你都能访问层的eventX和eventY属性。它们是事件触发时指针（鼠标或手指）的坐标。
In the following example, the closer you hover to the circle's center, the more transparent it will become.
在下边的示例中，你悬停得离圆心越近，圆就越透明。

$('canvas').drawArc({
  layer: true,
  fillStyle: '#c33',
  x: 160, y: 200,
  radius: 100,
  mousemove: function(layer) {
    var distX, distY, dist;
    distX = layer.eventX - layer.x;
    distY = layer.eventY - layer.y;
    //根据代码看，eventX跟eventY应该是指针相对于画布左上角的坐标
    // the distance from the circle's center距离圆心的距离
    dist = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));
    layer.opacity = dist / layer.radius;
  }
});

The dx and dy properties 属性dx及dy

In any drag-related event callback for a draggable layer, you have access to the layer's dx and dy properties. These properties represent the change in the layer's position when dragging.
对于可拖拽层来说，在每个与拖拽相关的事件回调中，你都可以访问层的dx及dy属性。这些属性代表的是当拖拽时层定位上的改变量。
That is, the larger the values are, the faster you are dragging the layer. Conversely, the smaller the values, the slower you are dragging. Also note that these values can be positive or negative depending on the direction of the drag.
也就是，值越大，你拖拽层的速度越快。相反，值越小，你拖拽的速度越小。还要注意，值可正可负，取决于拖拽的方向。
In the following example, the opacity of the circle is determined by the speed at which you drag it; that is, the circle will become more faded the faster you drag it.
在下边的例子中，圆的不透明度，取决于你拖拽它的速度，也就是你拖拽圆越快，它就变得越淡。

$('canvas').drawArc({
  layer: true,
  draggable: true,
  fillStyle: '#c33',
  x: 160, y: 160,
  radius: 50,
  mousemove: function(layer) {
    var delta = Math.sqrt(Math.pow(layer.dx, 2) + Math.pow(layer.dy, 2));
    if (delta !== 0) {
      layer.opacity = 1 / delta;
    }
  }
});

The cursors property（光标）cursors属性

The cursors property is used to display a specific cursor when a particular layer event fires.
cursors属性是当一个特定的层事件触发时，用来显示特定光标的。

$('canvas').drawText({
  layer: true,
  draggable: true,
  fillStyle: '#9cf',
  strokeStyle: '#000',
  strokeWidth: 2,
  x: 180, y: 100,
  text: 'Click here',
  fontFamily: 'Trebuchet MS',
  fontSize: 64,
  // Show pointer cursor on hover 悬停的时候显示光标
  cursors: {
    // Show pointer on hover 悬停时显示“pointer”型
  	mouseover: 'pointer',
  	// Show 'move' cursor on mousedown 鼠标按下时显示“move”型
  	mousedown: 'move',
  	// Revert cursor on mouseup 鼠标弹起时显示“pointer”型
  	mouseup: 'pointer'
  }
});

jCanvas also adds the correct vendor prefix to a select few CSS3 cursors that require a vendor prefix. These cursor values include grab, grabbing, zoom-in, and zoom-out.
jcanvas也添加了供应商前缀，以选择一些需要供应商前缀的CSS3光标，这些光标值包括grab（抓取），grabbing（正在抓取），zoom-in（放大/近景）和zoom-out（缩小/远景）。
Please note that the cursor always reverts to its previous state when you mouse off the layer
请注意，当你鼠标离开层的时候，指针总会恢复到之前的状态。

The intangible property（无形）intangible属性

The intangible property essentially allows you to "click through" a layer as if it didn't exist.
intangible属性实质上允许你“点穿”一个层，就像它不存在一样。

$('canvas')
.drawArc({
  layer: true,
  draggable: true,
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50
})
.drawRect({
  layer: true,
  draggable: true,
  // Slight transparency, just for fun 稍微透明，只是好玩
  opacity: 0.5,
  intangible: true,
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100
});