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 ...
随机推荐
- 【BZOJ 2510】 2510: 弱题 （矩阵乘法、循环矩阵的矩阵乘法）
2510: 弱题 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 374 Solved: 196 Description 有M个球,一开始每个球均有一 ...
- [Usaco2015 Feb]Censoring --- AC自动机 + 栈
bzoj 3940 Censoring 题目描述 FJ把杂志上所有的文章摘抄了下来并把它变成了一个长度不超过10^5的字符串S. 他有一个包含n个单词的列表,列表里的n个单词记为T1......Tn. ...
- POJ3233 Matrix Power Series 矩阵乘法
http://poj.org/problem?id=3233 挺有意思的..学习到结构体作为变量的转移, 题意 : 给定矩阵A,求A + A^2 + A^3 + ... + A^k的结果(两个矩阵相加 ...
- 数位dp小结以及模板
这里是网址 别人的高一啊QAQ.... 嗯一般记忆化搜索是比递推好写的所以我写的都是dfs嗯......(因为我找不到规律啊摔,还是太菜.....) 显然这个东西的条件是非常的有套路..但是不管怎么样 ...
- python一行代码开启http
python -m SimpleHTTPServer 8000 & 监听8000端口 浏览器用127.0.0.1:8000访问 如果出现no module named SimpleHTTPSe ...
- arraylist-lambada-性能测试
package cn.com.one;import java.util.ArrayList;public class ttt { public static void main(String [] a ...
- bzoj 1051 强连通分量
反建图,计算强连通分量,将每个分量看成一个点,缩点后的图是一个DAG,如果是一棵树,则根代表的连通分量的大小就是答案,否则答案为0. 收获: 图的东西如果不好解决,可以尝试缩点(有向图将每个强连通分量 ...
- 69.广搜练习： 最少转弯问题（TURN）
[问题描述] 给出一张地图,这张地图被分为n×m(n,m<=100)个方块,任何一个方块不是平地就是高山.平地可以通过,高山则不能.现在你处在地图的(x1,y1)这块平地,问:你至少需要拐几个弯 ...
- memcached添加日志输出
引子:qa的memcached总是隔一段时间挂掉,导致qa进不去.决定查一下原因,于是添加日志输出,等下次出错便于查阅.定位问题. memcache默认没有日志输出.如果想把memecache服务日志 ...
- 在VIEW引入CSS、JS文件
外联 CSS: <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?> generates <!-- ...