著名的 Draggable 与 GenericSync 的著名视图

Question

我正在使用 Draggable 和 GenericSync 以及著名和流星著名的视图包，但不理解（显然）

我想拖动带有约束的表面，并在达到预定限制时执行另一个操作。我正在学习，并且从我发现的示例中，我无法以我正在寻找的灵活性程度来完成这项工作。请帮忙！我敢肯定，只要一两行字就能让我重回正轨。

这是我的简化模板（包装在 HeaderFooterView 内的 RenderController 中）：

<template name="test4">
{{#View origin='[.5,.5]' align='[.5,.5]'}}
  {{>Surface id="cube4" template="cubeFace4" class="grayDarker" size="[400,400]" properties="padding:20px" modifier="Draggable"}}
{{/View}}
</template>

<template name="cubeFace4">
  <div style="width: 90%; height: 90%; margin: 5.5% auto;">
    {{>svgFamoWrapped}}
  </div>
</template>

还有一些咖啡脚本：

Template.test4.rendered = ->
  @fview = FView.byId 'cube4'
  @drag = @fview.modifier # modifier is 'Draggable'
  @cube = @fview.surface
  position = [0,0]
  # cube.pipe drag

  @drag.setOptions
    xRange: [-500,500]
    yRange: [-10,10]
    projection: 'Famous.Draggable._direction.x'

  @sync = new Famous.GenericSync ['mouse','touch'] #,
    # direction: Famous.GenericSync.DIRECTION_X

  @cube.pipe @drag
  @drag.pipe @sync

  @drag.on 'update', (data) ->
    position[0] += data.delta[0]
    position[1] += data.delta[1]
    console.log data
    @drag.setPosition position

  @drag.on 'end', =>
    drag.setPosition [0,0],
      curve: 'outElastic'
      duration: 400

Answer 1

我在经过多次试验和错误后发现Draggable 是一个方便的包装器，而GenericSync 可以更轻松地获得我想要的灵活性程度。

以下模板有一个 ContainerSurface 来保存内容和一个透明的“拖动控制”表面来驱动两者。

<template name="square">
  {{#ContainerSurface size="[undefined,undefined]" origin='[0.5,0.5]' align='[0.5,0.5]' perspective=getPerspective overflow="hidden"}}
    {{#StateModifier id="square" size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]" transform=squareTransform }}
      {{#StateModifier size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]" translate="[0,0,0]"}}
        {{>Surface template="squareContent" class="grayDarker backfaceVisible" size="[undefined,undefined]"}}
      {{/StateModifier}}
    {{/StateModifier}}
    {{#StateModifier size="[400,400]" origin="[0.5,0.5]" align="[0.5,0.5]" transform=dragTransform }}
      {{>Surface id="dragCtl" template="emptyDiv" size="[400,400]" class="redBorder" }}
    {{/StateModifier}}
  {{/ContainerSurface}}
</template>

这是我用来使表面相对于单独的拖动控制表面可拖动的咖啡脚本。

Template.square.created = ->
  position = [0,0]
  Session.set 'dragPosition',position


Template.square.helpers
  'dragTransform': ->
    position = Session.get 'dragPosition'
    absPosX = Math.abs position[0]
    limX = Math.round (window.innerWidth * 0.5)
    if absPosX < limX
      position[0] = position[0]
    else
      position[0] = Math.sign(position[0]) * limX
    console.log Famous.Transform
    Famous.Transform.translate(position[0],position[1],0)

  'squareTransform': ->
    position = Session.get 'dragPosition'
    limX = Math.round (window.innerWidth * 0.5)
    if Math.abs(position[0]) > limX
      position[0] = Math.sign(position[0]) * limX
    Famous.Transform.translate(position[0],position[1],0)

Template.square.rendered = ->
  position = [0,0]
  Session.set 'dragPosition',position
  Session.set 'perspective',1000

  dragFV = FView.byId 'dragCtl'
  dragSrf = dragFV.surface
  drag = dragFV.modifier

  @sync = new Famous.GenericSync ['mouse','touch']

  dragSrf.pipe @sync

  @sync.on 'update', (data) ->
    position[0] += data.delta[0]
    position[1] += data.delta[1]
    Session.set 'dragPosition',position

  @sync.on 'end', =>
    position = [0,0]
    Session.set 'dragPosition',[0,0]

备注

1. 透视由名为 getPerspective 的UI.helper 驱动，它从会话变量中获取其值。
2. 作为一个侧边栏，很明显我并不完全清楚 this/@ 与我的代码相关的 JavaScript 上下文的正确使用