Event Touch events 触摸事件 - caleb531/jcanvas-docs GitHub Wiki

Touch Events 触摸事件

jCanvas supports native touch events on iOS and Android using the touchstart, touchend, and touchmove events.
jCanvas支持IOS跟安卓上本地触摸事件,使用touchstarttouchendtouchmove事件。

// This demo will only work on iOS and Android 本例只适用于IOS跟安卓
$('canvas').drawRect({
  layer: true,
  fillStyle: '#36c',
  x: 150, y: 100,
  width: 120, height: 80,
  touchstart: function(layer) {
    // Animate layer when touched 当触摸时,动态化层
    $(this).animateLayer(0, {
      fillStyle: '#c33',
      scale: 1.5
    }, 250);
  },
  touchend: function(layer) {
    // Revert layer when touch ends 当触摸结束时,恢复层
    $(this).animateLayer(0, {
      fillStyle: '#36c',
      scale: 1
    }, 250);
  }
});

As a bonus, jCanvas will also convert existing mousedown, mouseup, and mousemove callbacks to their respective touch events on iOS and Android. In other words, jCanvas code that you've written for desktop browsers will be automatically optimized for mobile browsers on iOS and Android.
除此之外,jCanvas也将已经存在的mousedownmouseupmousemove回调函数,转化成在IOS和安卓上的对应的触摸事件。换句话说,你为桌面浏览器编写的jCanvas代码,会被自动优化成适合IOS及安卓浏览器(的代码)。

// This demo will work on iOS, Android, and desktop browsers
//本例可在IOS,安卓和桌面浏览器中运行
$('canvas').drawRect({
  layer: true,
  fillStyle: '#36c',
  x: 150, y: 100,
  width: 120, height: 80,
  mousedown: function(layer) {
    // Animate layer when moused on or touched 当鼠标指向或触摸时,动态化层
    $(this).animateLayer(0, {
      fillStyle: '#c33',
      scale: 1.5
    }, 250);
  },
  mouseup: function(layer) {
    // Animate layer when moused off or touch ends 当鼠标拿开或触摸停止时,动态化层
    $(this).animateLayer(0, {
      fillStyle: '#36c',
      scale: 1
    }, 250);
  }
});

At this time, jCanvas does not support multi-touch.
此刻,jcanvas还不能支持多点触摸