javascript
KineticJS教程（6）
KineticJS教程（6）
作者: ysm?6.拖拽
6.1.拖拽功能
要實現Kinetic對象的拖拽功能很簡單，只需要將圖形對象的draggable屬性設為true就可以了。
<script>
// 在構造方法中的config參數設置
var shape = new Kinetic.Circle({
draggable: true;
});
?
// 用圖形對象的方法設置
shape.draggable(true);
</script>
這種拖拽功能還可以應用到組（Group）、層（Layer）和舞臺（Stage），設置方法類似。不過要注意的是，應用到組或層上時，拖拽組或層上的任一對象，整個組或層都會移動，而對于舞臺，拖拽舞臺上任何位置都能移動整個舞臺，而無需拖拽舞臺上的圖形對象。
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>
轉載于:https://www.cnblogs.com/zhangleblog/p/3912181.html
總結
以上是生活随笔為你收集整理的KineticJS教程（6）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript读取xml文件读取节
- 下一篇： gradle idea java ssm