Event Mouse events 鼠标事件 - caleb531/jcanvas-docs GitHub Wiki

Mouse events 鼠标事件

jCanvas supports a number of standard mouse events that you can use on most types of jCanvas layers.
jCanvas支持一些标准的鼠标事件，你可以在大部分类型的jCanvas层上使用它们。

Events and animation 事件及动画

When you click the star in the demo below, it will spin.
当你点击下边示例中的星时，它会旋转

// Click the star to make it spin 点击星以使其旋转
$('canvas').drawPolygon({
  layer: true,
  fillStyle: '#c33',
  x: 100, y: 100,
  radius: 50,
  sides: 5,
  concavity: 0.5,
  click: function(layer) {
    // Spin star 旋转星
    $(this).animateLayer(layer, {
      rotate: '+=144'
    });
  }
});

Multiple layers with events 带有事件的多重层

This example utilizes multiple layers with events attached.
本例使用了附加了事件的多重层。
When calling the animateLayer() method, you should pass it the layer object to animate that particular layer. Failing to do so will animate the first layer by default.
当调用animateLayer()方法时，你应该将层对象传进去，以动态化那个指定的层。如果失败的话，默认会动态化第一个层。

// Create five cascading stars 创建五级联星
for (var i=0; i<5; i+=1) {
  $('canvas').drawPolygon({
    layer: true,
    fillStyle: '#c33',
    x: 50+(i*60), y: 50,
    radius: 30,
    sides: 5,
    concavity: 0.5,
    click: function(layer) {
      // Click a star to spin it
      $(this).animateLayer(layer, {
        rotate: '+=144'
      });
    }
  });
}

The `mouseover` and `mouseout` events 鼠标悬停及移出事件

The mouseover and mouseout can be used separately, or together.
mouseover及mouseout可以分别使用或一起使用。