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 ...
随机推荐
- MySQL笔记（二）之数据检索常用关键字
SELECT 用于数据的选择 语法: SELECT 列 FROM 表; #从表中选择某些列,也可以是*,代表全部列 DISTINCT 当某些列包含重复值的时候,DISTINCT用于过滤掉重复值,使重复 ...
- 几何：pick定理详解
一.概念 假设P的内部有I(P)个格点,边界上有B(P)个格点,则P的面积A(P)为:A(P)=I(P)+B(P)/2-1. 二.说明 Pick定理主要是计算格点多边形(定点全是格点的不自交图形)P的 ...
- []APC001
题目质量都好高啊... A:求一个是$X$的倍数但不是$Y$的倍数的数,无解输出$-1$ 无解就是$Y|X$,否则输出$X$即可 B:给定$a_{1\cdots n},b_{1\cdots n}$,求 ...
- 【最小表示法】BZOJ1398-寻找朋友
[题目大意] 判断两个字符串是否循环同构. [思路] 我一开始的做法是直接同时在两个字符串上求最小表示法,只有部分测试点能过,理由未知,以后再来思考. 现在做法:分别求出两个字符串的最小表示法,再比较 ...
- loj115 无源汇有上下界可行流
link 题意&题解 code: #include<bits/stdc++.h> #define rep(i,x,y) for (int i=(x);i<=(y);i++) ...
- trie--- POJ 3764 The xor-longest Path
The xor-longest Path Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5453 Accepted: 1 ...
- bzoj1634护花
试题描述: 约翰留下他的N(N<=100000)只奶牛上山采木．他离开的时候,她们像往常一样悠闲地在草场里吃草．可是,当他回来的时候,他看到了一幕惨剧:牛们正躲在他的花园里,啃食着他心爱的美丽花 ...
- 一步一步创建JAVA线程
(一)创建线程 要想明白线程机制,我们先从一些基本内容的概念下手. 线程和进程是两个完全不同的概念,进程是运行在自己的地址空间内的自包容的程序,而线程是在进程中的一个单一的顺序控制流,因此,单个进程可 ...
- Windows UWP开发系列 – MessageDialog 和 ContentDialog
MessageDialog 在Metro程序中,没有传统的窗口,当我们要用需要交互的消息提示时,在Win8时代,引入了一个MessageDialog来取代常用的MessageBox.使用方法如下: p ...
- SMT Surface Mount Technology footprint references
http://en.wikipedia.org/wiki/Surface-mount_technology Surface-mount technology (SMT) is a method for ...