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 ...
随机推荐
- Redis学习篇（四）之List类型及其操作
Redis的List是一个双向链表 LPUSH 作用:向列表左端添加元素 语法:LPUSH key value value... 从左到右逐个添加到左端,前面的先添加, 可以一次添加多个元素 RPUS ...
- PHP 笔记——PDO操作数据库
一.简介 PHP 5.1可使用轻量级的统一接口 PDO(PHP Data Object,PHP数据对象)来访问各种常见的数据库.而使用PDO只需要指定不同的 DSN(数据源名称)即可访问不同的数据 ...
- 91网漏洞打包#越权+爆破+存储xss可打cookie
漏洞一.主站存在登录口爆破 抓包,爆破一下 爆破成功 漏洞二.检测app时一处存储xss 在app登录后 我要提问那里插入xss 然后弹窗 可以打到cookie 漏洞三.app个人资料处平行越权可查看 ...
- VK Cup 2016 - Qualification Round 1 (Russian-Speaking Only, for VK Cup teams) B. Chat Order 水题
B. Chat Order 题目连接: http://www.codeforces.com/contest/637/problem/B Description Polycarp is a big lo ...
- Java获取服务器IP和客户端IP
服务器IP: String addr = InetAddress.getLocalHost().getHostAddress(); 说明:很明显上面是没考虑到服务器有多个iP的情况. 客户顿啊IP: ...
- debian8上安装pyspider - pyspider中文文档 - pyspider中文网
debian8上安装pyspider - pyspider中文文档 - pyspider中文网 #apt-get install python python-dev python-distribu ...
- Centos 6/ 7下通过yum安装php7环境
本文转自:云溪社区 2015年12月初PHP7正式版发布,迎来自2004年以来最大的版本更新.PHP7最显著的变化就是性能的极大提升,已接近Facebook开发的PHP执行引擎HHVM.在WordPr ...
- nginx出现504 Gateway Time-out的解决思路
http://www.xbc.me/nginx-fix-504-gateway-timeout/ 在安装完Nginx+PHP-fpm+Mysql后 (如何安装LNMP环境,请参考快速配置LNMP环境N ...
- WM-N-BM-09 WM-N-BM-14
USI Delivers WICED Module to Gain Great Success Customers Broadcom’s Wireless Internet Connectivity ...
- C++输出上三角/下三角/菱形/杨辉三角形
1.输出上三角形 第一行1个星,第二行3个星,第三行5个星,第四行7个星,第五行9个星. 分析:三角形的形状由输出的空白和星组成,通过分析每一行输出几个空格,几个星,就可完成输出三角形的工作. #in ...