Draggable Layers 可拖拽层

Basic Usage 基本用法

Layers can be made draggable using the draggable property.
层可以使用draggable属性来使其可被拖拽。

$('canvas')
.drawArc({
  layer: true,
  draggable: true,
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50
})
.drawRect({
  layer: true,
  draggable: true,
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100
});

By default, draggable shapes will not move to the front when dragged. To change this behavior, set the bringToFront property to true.
默认可拖拽形状在被拖拽时不会跑到前边来，要改变这个行为，请设置bringToFront属性为true。

$('canvas')
.drawArc({
  layer: true,
  draggable: true,
  bringToFront: true,
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50
})
.drawRect({
  layer: true,
  draggable: true,
  bringToFront: true,
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100
});

Drag Events（拖拽）drag事件

You can provide callbacks for when any drag event occurs by defining dragstart, drag, dragstop, and dragcancel callbacks.
你可以在任意拖拽事件发生时，定义dragstart，drag，dragstop和dragcancel回调函数，来提供回调方法。

• dragstart: Triggers when you start dragging a layer
  dragstart：当你开始拖拽一个层时触发
• drag: Triggers as you drag a layer
  drag：随着你拖拽层时触发
• dragstop: Triggers when you stop dragging a layer
  dragstop：当你停止拖拽层时触发
• dragcancel: Triggers when you drag a layer off the edge of the canvas
  dragcancel：当你拖拽层脱离画布边缘时触发

$('canvas')
.drawArc({
  layer: true,
  draggable: true,
  bringToFront: true,
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50,
  dragstart: function() {
    // code to run when dragging starts 开始拖拽时运行的代码
  },
  drag: function(layer) {
    // code to run as layer is being dragged 层被拖拽时运行的代码
  },
  dragstop: function(layer) {
   // code to run when dragging stops 停止拖拽时运行的代码
  }
});

The dragging property（拖拽中）dragging属性

At any time, you can determine if a layer is currently being dragged by checking its dragging property. When the layer is being dragged, its value is true. Otherwise, its value is false.
在任何时候你都可以通过检查层的dragging属性来判断层此刻是否被拖拽中。当层被拖拽时，它的值是true，否则是false。

Drag groups 拖拽组

jCanvas allows you to assign a drag group to a layer. This means that when the layer is dragged, all other layers in the same layer group will also be dragged.
jcanvas允许你给层分配一个拖拽组，这意味着当层被拖拽时，同在一个组中的其它层也会被拖拽。

This draggable grouping is achieved when you add the dragGroups property to any (typically all) layers in the same layer group.
这个可拖拽的组，可以通过给同层组内任意层（通常是所有的层）添加dragGroups属性来达到。

// Both layers will be dragged together 两个层都会被一起拖拽
$('canvas')
.drawArc({
  layer: true,
  draggable: true,
  groups: ['shapes'],
  dragGroups: ['shapes'],
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50
})
.drawRect({
  layer: true,
  draggable: true,
  groups: ['shapes'],
  dragGroups: ['shapes'],
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100
});

Restricting dragging to an axis 将拖拽限制到坐标轴上

You can restrict the dragging of any layer to either the x or y axis using the restrictDragToAxis property.
你可以将任意层的拖拽限制到x或y轴上，使用restrictDragToAxis属性。（其实就是只允许横向或纵向拖拽）

$('canvas')
.drawArc({
  layer: true,
  draggable: true,
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50,
  restrictDragToAxis: 'x'
})
.drawRect({
  layer: true,
  draggable: true,
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100,
  restrictDragToAxis: 'y'
});

Please note that if a layer in a drag group has restricted draggability, then all the draggability of all other layers in that drag group will also be restricted only when the original layer is dragged.
请注意，如果一个拖拽组中的层拥有了限制拖拽性，那么组内所有的其它层的所有拖拽性，也会在最初的层被拖拽时受到限制。

Snap-to-grid dragging 对齐到网格的拖拽

If you wish to have your layers snap to a grid when dragged, you can do with the updateDragX and updateDragY callbacks, along with some simple math.
当你想让你的层在被拖拽时对齐到网格，你可以通过使用updateDragX和updateDragY回调函数来达成，同时也要使用一些数学方法。

// The pixel multiple to snap to 要对齐的像素的倍数 
var snapToAmount = 40;
// Round the given value to the nearest multiple of n 把给定的值四舍五入到最近的n的倍数上
function nearest(value, n) {
  return Math.round(value / n) * n;
}
$('canvas').drawArc({
  layer: true,
  draggable: true,
  fillStyle: '#36c',
  x: 160, y: 120,
  radius: 50,
  updateDragX: function (layer, x) {
    return nearest(x, snapToAmount);
  },
  updateDragY: function (layer, y) {
    return nearest(y, snapToAmount);
  }
})