Fabric.js之touch事件详解

根据官网demo

http://fabricjs.com/touch-events

This demo uses custom version of Fabric with touch events enabled. Try dragging an image, shaking, longpressing it or changing orientation.

翻译过来

此演示使用启用了触摸事件的自定义Fabric版本。尝试拖动图像、摇晃、长按或更改方向。

图片展示

在标注区域操作，根据下方代码打印出对应操作事件名，下方概括了比较全的事件，具体查询所有事件请回到目录点击fabric.js中文文档

核心代码注解

var canvas = new fabric.Canvas('c');
fabric.Image.fromURL('../assets/pug_small.jpg', function(img) {
  img.scale(0.5).set({
    left: 150,
    top: 150,
    angle: -15
  });
  canvas.add(img).setActiveObject(img);
});

var info = document.getElementById('info');
// 可以看到fabric.js主要把touch事件绑定在 canvas对象上。
canvas.on({
    // 手势事件
  'touch:gesture': function() {
    var text = document.createTextNode(' Gesture ');
    info.insertBefore(text, info.firstChild);
  },
  // 拖动事件
  'touch:drag': function() {
    var text = document.createTextNode(' Dragging ');
    info.insertBefore(text, info.firstChild);
  },
  // 方向事件
  'touch:orientation': function() {
    var text = document.createTextNode(' Orientation ');
    info.insertBefore(text, info.firstChild);
  },
  //摇晃事件
  'touch:shake': function() {
    var text = document.createTextNode(' Shaking ');
    info.insertBefore(text, info.firstChild);
  },
  // 长按事件
  'touch:longpress': function() {
    var text = document.createTextNode(' Longpress ');
    info.insertBefore(text, info.firstChild);
  }
});

以上就是Fabric.js之touch事件详解全部内容,感谢大家支持自学php网。