Framer.js Hammer.js整合

时间:2015-02-08 12:04:59

标签: javascript coffeescript multi-touch hammer.js framerjs

我发现Koen Bok的这个小宝石几周前将Hammer.js事件整合到Framer.js中。然而,它是为较旧版本的Hammer制作的,后来改写了。从理论上讲,我可以通过调整HammerEvents轻松地将它移植到新版本,并且一切似乎都适用于平移和滑动事件。但由于某些原因,我可以不使用最近的Hammer脚本(2.0.4)来获取压缩或旋转事件。

这是Hammer.js 1.1.3的原始片段:

HammerEvents =

    Tap: 'tap'
    DoubleTap: 'doubletap'
    Hold: 'hold'
    Touch: 'touch'
    Release: 'release'
    Gesture: 'gesture'

    Swipe: 'swipe'
    SwipeUp: 'swipeup'
    SwipeDown: 'swipedown'
    SwipeLeft: 'swipeleft'
    SwipeRight: 'swiperight'

    Transform: 'transform'
    TransformStart: 'transformstart'
    TransformEnd: 'transformend'

    Rotate: 'rotate'

    Pinch: 'pinch'
    PinchIn: 'pinchin'
    PinchOut: 'pinchout'

window.Events = _.extend Events, HammerEvents

class HammerLayer extends Framer.Layer

    on: (eventName, f) ->

        if eventName in _.values(HammerEvents)
            @ignoreEvents = false
            hammer = Hammer(@_element).on eventName, f

        else
            super eventName, f

window.Layer = HammerLayer

有人知道出了什么问题吗? 非常感谢!

1 个答案:

答案 0 :(得分:0)

刚尝过这个片段。它似乎工作得很好。 我用这段代码试了一下:

doubleTap = new HammerLayer

doubleTap.on HammerEvents.DoubleTap, ->
    print "You just doubletapped me."

您确定将Hammer.js javascript库包含在Framer原型中吗?

  1. http://hammerjs.github.io/dist/hammer.min.js保存到您的Framer项目中。我把它放在一个名为js
  2. 的子文件夹中
  3. 在Framer文件夹中打开index.html,并在所有其他<script src="js/hammer.min.js"></script>内容之后添加行<script>
  4. 你的Hammer事件现在应该在Framer中触发。