推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
makelove

2022 年哪个手势识别库最好用?

  •  
  •   makelove · Jan 12, 2022 · 3686 views
    This topic created in 1606 days ago, the information mentioned may be changed or developed.

    搜索了下貌似很多都不更新了?

    我要做个图片查看器,可以类似手机里的系统图片查看器可以双指放大的那种,貌似一个这种好用的图片查看器 js 组件都没有?说好的前端轮子多呢。我只好自己来了。

    最好是有 typescript ,没有的话代码要简单我可以自己改。

    9 replies    2022-01-13 09:46:46 +08:00
    Ritr
        1
    Ritr  
       Jan 12, 2022   ❤️ 1
    hammer.js
    66beta
        2
    66beta  
       Jan 12, 2022
    hammer.js 应该可以再用 100 年
    oott123
        3
    oott123  
       Jan 12, 2022
    针对你的原始需求,https://photoswipe.com 好像比较出名。
    makelove
        4
    makelove  
    OP
       Jan 12, 2022
    @oott123 这个我之前搜到过测试了下它的 demo 没几秒就发现有 bug 就直接 pass 了(就是双指缩放时图片会跳,比如突然跳到左上角了或跳没了,bug 出现频率非常高
    h82258652
        5
    h82258652  
       Jan 12, 2022
    hammer.js+1 ,n 年前 jQuery 时代就用它了,现在还是用它
    makelove
        6
    makelove  
    OP
       Jan 12, 2022
    hammer 有点老,且似乎也不更新了,体积又大。

    搜索到有一些国产的
    https://any86.github.io/any-touch/
    https://github.com/18223781723/noname-gesture/
    http://alloyteam.github.io/AlloyFinger/

    发现基本的手势识别也很简单啊,最后一个核心代码只有 100 行,打算基于最后一个搞自己的轮子用 ts 重写。demo 上功能少了运动速度(就是手一松就停了)和双指放大不是从中心放大的,不过既然是做轮子了这些也能加上。
    ByteRan
        7
    ByteRan  
       Jan 12, 2022
    AlloyFinger +1 基于 AlloyFinger 魔改过
    makelove
        8
    makelove  
    OP
       Jan 12, 2022
    @tanranran 搞了才发现从 AlloyFinger 开始不合适,这货是基于 touch events 事件,没法用于鼠标操作,因为和 pointer events 差别巨大还不好改,我还是从 noname-gesture 开始吧
    noobma
        9
    noobma  
       Jan 13, 2022
    https://github.com/xd-tayde/mtouch

    demo 里面有拖动、双指放大、旋转
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   929 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 52ms · UTC 19:43 · PVG 03:43 · LAX 12:43 · JFK 15:43
    ♥ Do have faith in what you're doing.