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 ...
随机推荐
- nginx hello模块代码
// ngx_http_mytest_module.c #include "ngx_core.h" #include "ngx_string.h" #inclu ...
- iOS Core Animation 动画 入门学习（一）基础
reference:https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreAnimation_guide ...
- SHELL异常处理(转载)
写SHELL好久了,经常被异常困扰,可竟然坚持了若干年没用过,回想以前服务过的公司,阿弥陀佛,罪过罪过.废话少说,希望此篇文章可以协助大家和我彻底结束SHELL脚本就是LINUX命令集合的初级阶段. ...
- IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2) C. Bear and Up-Down 暴力
C. Bear and Up-Down 题目连接: http://www.codeforces.com/contest/653/problem/C Description The life goes ...
- MYSQL学习笔记 （六）explain分析查询
使用EXPLAIN可以模拟优化器执行SQL语句,从而知道MYSQL是如何处理你的SQL,从而分析查询语句或者表结构的瓶颈.
- PHP正则表达式30分钟入门教程
正则表达式30分钟入门教程 三个常用的知识点: 1.惰性匹配:正则引擎默认是贪婪的,若要最少重复的话,需要用到惰性匹配符 “?” 懒惰限定符 代码/语法 说明 *? 重复任意次,但尽可能少重复 +? ...
- How Basic Performance Analysis Saved Us Millions-------火焰图
ENGINEERING How Basic Performance Analysis Saved Us Millions Michael Malis May 19, 2017 9 min read ...
- C# 通过HttpWebRequest在后台对WebService进行调用
通过HttpWebRequest在后台对WebService进行调用 http://www.cnblogs.com/macroxu-1982/archive/2009/12/23/1630415.ht ...
- linux查看某个端口是被哪个进程占用的
查看某个端口是被哪个进程占用的: netstat -tunpl | grep 6379
- mount umont
如果想在运行的Linux下访问其它文件系统中的资源的话,就要用mount命令来实现. 2. mount的基本用法是?格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有: ...