- Draggable
- layer.draggable.enabled <布尔值>
- layer.draggable.horizontal <布尔值>
- layer.draggable.vertical <布尔值>
- layer.draggable.speedX <数字>
- layer.draggable.speedY <数字>
- layer.draggable.constraints <对象>
- layer.draggable.constraintsOffset <对象>
- layer.draggable.isBeyondConstraints <布尔值>
- layer.draggable.overdrag <布尔值>
- layer.draggable.overdragScale <数字>
- layer.draggable.momentum <布尔值>
- layer.draggable.momentumOptions <对象>
- layer.draggable.bounce <布尔值>
- layer.draggable.bounceOptions <对象>
- layer.draggable.velocity <对象>
- layer.draggable.direction
- layer.draggable.angle <数字>
- layer.draggable.updatePosition(point)
- layer.draggable.directionLock <布尔值>
- layer.draggable.directionLockThreshold <对象>
- layer.draggable.pixelAlign <布尔值>
- layer.draggable.isDragging <布尔值>
- layer.draggable.isAnimating <布尔值>
- layer.draggable.isMoving <布尔值>
- layer.draggable.offset <对象>
- layer.draggable.layerStartPoint <对象>
- layer.draggable.cursorStartPoint <对象>
- layer.draggable.layerCursorOffset <对象>
- layer.draggable.propagateEvents <布尔值>
Draggable
图层可以被垂直拖放,也可以被水平拖放,或者同时垂直水平拖放。在拖放时还可以模拟因惯性晃来晃去的效果。如果想让拖放在某个位置停止,你还可以限定拖放的区域范围。虽然限定了拖放范围,但还是可以允许其被拖拽出去,但是默认地它会被弹回来。
layer.draggable.enabled <布尔值>
让图层可已以被拖放。
layerA = new Layer
layerA.draggable.enabled = true
layer.draggable.horizontal <布尔值>
开启或者关闭水平方向的拖放。
layerA = new Layer
layerA.draggable.enabled = true
#Disable horizontal dragging
layerA.draggable.horizontal = false
layer.draggable.vertical <布尔值>
开启或者关闭垂直方向的拖放。
layerA = new Layer
layerA.draggable.enabled = true
#Disable vertical dragging
layerA.draggable.vertical = false
layer.draggable.speedX <数字>
改变水平方向拖动的速度。它的值是鼠标每移动一像素被拖动元素所移动的像素值,默认值是1。当设置的值小于1时,拖动时元素移动距离将会小于鼠标移动距离。当其值为0时,水平方向拖拽就被禁止了。
layerA = new Layer
layerA.draggable.enabled = true
# Make horizontal dragging slow
layerA.draggable.speedX = 0.1
# Make horizontal dragging fast
layerA.draggable.speedX = 10
layer.draggable.speedY <数字>
改变垂直方向拖动的速度。它的值是鼠标每移动一像素被拖动元素所移动的像素值,默认值是1。当设置的值小于1时,拖动时元素移动距离将会小于鼠标移动距离。当其值为0时,垂直方向拖拽就被禁止了。
layerA = new Layer
layerA.draggable.enabled = true
# Make vertical dragging slow
layerA.draggable.speedY = 0.1
# Make vertical dragging fast
layerA.draggable.speedY = 10
layer.draggable.constraints <对象>
拖拽区域,即限制图层可以被拖动的范围。如果你给constraints设置了x和y属性,那么图层在DragStart(开始拖动)时会自动定位到这个坐标点,在你点击时它就会以过渡动画的形式移动过去。
layerA = new Layer
layerA.draggable.enabled = true
# Set dragging constraints
layerA.draggable.constraints =
x: 0
y: 0
width: 200
height: 200
layer.draggable.constraintsOffset <对象>
获取可拖动图层相对于其拖动范围的位置偏移。如果你将constraints设置为{ x: 100, y: 100 },而图层默认的初始位置在坐标原点(0,0),此时就可以通过constraintsOffset来计算他当前相对于拖拽区域的偏移,结果是{ x:-100, y:-100 } 。当你拖动它时他就会立即被弹回到拖拽区域。
layerA = new Layer
layerA.draggable.enabled = true
# Set dragging constraints
layerA.draggable.constraints =
x: 100
y: 100
width: 200
height: 200
# Get the constraintsOffset
print layerA.draggable.constraintsOffset
# Returns { x:-100, y:-100 }
layer.draggable.isBeyondConstraints <布尔值>
查看当前可拖拽图层是否超出了拖拽区域(只读)。
layerA = new Layer
layerA.draggable.enabled = true
# Set dragging constraints
layerA.draggable.constraints =
x: 100
y: 100
width: 400
height: 400
# On move, see if the layer is beyond constraints or not
layerA.on Events.Move, ->
print layerA.draggable.isBeyondConstraints
layer.draggable.overdrag <布尔值>
启用或禁用是否允许超出拖拽区域。
layerA = new Layer
layerA.draggable.enabled = true
layerA.draggable.constraints =
x: 0
y: 0
width: 200
height: 200
# Disable dragging beyond constraints
layerA.draggable.overdrag = false
layer.draggable.overdragScale <数字>
设置超出拖拽区域时的拖拽阻力。其值是一个0到1的数字,默认为0.5。
layerA = new Layer
layerA.draggable.enabled = true
layerA.draggable.constraints =
x: 0
y: 0
width: 200
height: 200
# Increase resistance when dragging beyond constraints
layerA.draggable.overdragScale = 0.25
layer.draggable.momentum <布尔值>
开启或禁用拖拽时的动量/惯性模拟,默认是开启的。
layerA = new Layer
layerA.draggable.enabled = true
# Disable momentum
layerA.draggable.momentum = false
layer.draggable.momentumOptions <对象>
拖拽后动量模拟的详细设置。
layerA = new Layer
layerA.draggable.enabled = true
# Define friction and tolerance of momentum
layerA.draggable.momentumOptions =
friction: 2.1
tolerance: 0.1
layer.draggable.bounce <布尔值>
当拖动超出拖拽区域时,动量模拟是否启用弹性动画。
layerA = new Layer
layerA.draggable.enabled = true
layerA.draggable.constraints =
x: 0
y: 0
width: 200
height: 200
# Snap back after dragging beyond constraints
layerA.draggable.bounce = false
layer.draggable.bounceOptions <对象>
当拖动超出拖拽区域时,动量模拟的弹性动画详细设置。
layerA = new Layer
layerA.draggable.enabled = true
layerA.draggable.constraints =
x: 0
y: 0
width: 200
height: 200
# Define friction, tension and tolerance of bounce
layerA.draggable.bounceOptions =
friction: 40,
tension: 200,
tolerance: 0.0001
layer.draggable.velocity <对象>
当前拖拽图层的速度,它是只读的。
layerA = new Layer
layerA.draggable.enabled = true
# On DragMove, print the x and y velocity
layerA.draggable.on Events.DragMove, ->
print layerA.draggable.velocity
layer.draggable.direction
当前拖拽的方向,会返回”up”, “down”, “left” 或 “right”中的一个,它也是只读的。
layerA = new Layer
layerA.draggable.enabled = true
# Print the current direction
layerA.on Events.DragMove, ->
print layerA.draggable.direction
layer.draggable.angle <数字>
当前拖动的角度(角度制),它是只读的。
layerA = new Layer
layerA.draggable.enabled = true
# Print the current angle
layerA.on Events.DragMove, ->
print layerA.draggable.angle
layer.draggable.updatePosition(point)
这个方法可以让你覆盖之前设置的最终值。你可以给拖动添加自定义行为,让该图层在固定的距离范围内迅速移动。
参数
- point — An object with x and y properties.
layerA = new Layer
layerA.draggable.enabled = true
# Round numbers to a set amount
round = (number, nearest) ->
Math.round(number / nearest) * nearest
# Drag in increments of 20px
layerA.draggable.updatePosition = (point) ->
point.x = round(point.x, 20)
point.y = round(point.y, 20)
return point
layer.draggable.directionLock <布尔值>
在拖动距离超过某一上限之后,限定你只能在垂直和水平中的一个方向进行拖动。
layerA = new Layer
layerA.draggable.enabled = true
# Allow dragging only in one direction at a time
layerA.draggable.directionLock = true
layer.draggable.directionLockThreshold <对象>
锁定方向的上限。x和y的值代表在它锁定方向之前你可以在两个方向上拖动的距离。
layerA = new Layer
layerA.draggable.enabled = true
# Snap horizontally after dragging 50px
# Snap vertically instantly
layerA.draggable.directionLock = true
layerA.draggable.directionLockThreshold =
x: 50
y: 0
layer.draggable.pixelAlign <布尔值>
在拖动时是否对齐像素,用以取消子像素抗锯齿。
layerA = new Layer
layerA.draggable.enabled = true
# Snap to pixel while dragging
layerA.draggable.pixelAlign = true
layer.draggable.isDragging <布尔值>
判断现在某个图层是否正在被拖动(松开后动画时返回的是false),它是只读的。
layerA = new Layer
layerA.draggable.enabled = true
# Check if the layer is being dragged
layerA.on Events.DragMove, ->
print layerA.draggable.isDragging
layer.draggable.isAnimating <布尔值>
判断当前图层是否正在进行模拟动量或弹性动画,它是只读的。
layerA = new Layer
layerA.draggable.enabled = true
# Check if the layer is animating
layerA.on Events.DragMove, ->
print layerA.draggable.isAnimating
layer.draggable.isMoving <布尔值>
判断当前图层是否在移动,无论是因为拖动移动还是因为模拟动量或弹性动画,它是只读的。
layerA = new Layer
layerA.draggable.enabled = true
# Check if the layer is moving
layerA.on Events.DragMove, ->
print layerA.draggable.isMoving
layer.draggable.offset <对象>
获取当前可拖动图层相对于屏幕的位置信息(x和y坐标),它是只读的。
layerA = new Layer
layerA.draggable.enabled = true
# Get the x and y position of the layer
layerA.on Events.DragMove, ->
print layerA.draggable.offset
layer.draggable.layerStartPoint <对象>
获取开始拖动时该图层的位置信息(只读)。
layerA = new Layer
layerA.draggable.enabled = true
# On DragStart, get the current x and y position
layerA.on Events.DragStart, ->
print layerA.draggable.layerStartPoint
layer.draggable.cursorStartPoint <对象>
获取开始拖动时光标相对于画布的位置信息(只读)。
layerA = new Layer
layerA.draggable.enabled = true
# On DragStart, get x and y position of the cursor
layerA.on Events.DragStart, ->
print layerA.draggable.cursorStartPoint
layer.draggable.layerCursorOffset <对象>
获取光标相对于该可拖动图层的位置偏移。如果你拖动该图层的左上角,将会返回{ x: 0, y: 0 }
(只读)。
layerA = new Layer
layerA.draggable.enabled = true
# Get the cursor position within the layer
layerA.on Events.DragStart, ->
print layerA.draggable.layerCursorOffset
layer.draggable.propagateEvents <布尔值>
设置可拖动图层的事件传播属性,默认为true
。当你在ScrollComponents
和PageComponents
等嵌套组件里面添加可拖动图层时,该属性就会派上用场。
比如说你想在scroll.content
图层中添加一个可拖动图层。默认情况下,拖动该图层时scroll.content
图层也会跟着被拖动,这是因为他们都监听到拖动事件了。
想要在拖动可拖动图层时让scroll.content
保持不动,即阻止某个子图层的拖动事件传播到它的父图层,把propagateEvents
设置为false
就可以了,它对于所有嵌套图层都是有效的。
scroll = new ScrollComponent
width: Screen.width,
height: Screen.height
scroll.content.backgroundColor = "#28affa"
layerA = new Layer
parent: scroll.content,
backgroundColor: "#fff"
layerA.draggable.enabled = true
# Setting propagateEvents to false allows you to drag layerA
# without also scrolling within the ScrollComponent
layerA.draggable.propagateEvents = false