6.拖拽
6.1.拖拽功能
要實現Kinetic對象的拖拽功能很簡單，只需要將圖形對象的draggable屬性設爲true就能夠了。html
<script>post
// 在構造方法中的config參數設置spa
var shape = new Kinetic.Circle({.net
draggable: true;htm
});對象
// 用圖形對象的方法設置教程
shape.draggable(true);事件
</script>ip
這種拖拽功能還能夠應用到組（Group）、層（Layer）和舞臺（Stage），設置方法相似。不過要注意的是，應用到組或層上時，拖拽組或層上的任一對象，整個組或層都會移動，而對於舞臺，拖拽舞臺上任何位置都能移動整個舞臺，而無需拖拽舞臺上的圖形對象。get
6.2.拖拽線條
線條（Line）的拖拽功能設定與其餘類型圖形相似，只是線條須要用像素檢測功能，所以須要線條所在層添加到舞臺後執行一次saveData方法，在拖拽動做結束事件處理方法中也要執行一次saveData方法。
<script>
// 在構造方法中的config中設定
var line= new Kinetic.Line({
draggable: true;
});
// 使用對象的方法設定
line.draggable(true);
// 保存像素數據
line.saveData();
//必須在每次拖拽完畢後執行一次saveData
line.on(「dragend」, function() {
blueLine.saveData();
});
</script>
完整代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset=「UTF-8″>
<title>KineticJS</title>
<script src=「../kinetic.js」></script>
</head>
<body>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container : 「container」,
width : 600,
height : 400
});
var layer = new Kinetic.Layer();
var line = new Kinetic.Line({
points : [ 100, 150, 340, 230 ],
stroke : 「blue」,
strokeWidth : 10,
draggable : true
});
layer.add(line);
stage.add(layer);
//保存像素數據
line.saveData();
//必須在每次拖拽完畢後執行一次saveData
line.on(「dragend」, function() {
blueLine.saveData();
});
};
</script>
<div id=「container」></div>
</body>
</html>
6.3.拖拽事件
有關拖拽的事件包括拖拽開始dragstart，拖拽中 dragmove，拖拽結束 dragend ，咱們能夠根據本身的須要綁定這幾個事件響應方法。
<script>
shape.on(「dragstart」, function(evt) {
// 響應代碼
};
shape.on(「dragmove」, function(evt) {
// 響應代碼
};
shape.on(「dragend」, function(evt) {
// 響應代碼
};
</script>
6.4.拖拽方向限制
Kinetic支持對拖拽運動限制在水平或者垂直方向上，這個功能經過對象的 dragConstraint屬性進行設置來實現。 dragConstraint屬性能夠有三個選項，包括 none， horizontal和 vertical，默認狀況下這個屬性的值是none。
<script>
// 在構造方法中的config參數中設置，拖動被限制在水平方向上
var shape = new Kinetic.Rect({
dragConstraint: 「horizontal」
});
// 用對象的方法設置，拖動被限制在水平方向上
shape.setDragConstraint(「horizontal」);
</script>
6.5.拖拽範圍限制
Kinetic經過 dragBounds 屬性的設置能夠將拖拽限制在一個矩形範圍以內。dragBounds 屬性包括top， right， bottom， 和 left 四個參數，這四個參數能夠只設置其中的幾個，不須要所有設置。
<script>
// 在構造方法的config參數中設置
var shape = new Kinetic.Circle({
dragBounds: {
top: 50
}
});
// 在對象的方法中設置
shape.setDragBounds({
top: 0,
left: 0,
right: 200,
bottom: 200
});
</script>