KineticJS教程（6）
KineticJS教程（6）
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>
KineticJS教程（6）的更多相关文章
- KineticJS教程（12）
KineticJS教程(12) 作者: ysm 12.舞台 12.1.舞台的大小 舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度. <scr ...
- KineticJS教程（11）
KineticJS教程(11) 作者: ysm 11.对象的上下关系 11.1.层的上下关系 Kinetic的层是按照添加到舞台的次序,由下向上排列,上层遮盖下层的图形.每个层各自有一个ZIndex编 ...
- KineticJS教程（10）
KineticJS教程(10) 作者: ysm 10.在容器之间移动图形对象 Kinetic支持通过图形对象的moveTo(container)方法把图形对象从一个容器移动到另一个容器里,这个容器指 ...
- KineticJS教程（9）
KineticJS教程(9) 作者: ysm 9.选择器 Kinetic在舞台.层和组对象上都提供了get方法,用于返回这三者中包含的对象. 9.1.根据ID获取对象 要用id获取对象,首先要给对象 ...
- KineticJS教程（8）
KineticJS教程(8) 作者: ysm 8.动画 动画就是一帧帧的画面按照时间间隔显示出来,Kinetic给我们提供了一个舞台对象的onFrame方法,用这个方法可以绑定一个动画方法,我们要显 ...
- KineticJS教程（7）
KineticJS教程(7) 作者: ysm 7.图形变换 7.1.线性变化 Kinetic提供了一个图形对象的transitionTo(config)方法实现图形的线性变换,也就是从原始的状态线性变 ...
- KineticJS教程（5）
KineticJS教程(5) 作者: ysm 5.事件响应 5.1.图形的事件响应 图形对象对事件的响应处理可以使用 on() 方法绑定事件类型和相应方法. On() 方法需要一个事件类型参数和相应 ...
- KineticJS教程（4）
KineticJS教程(4) 作者: ysm 4.图形样式 4.1.填充 Kinetic中图形的填充属性可以在构造方法中的config参数中的fill属性进行设定,也可以用图形对象的setFill方 ...
- KineticJS教程（3）
KineticJS教程(3) 作者: ysm 3.图形对象 3.1.Shape Kinetic提供了一个Shape对象用于在层上绘制图形,我们可以通过Kinetic.Shape()构造方法返回一个S ...
随机推荐
- shell中的条件判断if和测试
(一)条件判断 if 中-z 到 -d 的意思 [ -a file ] 若file存在,则为真. [ -b file ] 若file存在且是一个块特殊文件,则为真. [ -c file ] 若file ...
- 【BZOJ 4229】 4229: 选择 (线段树+树链剖分)
4229: 选择 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 67 Solved: 41 Description 现在,我想知道自己是否还有选择. ...
- 【刷水-贪心】BZOJ1629-[Usaco2007 Demo]Cow Acrobats
[题目大意] 有n个头牛,给出体重和力量.每个牛的危险值等于它上面的牛的体重总和减去它的力量值,求所有方案中危险值最大值的最小值. [思路] 贪心.一开始脑补的贪心是体重大的先放下面,体重相同的根据力 ...
- Problem C: 深入浅出学算法004-求多个数的最小公倍数
Description 求n个整数的最小公倍数 Input 多组测试数据,先输入整数T表示组数 然后每行先输入1个整数n,后面输入n个整数k1 k2...kn Output 求k1 k2 ...kn的 ...
- bzoj 1012 BST 支持插入，区间最大
水... /************************************************************** Problem: 1012 User: idy002 Lang ...
- SCOJ 4493: DNA 最长公共子串 后缀自动机
4493: DNA 题目连接: http://acm.scu.edu.cn/soj/problem.action?id=4493 Description Deoxyribonucleic acid ( ...
- linux基础命令学习（六）文件的特殊属性
Linux chattr命令用于改变文件属性. 这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有以下8种模式: a:让文件或目录仅供附加用途. b:不更新文件或目录的最后存取 ...
- 查看linux启动的线程信息
1.某一进程所有的线程个数.启动时间 ps max -o lstart,lwp,pid,nlwp,cmd|more lstart: STARTED time the command start ...
- Spring EL bean引用实例
在Spring EL,可以使用点(.)符号嵌套属性参考一个bean.例如,“bean.property_name”. public class Customer { @Value("#{ad ...
- IDA 显示函数名称技巧
http://blog.csdn.net/safedebug/article/details/17061735v