Event API - caleb531/jcanvas-docs GitHub Wiki

Event API 事件接口

jCanvas supports mouse and touch events for most drawings through the included Event API. Events are used in conjunction with the Layer API.
jCanvas通过事件接口,支持大部分绘图的鼠标及触摸事件,事件与层接口并联使用。

Binding Events 绑定事件

Any number of jCanvas events can be bound to any jCanvas layer.
任意多的jCanvas事件都可以被绑定到任何jCanvas层上。
The event property's name is always the name of the event itself (click, mousedown, etc.). These properties should be defined in the object passed to the addLayer() method.
事件属性的名字就是事件本身的名称(clickmousedown等等)。这些属性应该被定义在对象中,传入到addLayer()方法中。
The value of this event property must be a function. This callback function also accepts one argument, which is the layer's object of properties, as used below. Additionally, the this keyword refers to the canvas DOM element.
事件属性的值必须是一个函数,这个回调函数也接收一个参数,参数为层对象的属性,就像下边使用的那样。还有,关键字this指的是画布的DOM元素。

// Draw a green rectangle 画绿矩形
$('canvas').drawRect({
  layer: true,
  fillStyle: '#6c0',
  x: 100, y: 100,
  width: 100, height: 80,
  click: function(layer) {
    // code to run when square is clicked 当方形被点击时运行的代码
  }
});

Trigger an event 触发事件

You can also manually trigger an existing event or trigger a nonexisting event to create your own. To do so, use the triggerLayerEvent() method.
你也可以手动触发一个已经存在的事件,或触发一个不存在的事件来创建你自己的(事件??)。为了做到这点,请使用triggerLayerEvent()方法。

$('canvas').triggerLayerEvent('myLayer', 'click');
$('canvas').triggerLayerEvent('myLayer', 'resize');

Note that the triggerLayerEvent() method will trigger all defined event callbacks and event hooks for the given event.
注意:triggerLayerEvent()方法会触发给定事件的,所有已定义的事件回调,及事件钩子。

Supported Methods 支持的方法

  • drawRect()
  • drawArc()
  • drawEllipse()
  • drawLine()
  • drawQuadratic()
  • drawBezier()
  • drawVector()
  • drawGraph()
  • drawPolygon()
  • drawImage()
  • drawText()

Supported Events 支持的事件

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • dragstart
  • drag
  • dragstop
  • touchstart
  • touchend
  • touchmove