网站地图    收藏   

主页 > canvas引擎 > Fabricjs >

Fabric.js之touch事件详解

来源:未知    时间:2022-09-28 14:02 作者:小飞侠 阅读:

[导读] 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.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版本。尝试拖动图像、摇晃、长按或更改方向。

图片展示

image.png

在标注区域操作,根据下方代码打印出对应操作事件名,下方概括了比较全的事件,具体查询所有事件请回到目录点击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网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论