Famous Draggable vs. GenericSync with famous-views

Question

我正在通过将 Draggable 和 GenericSync 与 famous 和 meteor famous-views 包一起使用来工作，但不理解（显然）

我想拖动带有约束的表面，并在达到预定限制时执行另一个操作。我正在学习，并且从我发现的示例中，我无法以我正在寻找的灵活性程度来实现这一点。请帮忙！我确定它是一两行让我回到正轨。

这是我的简化模板（包装在 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 和一个用于驱动两者的透明 'drag control' 表面。

<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>

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

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]

Notes

Perspective is driven by a UI.helper named getPerspective that gets it's value from a session var.

As a sidebar, it's probably obvious I'm not totally clear on the proper use of this/@ with respect to javascript context as it relates to my code

Famous Draggable vs. GenericSync with famous-views

Famous Draggable vs. GenericSync with famous-views

coffeescript

meteor

famo.us

famono