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>

和一些coffeescript：

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]

备注


透视由名为getPerspective的UI.helper驱动，它从会话var中获取它的值。

作为一个侧边栏，可能很明显我并不完全清楚javascript上下文正确使用this/@因为它与我的代码有关

着名的Draggable vs. GenericSync与着名的观点

1 个答案: