Image placeholder

Pressure.js – 用于处理Force Touch,3D Touch的JavaScript库

Image placeholder
F2EX 2018-04-05

Pressure.js 是一个用于处理 web 上的 Force Touch ,3D Touch 和指针压力的 JavaScript 库。

Pressure.js 兼容大多数浏览器,通过简单的 API 来控制这些压力触控,它还支持多点触摸。你完全可以在 web 上实现 iphone 中的 3D Touch 效果 :)

安装

可以从 GitHub 下载 pressure.min.js 或 pressure.js 文件,也可以使用 npm 或 bower 进行安装。

npm

npm install pressure --save

bower

bower install pressure --save

配置

Pressure.set('#id-name', {
  change: function(force){
    this.innerHTML = force;
  }
});

或者与 browserify 或 CommonJS 一起使用:

var Pressure = require('pressure');

Pressure.set('#id-name', {
  change: function(force){
    this.innerHTML = force;
  }
});

用法

Pressure.set('#element', {
  start: function(event){
    // 开始时
  },
  end: function(){
    // 结束时
  },
  startDeepPress: function(event){
    // 压感触控/深压时, 也就是一旦压感大于0.5时
  },
  endDeepPress: function(){
    // 当压感触控/深压结束时
  },
  change: function(force, event){
    // 每次压感发生变化时都会被调用
    // 在移动设备和桌面端,压感的值始终为0到1
  },
  unsupported: function(){
    // 注意:只有在polyfill选项被禁用的情况下才会调用这个选项!
    // 一旦触摸元素并且设备或浏览器不支持压感触控或3D触控时调用
  }
});
jQuery 用法
$('#element').pressure({
    start: function (event) {
        // 开始时
    },
    end: function () {
        // 结束时
    },
    startDeepPress: function (event) {
        // 压感触控/深压时, 也就是一旦压感大于0.5时
    },
    endDeepPress: function () {
        // 当压感触控/深压结束时
    },
    change: function (force, event) {
        // 每次压感发生变化时都会被调用
        // 在移动设备和桌面端,压感的值始终为0到1
    },
    unsupported: function () {
        // 注意:只有在polyfill选项被禁用的情况下才会调用这个选项!
        // 一旦触摸元素并且设备或浏览器不支持压感触控或3D触控时调用
    }
});

2018-04-14